Zum Hauptinhalt springen

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​

Simple in Storybook öffnen

With Values​

With Values in Storybook öffnen

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"
/>
Compact Values in Storybook öffnen

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`} />
Formatted Values in Storybook öffnen

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.

Fixed Scale in Storybook öffnen

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
/>
Targets in Storybook öffnen
Upright Targets in Storybook öffnen

With Patterns​

Shows all available pattern types for data differentiation:

With Patterns in Storybook öffnen

Horizontal​

Horizontal in Storybook öffnen

Horizontal With Values​

Horizontal With Values in Storybook öffnen

Horizontal With Patterns​

Horizontal With Patterns in Storybook öffnen

See Also​