Overview
Enter a set of label/value rows, add a chart title and axis label, and get a bar chart rendered as plain, hand-rolled SVG - no charting library dependency, just computed rectangle positions and text labels. Choose vertical or horizontal bar orientation depending on how many categories you have and how long the labels are. Bars are always rendered from a zero baseline: negative or non-numeric values are flagged with a clear warning and treated as zero in the chart itself, since a bar chart has no established convention for representing a bar below its own baseline without misleading the reader. Every label you type is escaped before being inserted into the generated SVG or HTML, so pasted text can never break out of the markup or inject unexpected elements. Alongside the visual chart, an accessible data table renders the same label/value pairs in plain HTML, so anyone using a screen reader or navigating by keyboard has full access to the underlying data, not just the visual bars. Download the finished chart as a standalone .svg file, or copy the raw markup directly. Runs entirely client-side.
Best for: Turning a quick label/value dataset into a shareable chart image without opening a spreadsheet app
How to use this tool
- Add label/value rows. Type a label and a numeric value for each bar, adding or removing rows as needed.
- Set a title and axis label. Optional chart title and category axis label, shown above and below the bars.
- Pick vertical or horizontal bars. Horizontal bars often read better with long labels or many categories.
- Download the SVG or copy the markup. Get a standalone .svg file, or copy the raw markup to embed directly in your own page.
Why use this tool
No new dependency
Bars are computed and rendered as plain SVG rect/text elements - no charting library was added to the project.
Accessible by default
A plain HTML data table alongside the chart gives screen reader and keyboard users the same data as the visual bars.
Safe with arbitrary label text
Labels are escaped before being placed into the SVG, so pasted text can never inject markup.
Clear zero-baseline handling
Negative or invalid values are flagged and treated as zero rather than silently producing a misleading chart.
Frequently asked questions
It's flagged with a clear warning above the chart and treated as zero in the rendered bars and the accessible data table's corresponding value, since a standard bar chart from a zero baseline has no widely-understood way to represent a bar going below its own baseline without misleading the reader.
An SVG chart alone isn't reliably readable by screen readers or navigable by keyboard, so the same label/value pairs are also rendered as a plain HTML table, giving every visitor full access to the underlying data regardless of how they browse.
No - bar positions and sizes are computed directly from your data and rendered as plain SVG rect and text elements, with no new charting dependency added to the project.