Matplotlib turns a list of category labels and numeric values into a vertical bar chart with plt.bar(x, height), but the same result can be produced without writing Python by pasting 2 to 30 strict label,value rows into the Bar Chart Maker and exporting the preview as a standalone SVG. The browser tool replaces the import statement, the figure call, and the savefig line with a single Generate button, then produces a 520-pixel-tall SVG with a fixed linear y-axis, a baseline at zero, and five evenly spaced reference ticks. Anyone searching for matplotlib tutorials usually wants three things: a quick path from a small dataset to a visible chart, predictable control over how bars and axis ticks look, and a portable file they can drop into a slide, document, or web page. The browser tool covers all three, with one trade-off worth knowing up front: it is intentionally narrow, accepts CSV-lite rows rather than full CSV, uses a fixed linear scale rather than matplotlib's optional log scale, and runs entirely in the current tab rather than from a Python interpreter. The same exported file powers both the visible preview and the Blob download, so what you see is exactly the file you save. The rest of this article walks through what the tool accepts, what it computes, and how to verify the SVG before downloading.
What matplotlib Would Plot for This Data
The matplotlib path for a small categorical dataset looks like this. Suppose you have five fruit categories with sales counts of 73, 45, 60, 28, and 12. In a typical matplotlib script you would build two parallel lists, call plt.bar(labels, values), optionally add a title with ax.set_title(...), and save with plt.savefig("fruit_sales.svg"). The default behavior gives you five vertical bars on a linear y-axis, a baseline at zero, and a small number of reference ticks whose exact positions matplotlib decides internally. The output is portable, but you still need a working Python environment, an installed matplotlib package, and enough context switching to keep the script, the data, and the figure file in sync.
The browser-based Bar Chart Maker reaches the same destination from the opposite direction. Paste the data, click once, and the preview shows what matplotlib would have drawn: five vertical bars, a baseline at zero, five reference ticks, an optional title, and a rotated category label under each bar. The chart height is fixed at 520 pixels; its width grows as more categories are added, and the preview scrolls horizontally when 30 labels would otherwise be squeezed onto a narrow screen.
Input Rules the Browser Tool Enforces
Because the tool is intentionally narrow, every input must follow a strict format. The accepted shape is "label,value" — one label, exactly one comma, and one numeric token — repeated for at least two and at most thirty non-empty rows. Blank or whitespace-only lines are ignored. The label may contain up to 24 UTF-16 code units and the numeric token up to 40. One code unit beyond either limit fails the entire request. The parser never silently keeps the first 30 rows, skips a bad row, substitutes zero for a missing value, or returns a partial chart.
On the numeric side, only nonnegative finite base-ten numbers are accepted. Ordinary decimals such as 12.75 and scientific notation such as 1.2e3 are both allowed. Negative zero is normalized to zero. Lexical input that underflows to zero, input above 1e300, hexadecimal, Infinity, NaN, expressions, typed units, quoted fields, additional columns, and empty labels are all rejected. Duplicate labels remain separate bars in input order; the tool does not aggregate, sort, or infer units. Leading and trailing whitespace around each label and number is trimmed automatically.
| Example input | Outcome |
|---|---|
| Apples, 73 | Accepted |
| Bananas,12 | Accepted (whitespace trimmed) |
| Oranges, 1.2e2 | Accepted (scientific notation) |
| Grapes, -5 | Rejected (negative value) |
| Plums, NaN | Rejected (not a finite number) |
| "Fuji, Red", 8 | Rejected (quoted field) |
| Pears, 45, 60 | Rejected (two commas) |
| ,73 | Rejected (empty label) |
| blank line | Ignored |
Build the Same Chart Without Python
- Enter an optional title and paste your 2 to 30 strict label,value rows into the input area. Each non-empty row must contain exactly one comma, with a label on the left and a nonnegative finite number on the right.
- Click Generate and inspect the preview. Confirm the category labels read correctly, the five reference ticks expose the full range, the baseline sits at zero, and no bar is invisibly thin because of an extreme value range.
- Click Download SVG to save the file. The downloaded string is identical to the markup shown in the preview, the file is a standalone SVG with the W3C namespace, and parsing, layout, preview, and download all stay in the current browser tab.
Editing the title or data immediately clears the previous preview, status message, and download link, so a stale chart can never leak into a new result. The downloaded SVG can be opened directly in a browser, dropped into a presentation, or pasted into HTML — it does not depend on any external stylesheet or script.
How the Linear Scale and Reference Ticks Are Decided
The Bar Chart Maker uses a deterministic, product-defined nice-domain approach rather than reproducing matplotlib's internal tick algorithm. Bar height equals value times plot height divided by the displayed axis maximum, so the largest value in the dataset determines where the top tick lands. The displayed maximum rounds upward to the next finite 1, 2, 5, or 10 multiple of a power of ten that is strictly greater than the largest value. Five evenly spaced reference ticks then expose the range.
For a concrete example, take a dataset whose largest value is 73. The value 73 sits in the interval [10, 100), so the reference power of ten is 10² = 100. The 1/2/5/10 multiples of 100 are 100, 200, 500, and 1000. The first multiple strictly greater than 73 is 100, so the displayed axis maximum becomes 100. The five reference ticks are 0, 25, 50, 75, and 100. A bar with value 25 then reaches exactly one-quarter of the plot height. Coordinates are rounded to three decimals for the markup, and axis labels use up to six practical significant digits or scientific notation when the range demands it.
When every value in the dataset is zero, the chart switches to an explicit zero-to-one reference range, keeps every bar at zero height on the baseline, and adds an all-zero note. This avoids a divide-by-zero error without altering the supplied values.
Edge Cases matplotlib Handles Differently
Three behaviors deserve attention because they differ from a typical matplotlib default run.
- Extreme value ranges. When one category's value is hundreds of orders of magnitude larger than another, the smaller bar's pixel height can fall below SVG coordinate precision and look invisible. The tooltip still reports the actual value, but a logarithmic or separately grouped chart is the right tool when small categories must remain visually distinguishable.
- Negative or non-finite values. The parser rejects the entire dataset rather than skipping a bad row, so a single typo stops generation. This is stricter than matplotlib, which silently draws a downward bar for a negative value.
- No logarithmic scale and no percentage normalization. The tool does not switch to log scaling, normalize bars to percentages of a total, or imply statistical significance. If the audience needs to compare proportions of a whole, a pie chart is the better choice.
matplotlib vs. Bar Chart Maker at a Glance
| Aspect | matplotlib | Bar Chart Maker |
|---|---|---|
| Runtime | Python interpreter with matplotlib installed | Current browser tab, no installation |
| Input shape | Lists, arrays, or pandas DataFrames | 2 to 30 strict label,value rows |
| Scale type | Linear or logarithmic | Linear only |
| Tick computation | matplotlib internal algorithm | 1/2/5/10 nice upper bound, five fixed ticks |
| Output formats | PNG, PDF, SVG, and others | Standalone SVG only |
| Data upload | Stays local unless explicitly saved online | Never leaves the browser tab |
| Code required | Yes | No |
For a matplotlib user, the practical decision is whether the dataset is small enough (2 to 30 categories) and well-behaved enough (nonnegative finite values, no commas in labels) to fit the browser tool's strict format. When it does, the browser route replaces an import statement, a figure call, a savefig line, and a terminal run with three clicks.
Verifying the SVG Before You Download
The single SVG string that powers the preview is the same string that becomes the downloaded Blob, so the chart you reviewed is the chart you receive. The file uses the W3C SVG namespace and standard rect, line, text, g, and title elements, which means it renders correctly in modern browsers, design tools, and document editors that accept SVG. User strings are XML-escaped before they enter text, tooltip, title, or accessibility attributes — ampersands, angle brackets, quotes, and apostrophes become entities, and XML-forbidden controls become U+FFFD. A script-like label therefore stays visible text rather than becoming an SVG element.
Coordinates are always drawn from validated finite values and rounded to three decimals, so the markup cannot contain an out-of-bounds or non-finite coordinate. A blank visible title still receives the accessible label "Bar chart", which keeps the output screen-reader friendly. The Blob URL is revoked when the title or data is edited, a result is replaced, a generation error occurs, or the component unmounts, so neither immediate-revocation download races nor accumulated ObjectURL leaks can occur. For an authoritative reference on the underlying markup, see the W3C SVG 2 specification; for the kind of linear scale the tool imitates, see the D3 linear scale documentation.