Bar Chart Maker accepts 2 to 30 non-empty label,value rows written in strict CSV-lite syntax, with exactly one comma per row, and renders them as a vertical bar chart in the current browser tab before exporting that exact string as a standalone SVG. The tool is built for compact categorical datasets: an optional title, a small list of categories, and a single nonnegative number per category. It deliberately rejects full CSV features so the parser stays predictable, the layout stays deterministic, and the exported file matches the preview byte for byte. This cheat sheet captures every published input rule, length limit, numeric format, rendering decision, and download behavior so you can paste, generate, verify, and export without re-reading the documentation. Use it as a working reference while you draft rows, and check it again when a generation rejects your input or when you need to confirm what the chart actually contains. The rules below are the same ones the parser enforces, not general recommendations.
CSV-Lite Input Syntax
The data field is intentionally CSV-lite rather than full CSV. Every non-empty row must contain exactly one comma, with the label before it and the numeric token after it. Blank lines and whitespace-only lines are silently ignored and do not count toward the row budget. Leading and trailing whitespace around each label and each number is trimmed before parsing, so an indented block of rows copied from a code block still parses cleanly. The parser does not split on extra commas, does not honor quoted fields, and does not accept quoted commas inside a label. If your source data contains commas inside category names, replace them with a different separator in the label before pasting. Each row produces exactly one bar in the chart in the order it was entered; the tool does not sort, aggregate, or infer units.
For a quick reference, a row like Apples,12 produces a label of Apples and a value of 12. Adding a second row such as Oranges,7 creates a second bar to the right of the first. Duplicate labels are allowed and stay as separate bars in input order, which is useful when the same category appears at different times or in different segments.
Row, Label, and Value Length Limits
Generation requires between 2 and 30 non-empty rows inclusive. Below 2 the request fails; above 30 the request fails with the exact non-empty row count. The parser never keeps the first 30 rows, never skips a bad row, never substitutes zero, and never produces a partial chart. A single malformed row rejects the entire request, which is the safest behavior for a deterministic reference tool. Labels are capped at 24 UTF-16 code units, and numeric tokens are capped at 40 UTF-16 code units. The limit is exact, not approximate: a label of 24 code units is accepted, and one code unit beyond fails. This is the only practical reason to shorten a label before pasting, and the same boundary applies to the numeric side.
Accepted Numbers and Rejected Tokens
Values must be nonnegative finite base-ten numbers. Ordinary decimals such as 3.14 and scientific notation such as 1.5e3 are both accepted. Negative zero is parsed and normalized to zero so an all-zero dataset stays consistent. Nonzero values from 1e-300 through 1e300 are supported; lexical nonzero input that underflows to zero and input above the maximum are rejected with a clear status. The parser does not evaluate formulas, does not understand typed units, does not accept hexadecimal, and does not accept Infinity or NaN. Strings that look numeric but violate one of these rules cause the whole request to fail rather than silently coerce.
How to Generate and Download the SVG
- Open Bar Chart Maker in your browser and decide whether to add an optional title.
- Type or paste between 2 and 30 non-empty rows of label,value pairs, making sure each non-empty row contains exactly one comma and a nonnegative finite number after it.
- Click the generate action and read the status: it confirms category labels, the five tick values, the baseline, zero bars, and any extreme-range visibility limit that applies to your dataset.
- Inspect the live preview for category order, axis maximum, tick spacing, and tooltip behavior on individual bars.
- Click the download action to save the standalone SVG; the file is built from the exact string shown in the preview, so what you see is what you export.
- Edit the title or the data only after you are done downloading, because any edit immediately clears the previous preview, status, and download.
What the Rendered Chart Contains
Each successful generation produces a vertical bar chart with one bar per accepted row, a visible baseline, and five numeric reference ticks spaced evenly across the plotted range. Bar height uses a nonnegative linear scale in which zero maps to the baseline and the displayed axis maximum maps to the plot top. The upper bound rounds upward to a finite 1, 2, 5, or 10 multiple of a power of ten so the five ticks always land on clean values. This product-defined nice-domain approach is deterministic but is not a promise to reproduce every D3 tick choice; the scale rules used here are documented by the D3 linear scales reference. Category labels are rotated so they remain readable as rows are added, and the chart expands horizontally so 30 labels do not get squeezed into a mobile width. Each bar carries a tooltip with the original value, and the SVG includes an accessible description built from a blank title fallback of Bar chart when no title is provided. Coordinate values are bounds-validated and rounded to three decimals for markup, and axis labels use up to six practical significant digits or scientific notation.
All-Zero and Extreme-Range Edge Cases
If every value is zero, the chart switches to an explicit zero-to-one reference range, keeps every bar at zero height on the baseline, and displays an all-zero note. This avoids a division-by-zero path without changing any of the supplied values. On the other extreme, very wide value ranges can make a positive bar visually indistinguishable from zero at SVG coordinate precision; the tooltip continues to report the exact value, but the bar itself may be too short to see. The tool does not invent a minimum-height bar, because doing so would break the stated linear scale. When tiny categories must remain visible next to values hundreds of orders larger, the cheat sheet answer is to use a logarithmic chart or to split the data into separate charts. The chart does not use logarithmic scaling, does not normalize to percentages, and does not imply statistical significance, so any of those interpretations must come from the surrounding analysis.
Privacy, Escaping, and Output Behavior
Every parsing, layout, escaping, and download step runs in the current browser tab. No label, value, title, SVG string, or interaction is uploaded, so you can paste internal or draft data without changing your threat model. User strings are XML-escaped before entering text, tooltip, title, or accessibility attributes; ampersands, angle brackets, quotes, and apostrophes become entities, and XML-forbidden controls and unpaired surrogates become U+FFFD. Script-like labels therefore remain visible text rather than SVG elements, and the markup conforms to the W3C SVG 2 specification for the standard rect, line, text, g, and title elements in the SVG namespace. A successful generation creates one Blob URL from the same SVG string used in the preview, and that URL is revoked when the title or data changes, when a result is replaced, when generation fails, or when the component unmounts. This avoids both immediate-revocation download races and accumulated ObjectURL leaks. Blob creation or URL creation failure produces an error and never a stale download.
Quick Reference Table of Rules
| Area | Accepted | Rejected |
|---|---|---|
| Non-empty rows | 2 through 30 inclusive | Fewer than 2, more than 30, any malformed row |
| Row format | Exactly one comma, label before, number after | Quoted fields, quoted commas, extra columns, empty labels |
| Label length | Up to 24 UTF-16 code units | One code unit beyond 24 |
| Numeric token length | Up to 40 UTF-16 code units | One code unit beyond 40 |
| Numeric values | Nonnegative finite base-ten, including e/E notation | Hexadecimal, Infinity, NaN, typed units, formulas, underflow-to-zero, above 1e300 |
| Whitespace | Leading and trailing trimmed, blank lines ignored | Whitespace-only lines counted as rows |
| Duplicate labels | Allowed, kept as separate bars in input order | Aggregation, sorting, or implicit units |
| Scale | Linear with nice 1/2/5/10 upper domain | Logarithmic scaling, percentage normalization, minimum-height bars |
| Output | Standalone SVG, 520px high, horizontal growth | Raster images, embedded fonts, uploaded data |
| Edit behavior | Clears preview, status, and download on every edit | Stale downloads after a data change |
Use this table as the last check before publishing. Verify that labels read clearly when rotated, that the axis maximum still makes sense after the nice-domain rounding, that all-zero and extreme-range cases display the expected note or tooltip, and that any required chart communication (small categories beside very large ones, percentage framing, statistical inference) is handled outside the tool rather than assumed inside it.