Chart

Data display · src/components/Chart/Chart.tsx

A bar or line chart that says what it does not know.

Square corners, butt caps, hairline rules rather than a grid - the brand's chart marks are three of the surfaces that are square by rule.

Four honesty behaviours, and they are the reason this component exists rather than a charting library:

A gap is drawn as a gap. A missing point breaks the line into separate paths and draws no bar, and the count of missing points is printed under the chart. Interpolating across a gap draws data nobody measured.

Estimates get the brand's 40° hatch, not a second hue. An estimate is the same series in a different state; a different colour makes it read as a different thing being measured.

The measurement date and the exclusions are printed, not left to a caption somebody forgets to write.

The figures are always available as a real table behind one button. A chart is an image to a screen reader and a summary to everyone else, so the numbers have to be reachable without it.

Import

import { Chart } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
kind	'bar' | 'line'
series	ChartSeries[]
labels	string[]
title	React.ReactNode
alt	string	Accessible name when the title is not enough on its own.
height	number
max	number
locale	string
format	(v: number) => string
measuredAt	string	When the data was measured. Printed under the plot.
missingNote	string	Why points are missing. Printed with the count.
excluded	string	What the chart leaves out. Printed under the plot.
labelHeader	React.ReactNode
tableLabel	React.ReactNode
hideTableLabel	React.ReactNode
className	string

Exported types

ChartSeries