Skip to content
Lizely

Bar Chart Maker

Turn 2 to 30 label,value rows into a readable bar chart and download the exact preview as SVG.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter an optional title and paste 2 to 30 strict label,value rows with exactly one comma per non-empty row.
  2. 2.Generate and verify category labels, five tick values, the baseline, zeros, and any extreme-range visibility limits.
  3. 3.Download the standalone SVG, which is created from the exact string shown in the preview.

About Bar Chart Maker

Bar Chart Maker converts a small categorical dataset into a vertical bar chart in the current browser. Enter one non-empty row per category as label,value, optionally add a title, and generate. The chart contains a baseline, five numeric reference ticks, one bar for every accepted row, rotated labels, tooltips, and an accessible description. One generated SVG string powers both the visible preview and its Blob download, so the exported file matches the markup you reviewed. Input is intentionally CSV-lite rather than full CSV. 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, expressions, hexadecimal, 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 are accepted and one code unit beyond fails. A chart requires 2 through 30 non-empty rows. Too few, too many, or one malformed row rejects the entire request. The parser never keeps only the first 30, skips a bad row, substitutes zero, or presents a partial chart. Editing title or data immediately clears the previous preview, status, and download. Values must be nonnegative finite base-ten numbers. Ordinary decimals and e/E notation are accepted. Negative zero is normalized to zero. Nonzero values from 1e-300 through 1e300 are supported; lexical nonzero input that underflows to zero and input above the maximum are rejected. Duplicate labels are allowed and remain separate bars in input order. The tool does not aggregate, sort, or infer units. 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 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 product-defined nice-domain approach is deterministic but is not a promise to reproduce every D3 tick choice. The chart does not use logarithmic scaling, normalize to percentages, or imply statistical significance. Extremely wide value ranges can make a positive bar visually indistinguishable from zero at SVG coordinate precision. Its tooltip still reports the value. The tool does not invent a minimum-height bar because doing so would break the stated linear scale. Use a logarithmic or separately grouped chart when tiny categories must remain visible beside values hundreds of orders larger. All-zero data uses an explicit zero-to-one reference range, keeps every bar at zero height, and displays an all-zero note. This avoids division by zero without changing supplied values. The SVG is 520 pixels high and expands horizontally as rows are added. Category slots remain separated and wide charts scroll in the preview instead of squeezing 30 labels into a mobile width. Coordinates are finite, bounds-validated, and rounded to three decimals for markup. Axis labels use up to six practical significant digits or scientific notation. Keep the source numbers when exact analysis is required. User strings are XML-escaped before entering text, tooltip, title, or accessibility attributes. Ampersands, angle brackets, quotes, and apostrophes become entities. XML-forbidden controls and unpaired surrogates become U+FFFD. Numeric coordinates come only from validated finite values. Script-like labels therefore remain visible text rather than SVG elements. The SVG uses the W3C namespace and standard rect, line, text, g, and title elements. A blank visible title still receives the accessible label Bar chart. A successful generation creates one Blob URL from the same SVG string used in the preview. That URL remains valid for a normal anchor download and is revoked when title or data changes, a result is replaced, generation fails, or the component unmounts. This avoids both immediate-revocation download races and accumulated ObjectURL leaks. Blob creation or URL creation failure produces an error and no stale download. Everything stays local: no label, value, title, SVG, or interaction is uploaded. The tool does not evaluate formulas, fetch data, parse full CSV, create raster images, add legends or series, choose colors by meaning, or verify whether a chart communicates responsibly. Check labels, axis range, zero handling, extreme-scale visibility, and tooltips before publishing.

Methodology & sources

Parse exactly 2 to 30 non-empty rows under label and numeric-token budgets, requiring exactly one comma and one strict nonnegative finite decimal or scientific value per row. Compute a finite nonnegative linear scale, a 1/2/5/10 nice upper domain, five evenly spaced ticks, zero-height zero bars, and an explicit all-zero state. Validate SVG bounds, round coordinates to three decimals, replace XML-forbidden characters, and entity-escape every user string. Store one generated SVG for preview and Blob download. Track its ObjectURL in a ref and revoke it on edit, replacement, failure, or unmount. Tests cover parsing, exact limits, eight fixed layout results, zero and extreme data, XML injection, title bounds, and defensive layout validation.

Frequently asked questions

Can labels contain commas?
No. This is CSV-lite, not full CSV: every non-empty row must contain exactly one comma and quoted commas are unsupported.
What happens above 30 rows?
Generation fails with the exact non-empty row count. The tool never silently keeps only the first 30 rows.
What if every value is zero?
The chart shows a zero-to-one reference axis, zero-height bars on the baseline, and an explicit all-zero note.
Why is a tiny positive bar not visible beside a huge value?
A linear ratio across an extreme range can be smaller than SVG coordinate precision. The tooltip retains the value; use a logarithmic or separate chart when visibility is required.
Is chart data uploaded?
No. Parsing, layout, SVG generation, preview, Blob creation, and export all stay in the current browser tab.

Related tools

Generators guides

View all