A bar chart maker is a browser-based tool that converts a small set of category rows into a vertical bar chart and exports that exact chart as a standalone SVG, with parsing, scaling, layout, and download all happening locally. The Bar Chart Maker accepts 2 to 30 strict label,value rows, where every non-empty row contains exactly one comma, a label before it, and a nonnegative finite number after it. Once the rows pass validation, the tool computes a deterministic linear scale, rounds the upper bound up to a clean 1, 2, 5, or 10 multiple of a power of ten, places five evenly spaced reference ticks across the plot, and renders one bar per accepted row. The same SVG string powers both the preview and the file you download, so what you review is what you save. Nothing is uploaded: labels, values, the title, and the SVG itself stay inside your current browser tab.
What a bar chart maker actually does
At its core, a bar chart maker takes categorical data, meaning a list of named categories each paired with a single numeric value, and turns that list into a visual comparison. Each category becomes a bar, the height of the bar encodes the value, and a baseline plus reference ticks give the reader a sense of magnitude. The bar chart maker described here runs entirely in the browser, so there is no spreadsheet export, no account, and no server round trip. You paste your rows, the tool parses them, lays out the chart, and gives you a self-contained SVG you can save or embed.
The "explained" angle matters because most generic chart tools hide what they actually did with your numbers. They might have sorted your data, swapped colors by meaning, or quietly truncated your input. A deterministic bar chart maker, by contrast, follows a fixed contract: the rows you submit in the order you submit them produce the bars in that order; the scale is computed from your values alone; and the downloaded file is byte-for-byte the same SVG string you reviewed in the preview. That contract is what makes the output predictable and trustworthy.
Inside the parser: CSV-lite rows and exact limits
The Bar Chart Maker uses a deliberately strict input format called CSV-lite. Every non-empty row must contain exactly one comma, a label before it, and a numeric token after it. Blank or whitespace-only lines are ignored. Quoted fields, quoted commas, additional columns, empty labels, typed units, formulas, hexadecimal numbers, Infinity, and NaN are not supported. Leading and trailing whitespace around each label and number is trimmed. A label may contain at most 24 UTF-16 code units, and a numeric token at most 40; exact limits, with one code unit beyond failing the entire request.
The parser never partially accepts input. If you paste 31 rows, generation fails with the exact non-empty row count; the tool does not silently keep only the first 30. If one row is malformed, the whole chart is rejected rather than skipping the bad row or substituting zero. The accepted rows drive the chart exactly, in input order, with duplicate labels remaining as separate bars.
| Input format | Result |
|---|---|
| Apples,12 | Accepted as one row |
| Apples, 12 | Accepted; surrounding whitespace is trimmed |
| "Apples, red",12 | Rejected; quoted fields and quoted commas are not supported |
| Apples,12,kg | Rejected; extra columns are not supported |
| Apples, | Rejected; empty numeric token |
| ,12 | Rejected; empty label |
| Apples,-5 | Rejected; values must be nonnegative |
| Apples,1e-301 | Rejected; nonzero input below 1e-300 underflows |
| 31 valid rows | Rejected; the entire request fails |
Numeric values must be nonnegative finite base-ten numbers. Ordinary decimals and e or E scientific notation are accepted, and negative zero is normalized to zero. Nonzero values from 1e-300 through 1e300 are supported; lexical nonzero input that underflows to zero and any input above the maximum are rejected. This strictness is what keeps the parser fast, predictable, and free of the "why did my chart look weird" surprises that plague tools that try to be lenient.
The linear scale and the 1, 2, 5, 10 nice upper domain
Bar height uses a nonnegative linear scale. Zero maps to the baseline and the displayed axis maximum maps to the plot top. The upper bound does not just equal the largest value in your data; it rounds upward to a finite 1, 2, 5, or 10 multiple of a power of ten, and five evenly spaced reference ticks expose the range. This is the "nice domain" approach used by charting libraries such as the D3 linear scale, where the rounded ceiling is chosen so the tick labels end on clean numbers rather than awkward fractions.
For example, if your accepted rows are Apples,12, Pears,27, Plums,8, and Grapes,35, the largest value is 35. The nice upper bound rounds 35 up to the next 1, 2, 5, or 10 multiple of a power of ten, which is 50. The five evenly spaced ticks then sit at 0, 12.5, 25, 37.5, and 50, giving every bar a clean reference line. The same logic applies whether your largest value is 4 (nice upper 5), 73 (nice upper 100), or 412 (nice upper 500).
This product-defined nice-domain approach is deterministic but is not a promise to reproduce every D3 tick choice. It also does not use logarithmic scaling, normalize to percentages, or imply statistical significance. Axis labels use up to six practical significant digits or scientific notation, so values near the top of the axis remain readable. For exact analytical work, keep your source numbers rather than reading them back from the chart.
From layout to standalone SVG: why preview equals download
Once the rows are parsed and the scale is fixed, the chart is laid out as SVG markup. The output is 520 pixels high and expands horizontally as rows are added; category slots stay separated, and wide charts scroll in the preview rather than squeezing 30 labels into a mobile width. Coordinates are finite, bounds-validated, and rounded to three decimals for the markup. Axis labels follow the same rounding, and the chart uses standard rect, line, text, g, and title elements within the W3C SVG namespace.
Every user string is XML-escaped before it enters any text node, tooltip, title, or accessibility attribute. Ampersands, angle brackets, quotes, and apostrophes become entities, and XML-forbidden controls or unpaired surrogates become U+FFFD. Numeric coordinates come only from validated finite values, so even a script-like label such as <script> stays visible text inside the SVG instead of becoming a live element. A blank visible title still receives the accessible label "Bar chart", so screen readers always have something to announce.
The same generated SVG string drives the preview and the file download. A successful generation creates one Blob URL from that exact string, and the download anchor uses it. The Blob URL is revoked when you edit the title or data, when a result is replaced, when generation fails, or when the component unmounts, which avoids both immediate-revocation download races and accumulated ObjectURL leaks. If Blob creation or URL creation fails, you see an error and no stale download remains. You can review the SVG 2 specification for the underlying element semantics.
Using the Bar Chart Maker step by step
- Open the Bar Chart Maker and enter an optional title in the title field; a blank title still receives the accessible label "Bar chart".
- Paste your data as 2 to 30 non-empty rows, each written as label,value with exactly one comma and a nonnegative finite number after it.
- Click generate and read the status: a success means all rows were accepted and the preview shows category labels, five tick values, the baseline, zeros, and any extreme-range visibility limits.
- Inspect the preview for category labels, tick spacing, bar order, tooltip values, and any extreme-range warnings before exporting.
- Click the download button to save the standalone SVG; the downloaded file matches the preview markup exactly.
- If you need to revise the chart, edit the title or data; the previous preview, status, and download are cleared automatically, and the next generation creates a fresh SVG and Blob URL.
For a quick reference on the syntax and limits summarized above, the Bar Chart Maker cheat sheet on syntax, limits, and output gathers the same rules in one place.
Limits that change the chart: zeros, extremes, and all-zero data
Two cases deserve extra attention because they change what the chart looks like without changing your input. First, all-zero data uses an explicit zero-to-one reference range, keeps every bar at zero height, and displays an explicit all-zero note. This avoids division by zero without silently altering your supplied values.
Second, extremely wide value ranges can make a positive bar visually indistinguishable from zero at SVG coordinate precision. The bar's tooltip still reports the value, so the data is not lost, but the visible height may round to nothing. The tool does not invent a minimum-height bar, because doing so would break the stated linear scale. For a fuller guide on choosing scales and labels for this kind of data, see the bar chart best practices article on scales and labels. When tiny categories must remain visible next to values hundreds of orders larger, a logarithmic chart or a separately grouped chart is the right tool, not a workaround inside the same linear plot.
Finally, the chart does not aggregate, sort, infer units, choose colors by meaning, evaluate formulas, fetch data, parse full CSV, create raster images, or add legends or series. It also does not verify whether a chart communicates responsibly. Check labels, axis range, zero handling, extreme-scale visibility, and tooltips before publishing. Those checks are yours, not the tool's, and they are the difference between a chart that is technically correct and one that is actually clear.