CodesBeautify

Bar Graph Maker

Paste label and value rows, pick vertical or horizontal bars, and download the graph as a scalable SVG.

Data (CSV or JSON)
Bar graph
Runs locally in your browser

About the Bar Graph Maker

Every row you paste becomes one bar. The first column supplies the category name and each remaining numeric column becomes a separate series, so Month,Plan A,Plan B draws two bars side by side under each month. A header line is detected automatically when the columns after the first hold words instead of numbers, and those words become the legend entries. JSON works too: an array of {"label": "Europe", "value": 36150} objects, an array of [label, value] pairs, or a flat object of names to numbers.

The vertical axis is rounded to friendly steps such as 0, 10k, 20k rather than the exact data range, and it always includes zero so bar lengths stay proportional. Negative numbers are drawn below the baseline, which makes profit and loss data readable without extra setup. When category names are too long to fit side by side, the labels tilt instead of overlapping, and switching to horizontal bars puts long names on the left where there is room for them. Turning on stacking sums each row into a single bar, useful when the parts add up to a meaningful total.

The result is plain SVG markup, so Copy gives you the markup to paste into a page and Download saves chart.svg at any size without blurring. Ranked data with many categories often reads better as a horizontal bar list; proportions of one whole belong in the Pie Chart Maker. If your numbers still live in a spreadsheet, run them through Excel to CSV first.

How to use

  1. Paste one label,value row per line, or drop in JSON. A header row is optional.
  2. Choose vertical or horizontal bars and an order for the categories.
  3. Add extra numeric columns for a grouped graph, and tick Stack series if the parts form a total.
  4. Click Download to save chart.svg, or Copy to grab the SVG markup.

Common questions

How many bars can I chart?
Up to 400 rows. Beyond roughly 40 the bars get thin, so trimming to the top values usually reads better.
Can I make a grouped bar graph?
Yes. Add a third, fourth or fifth numeric column and each one is drawn as its own bar within the category, with a legend built from the header row.
Does it handle negative numbers?
It does. The baseline sits at zero and negative bars extend the other way.
What file do I get when I download?
A single chart.svg file. SVG stays sharp at any size and opens in Figma, Illustrator, Inkscape and every browser.