Skip to content
Tattva

BarChart

Stable

Bars that compare amounts. Highlight one bar, or stack up to four parts.

Also known as bar graph, column chart, histogram, stacked bar

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

One bar stands out

One bar is the point, so it gets the main color and the rest are grey. Numbers sit at the ends of the bars.

UsageCodeDesignAccessibility

When to use it

Compares amounts with bars that always start at zero. One bar can be highlighted while the rest stay grey, so the bar that tells the story stands out.

Made of: Key (stacked) · Number scale · Category names · Bars · Number labels · Pop-up

Use it for

  • Comparing amounts across categories, such as shops or months.
  • Pointing at one category: set highlight.
  • Showing what an amount is made of, with up to four stacked parts.

Not for

  • Change over time across many points: use LineChart.
  • A single number: use StatTile.
  • A best guess with a range: use DotPlot.

Do and avoid

Orders per day

Orders, Mon to Thu

Do. Bars from zero, one highlighted, so the busiest day stands out.

Orders on Thursday

Orders

Avoid. One bar compares nothing. A single number says it better.

Do

  • Start every bar at zero. Never cut the scale.
  • Highlight a bar when it is the story, and leave the rest grey.
  • Lay bars sideways for long names or more than a handful of bars.
  • Keep stacks to four parts, and list the key in the same order as the stack.

Avoid

  • Don't give every bar its own color. One set of bars takes one color.
  • Don't draw a chart with one bar. Use a StatTile.
  • Don't squeeze numbers inside bars that are too small. They sit at the bar end, and the table has them all.
  • Don't use a pie or donut to show parts of a whole. Use a stacked bar.

On a phone

  • The chart measures its container and redraws at that width. Long category labels are shortened with an ellipsis to fit.
  • Touch or drag on a bar to show the tooltip. Vertical swipes still scroll the page, and the tooltip stays until you tap elsewhere.
  • Horizontal bars suit a phone best, because labels have room to the left and the chart grows downward.

Seen in products

  • The UK Analysis Function checklist says bar axes start at zero and are never broken, and that legend order matches chart order.
  • Mailchimp and GitLab Pajamas discourage pie charts, and Mailchimp recommends a percent bar, reported in the Supernova roundup.
  • Datawrapper lists a brand strategy of using the brand color for the one emphasized category with neutrals for the rest.
  • WCAG 1.4.11 asks for 3:1 for graphic parts needed to understand the content and exempts parts whose information is also given in visible text labels or values.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started