Home

Bar chart

Amounts as columns from one baseline: one series, several side by side, or stacked as the parts of each period.

ui.bar-chartcomponents/ui/bar-chart.tsx

Use case

For the AI

Use it for amounts per category or per period: orders per day by status (stacked), sales per month, hours per employee, invoices per week paid and unpaid. Columns are at most 24px wide with a rounded top, 2px of surface between touching marks, the tallest labelled at its cap. Each column's whole band answers the pointer and the keyboard with every value and the total. When the data changes the columns glide; the first time they grow from the baseline (chart-card.stacked).

Use it when

  • An amount per day, week or month
  • The parts of each period (stacked)
  • A handful of categories compared side by side

Use something else when

Examples

  • Ready
  • In production
  • Late

Code

Import

import { BarChart } from "@/components/ui/bar-chart"
import { ChartLegend, SERIES } from "@/components/ui/chart"

Usage

const series = [
  { key: "ready", name: "Prêtes", color: SERIES[2] },
  { key: "making", name: "En production", color: SERIES[0] },
  { key: "late", name: "En retard", color: SERIES[1] },
]

<ChartLegend items={series.map((s) => ({ label: s.name, color: s.color }))} />
<BarChart data={days} index="label" series={series} stacked aria-label="Commandes par état" />

Rules

  • Stack only parts that add up to a meaningful total; otherwise put them side by side (stacked={false}).
  • Give a series its colour by what it is when the order of the stack is not the order of meaning (late is the warm orange whatever its place).
  • Three series at most stacked; more is a table.
  • Colours come from the series order (SERIES in components/ui/chart.tsx: blue, orange, aqua, yellow, magenta), never chosen by hand; a sixth series folds into Other. Colour follows what a series is, so the same series keeps its colour when a filter removes another.
  • Words and numbers stay in the text inks; a short key beside them carries the colour. Never colour a label with its series.
  • Every value shown on hover is also reachable without it: a label, the legend with values, or the card's table view (ChartTable).