BarChart

One series over time, such as calls per day. Accent columns, a baseline, first and last labels, every value as text.

DataServer-rendered

Examples

Hover a column for its value. Zero days keep their slot so the time axis stays even.

Light

Calls per day, last 7 days

Dark

Calls per day, last 7 days

Example

Wrap

<BarChart caption="Calls per day, last 7 days" data={days.map((d) => ({ label: d.label, value: d.calls }))} />

Wrap

import { BarChart } from '@switchboard/ui'

<BarChart caption="Calls per hour" captionHidden height={72} data={series} format={formatNumber} />

Every component also takes mix, for css() and mixins applied after its own style.

BarChart props
Prop	Type	Default	Description
data*	{ label: string; value: number }[]	–	Columns, oldest first. Scaled to the largest value; one series only.
caption*	string	–	Names the chart; also the accessible name of the list of bars.
captionHidden	boolean	–	Hide the visible caption when a card header already names the chart.
height	number	–	Plot height in px. Default 96.
format	(value: number) => string	–	Formats values in the hover titles and the text alternative.

Also accepts every <figure> attribute.

The bars are an <ol> named by the caption; each <li> has its label and value as visually hidden text, so screen readers read the series as a list.
Each column also has a title, so pointer users get the value on hover without a script.
Identity is never colour alone: there is one series and its name is the caption.

Pair it with a table of the same numbers when people need to compare exact values.
Keep empty periods so the time axis is even.