Bar Charts Explained
A bar is a number you can compare at a glance. Here's when to use one, the four layouts I actually ship, and the mistakes that make a bar chart lie.
Bar charts explained in one line: a number becomes a length. That's it. People read length faster than they read a pie slice or a 3D column, which is why bars are the default when I have categories and I need to compare them.
Below are the four layouts I actually ship — vertical, horizontal, grouped, stacked — plus the rules that stop a bar chart from lying. If you just need the drawing code with no library, that's the canvas / SVG post.
What a bar chart is
One axis is names. The other axis is amounts. Each bar is one amount. You compare bars to each other, not to some implied circle or slope.
A column chart is a bar chart standing up. Same encoding. I still call both of them bar charts. The interesting choice is orientation, grouping, and whether you stack.
When a bar chart is the right chart
- Use bars when the x-axis is a set of categories: products, countries, weekdays as labels, survey answers.
- Use a line when the x-axis is continuous and the in-between matters — usually time.
- Skip the pie once you have more than a few slices, or when the point is ranking, not “share of a whole.”
If the “categories” are actually a flow, a sankey is clearer. If they're places, start from the map example.
Vertical bars
The default. Short labels, a handful of categories, one series. Hover a bar for the dummy page-view count. Baseline is zero, so Friday being almost twice Monday is something you can see, not something you have to believe.
Preview
Horizontal bars
I flip the chart when the labels are long or I want a ranking to read top to bottom. Same encoding: length is the value. The dummy scores below are “how fast can I get a bar on screen,” not a quality ranking.
Preview
Grouped bars
Two (maybe three) series in the same category, side by side. This is how I compare this year to last year without stacking them into a total nobody asked for. More than three series and the groups turn into a fence. Use small multiples instead.
Preview
Stacked bars
Stacked bars are a composition plus a total. The top of the stack is honest. The middle segments are not — they don't share a baseline, so you cannot compare “direct” across months by eye. I stack when the mix and the total both matter. I group when the comparison is the point.
Preview
Rules that keep it honest
- Start at zero. Truncating a bar axis is how 48 vs 52 becomes a crisis. If the interesting part is a small change over time, that's a line, not a cropped bar.
- Fewer categories than you think. Past ~10 bars, people stop comparing and start scanning for the tallest one. Sort, or split the chart.
- Sort on purpose. Rankings should be sorted. Time and ordinal labels (Mon–Sun, Q1–Q4) should stay in order.
- No 3D, no cones. Depth adds ink and steals length. The encoding is the length. Protect it.
- Label the number if it matters. A tooltip is fine. A tiny value on a tiny bar is not.
Color is a highlighter, not a second value. One series, one fill. Extra hues are for extra series.
How I'd draw one in JavaScript
The whole trick is a scale: value in, pixels out. Find a max, turn each number into a height, park a rectangle. The live charts on this page are that, plus hover. The snippet is the core without a library.
Code
const data = [
{ label: "Mon", value: 12 },
{ label: "Tue", value: 19 },
{ label: "Wed", value: 8 },
{ label: "Thu", value: 15 },
{ label: "Fri", value: 22 },
];
const width = 640;
const height = 240;
const pad = { left: 36, right: 12, top: 16, bottom: 36 };
const innerW = width - pad.left - pad.right;
const innerH = height - pad.top - pad.bottom;
const max = 24;
const slot = innerW / data.length;
const barW = slot * 0.55;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
data.forEach((row, i) => {
const barH = (row.value / max) * innerH;
const x = pad.left + i * slot + (slot - barW) / 2;
const y = pad.top + innerH - barH;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", barW);
rect.setAttribute("height", barH);
rect.setAttribute("rx", "4");
rect.setAttribute("fill", "#e8b84a");
svg.appendChild(rect);
});
document.querySelector("#chart").appendChild(svg);
That's enough for a status page. The moment you want a stacked group, a time axis, and a legend that isn't hand-drawn, install something.
| If you need | I'd use |
|---|---|
| A few bars, static data | SVG, like the snippet |
| Hover, stacked, mixed types | Chart.js |
| The same thing as React components | Recharts (BarChart example) |
| Custom layout, odd shapes | D3 (graph examples) |
Questions I get
What is a bar chart?
A chart that encodes a number as the length of a rectangle. Categories sit on one axis, values on the other. You compare bars by length, not by area or color.
When should I use a bar chart instead of a line chart?
Bars for categories you could shuffle: countries, products, days of week treated as labels. A line is for a continuous sequence where the path between points means something, usually time.
Should a bar chart always start at zero?
Yes if the point is to compare magnitudes. Truncating the axis makes a 12 vs 13 look like a cliff. A line chart can crop the axis; a bar chart usually should not.
What is the difference between grouped and stacked bars?
Grouped bars sit side by side so you can compare series in the same category. Stacked bars add up to a total. Use stacked when the total matters and the parts are a composition. Use grouped when you care about the comparison.
How do I make a bar chart in JavaScript?
Map each value to a height (or width), draw a rectangle per category, label the axis. SVG is enough for a handful of bars. Chart.js, Recharts, or D3 if you need tooltips, stacking, and a time axis.
