Bar Graph Maker

Compare categories with a bar graph

Bar graphs are the workhorse of data visualization. Because people judge the length of bars that share a common baseline very accurately, a bar chart is the clearest way to compare quantities across categories: sales per region, survey answers, votes per option or programming-language popularity. This bar graph maker draws vertical bars (a column chart) and handles one or many series.

Data formats the chart maker accepts

Paste data, or open a CSV, TSV, TXT or JSON file. The first column holds the labels and every further column is a data series. A header row is detected automatically and used for series names; commas, tabs, semicolons and pipes all work as separators, and values such as $1,200 or 45% are read as numbers. In comma-separated data a thousands comma would split the cell in two, so quote such a value ("$1,200") or separate the columns with tabs, semicolons or pipes; with semicolons, a decimal comma such as 1,5 is understood as well.

Language,2024,2025
JavaScript,62,64
Python,51,55
TypeScript,38,44
Java,30,29
Go,13,15

JSON works too, in any of these shapes:

[{"month": "Jan", "visitors": 4200}, {"month": "Feb", "visitors": 4800}]
[["Jan", 4200], ["Feb", 4800]]
{"Jan": 4200, "Feb": 4800}
{"labels": ["Jan", "Feb"], "datasets": [{"label": "Visitors", "data": [4200, 4800]}]}

The last form is the Chart.js data structure, so data from an existing Chart.js configuration can be pasted as is. Lines starting with # or // are ignored as comments.

With two value columns, each category gets a pair of side-by-side bars, one per year, and a legend explains the colors. Headers that look like years, such as 2024 and 2025, are recognized as series names rather than data.

Bar graph maker options explained

• Title and axis labels – describe what is measured and in which unit, for example "Revenue (USD)".
• Colors – a comma-separated list of CSS colors such as #2563eb, #f59e0b, teal. They are applied to the series in order; leave the field empty for the built-in palette, which is designed to keep neighboring colors distinguishable.
• Width and height – the size of the SVG in pixels (240–4000 wide, 180–4000 high).
• Legend – show or hide the list of series names.

• Show values – prints each bar's value above it (or below it for negative values) when the bars are wide enough for the text.
• Colors for a single series – if your data has only one value column and you enter several colors, each bar gets its own color from the list. With multiple series, colors identify the series.

Negative values

Values below zero are drawn downward from a zero baseline, which makes the chart suitable for profit and loss, temperature anomalies or year-over-year changes. The y-axis always includes zero, because bars that do not start at zero distort the comparison of lengths.

Bar graph best practices

• Sort meaningfully. Order categories by value (largest first) unless they have a natural order such as months or age groups. You can sort your rows beforehand with sort text lines.
• Keep labels short. Abbreviate long category names; overlapping labels are thinned out automatically.
• Limit series. Two or three grouped series are easy to read; beyond that, consider separate charts.
• Bars vs lines. For values over many time points, a line graph shows the trend better. For parts of a whole, a pie chart may fit, as long as there are only a few slices.

Export as SVG

The chart is a standalone SVG file. SVG is a vector format, so it stays perfectly sharp at any zoom level and in print, and it can be embedded directly in web pages, opened in Illustrator, Inkscape or Figma for further styling, and inserted into recent versions of Word, PowerPoint and Google Slides. Hovering over data points in the preview shows exact values, and these tooltips remain in the downloaded file when it is opened in a browser. If a platform only accepts PNG or JPG, open the SVG in a browser or an editor and export or screenshot it at the size you need.

Charts are drawn as SVG by JavaScript in your browser without any chart library or server; your data is never uploaded.