Skip to main content

BarChart

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Bar chart with pattern fills. Supports both vertical and horizontal layouts via the direction prop. Uses patterns instead of colors to differentiate data series. The bars stretch to fill the chart's box while their labels, values and patterns keep their size. A value below zero draws no bar.

Import​

import { BarChart } from "~lib/charts/bar-chart";

Props​

NameTypeRequiredDefaultDescription
data{ label: string; value: number; target?: number; pattern?: PatternType }[]YesN/ABar data
maxnumberNoTallest bar or targetTop of the scale
showValuesbooleanNofalseShow values on bars
formatValue"compact" | (value: number) => stringNoPlain numberHow the shown values are written
direction"vertical" | "horizontal"No"vertical"Bar layout direction
widthnumber | stringNo300Chart width
heightnumber | stringNo300Chart height

PatternType: "solid" | "diagonal" | "dots" | "crosshatch" — cycles automatically if not specified.

Examples​

Simple​

Open Simple in Storybook

With Values​

Open With Values in Storybook

Formatting Values​

Give the chart your real figures and let formatValue write them short. "compact" turns big counts into "213M", "8.7M" or "45K", so a chart of views or followers stays readable at any size and you do not have to scale the numbers down yourself.

<BarChart
  data={views}
  direction="horizontal"
  showValues
  formatValue="compact"
/>
Open Compact Values in Storybook

For anything else, such as a unit, a currency or another language's abbreviations, pass a function that turns a value into the text to show:

<BarChart data={usage} showValues formatValue={(value) => `${value} kWh`} />
Open Formatted Values in Storybook

Fixed Scale​

Set max when your values sit on a known scale, such as an air quality index from 1 to 5. Each bar then shows its share of that scale, so five days at the same index read as the same height instead of five full bars. Values above max draw as full bars.

Open Fixed Scale in Storybook

Targets​

Give a bar a target to read it against a ceiling of its own, such as what was budgeted for a category or a daily step goal. The target is drawn as an empty outline behind the bar, reaching as far as the target, so the bar fills it toward the target. A bar past its target covers the outline. The value label shows the bar's value, set past the outline where the target reaches further, so it never crosses it. Targets count toward the top of the scale unless max is set; a target above max reaches the end of the scale.

<BarChart
  data={categories.map((category) => ({
    label: category.name,
    value: category.spent,
    target: category.budgeted,
  }))}
  direction="horizontal"
  showValues
/>
Open Targets in Storybook
Open Upright Targets in Storybook

With Patterns​

Shows all available pattern types for data differentiation:

Open With Patterns in Storybook

Horizontal​

Open Horizontal in Storybook

Horizontal With Values​

Open Horizontal With Values in Storybook

Horizontal With Patterns​

Open Horizontal With Patterns in Storybook

See Also​