Data (one "label, value" per line)

Ad

Live Chart

Ad

Which Chart Type Fits Your Data?

QuestionUseWhy
Compare categories?Bar chartLength is the easiest quantity to judge
Show change over time?Line chartPosition along a continuous axis encodes trend
Parts of one whole?Stacked bar (or pie, sparingly)Segments sum to 100% of one total
Distribution shape?HistogramBars, but the x-axis is binned numbers
Correlation of two measures?Scatter plotPoints show the relationship, not totals

How the Bar Chart Maker Works

Paste your data as label-value pairs, one per line, and the chart renders instantly with value labels on every bar, a zero-based axis, and light gridlines. Sorting, orientation, color, and the title are one click each. The download is an SVG, so it stays sharp when you drop it into a slide, doc, or website.

How to use it

Keep labels short enough to read at a glance, and prefer five to ten bars; past a dozen, flip to horizontal and sort descending so the ranking carries the story. Negative values plot below the baseline automatically. If your numbers carry units people know (%, $K), put them in the labels once rather than on every bar.

A worked example

The default data is a regional revenue comparison: five regions, values from $205K to $468K. With input order the chart shows geography; switch to descending and the same data becomes a ranking, West first, Southwest last, with the value labels making the gap between the top two ($56K) obvious at a glance. Same numbers, different question answered.

Bar Chart Rules of Thumb

Most bad bar charts break the same handful of rules. This table is the checklist worth running before any chart leaves your desk:

RuleWhy it matters
Start the value axis at zeroBars encode value by length; a truncated axis changes the lengths and exaggerates differences
Sort by value, not alphabetSorted bars turn a comparison into a ranking the eye can walk down; alphabetical order hides the story
Keep it to 5-10 barsReaders compare neighbors well and distant bars poorly; past a dozen, show top N plus "other"
Label the values on barsRemoves the axis-reading step for the numbers people actually came for
State units once, in the title or axisOne "$K" in the title beats repeating it on every bar; per-bar units multiply visual noise
Use one color, highlight one barA single accent color says "look here"; rainbow palettes suggest categories that don't exist
Go horizontal for long labelsNames stay readable down the left edge instead of rotating into squint territory

The zero-baseline rule deserves its own sentence because it's the one people argue about. There's nothing dishonest about a line chart whose axis starts at 40 โ€” lines encode position. But a bar's job is length, and length only means something when it starts at zero. If zero-based bars make your change look tiny, the honest conclusion is that the change is tiny, and a different chart (or a table) serves you better than a cropped axis.

Why Download as SVG Instead of a Screenshot?

The download button hands you an SVG โ€” a vector file โ€” rather than a picture of the chart. The difference shows up later. A screenshot is a grid of pixels: paste it into a slide and project it, and the labels fuzz. SVG redraws at whatever size the display asks for, so the same file is sharp in a phone mockup, on a conference screen, and in a printed report.

It's also the editable format. The SVG is plain shapes and text โ€” rectangles for bars, text elements for labels โ€” so it opens in Inkscape, Illustrator, and Figma for restyling, and a text editor handles small tweaks like renaming a bar. File size runs a few kilobytes for a typical chart, an order of magnitude smaller than a PNG screenshot of the same panel.

One exception worth knowing: email. Gmail and Outlook strip or mangle embedded SVG, so for an email blast, open the SVG in any editor and export a PNG for that one use. Everywhere else โ€” web pages, decks, docs โ€” the SVG is the better artifact.

Frequently Asked Questions

When should I use a bar chart instead of a line chart?

Use bars when you're comparing categories and a line when you're showing a trend over a continuous sequence, usually time. Months as categories and revenue by region are bar chart work; stock price by minute is line chart work. A quick test: if connecting the points in between your categories would be meaningless, don't use a line.

Should bars be vertical or horizontal?

Vertical is the default and reads fastest for short labels and few categories. Horizontal wins when labels are long or there are many categories, because names stay readable down the left edge instead of getting cramped or rotated under the axis.

Does the y-axis have to start at zero?

Yes, for bar charts. Bars encode value by length, and chopping the axis changes the lengths, exaggerating small differences into dramatic ones. Truncated axes are only defensible on line charts, where position, not length, carries the value. If a zero baseline makes your differences invisible, that's the chart telling you the differences are small.

How many bars are too many?

Around 12 to 15 on one chart before readers stop comparing and start skimming. Past that, sort descending and consider showing only the top N plus an everything-else bar, or split into small multiples. Sorting alone does a lot of work: sorted bars turn a wall of data into a ranking.

How do I compare two data series side by side?

That's a grouped bar chart โ€” two bars per category, in two colors. Keep it to two series per chart; at three the pairs become hard to track. With this single-series tool, the practical route is exporting two SVGs with the same sort order and stacking them, so the categories align vertically.

Can I edit the SVG after downloading it?

Yes. The file is plain SVG โ€” rectangles for bars, text elements for labels โ€” so it opens in Inkscape, Illustrator, and Figma for restyling, and any text editor works for small tweaks. Because it's vector, it stays sharp at any size in print or on screen.