Line chart
Change over an ordered axis, up to five series on one scale.
When to use it
One y-axis, always. Two measures in different units belong in two charts side by side. For readings against time with limits and zoom, use the trend chart.
Quotations sent and accepted
Options
Everything you can pass to Line chart.
| Prop | Type | Default | What it does |
|---|---|---|---|
| categories | string[] | — | The x-axis labels, in order. |
| series | { name, data: (number | null)[], color? }[] | — | Colours default to --chart-1… in order. null is a gap. |
| legend | boolean | 2+ series | HTML legend above the plot. |
| smooth / markers / area | boolean | false | Curve the lines; dots on every point; a 10% wash. |
| height | number | string | — | Plot height. The HTML legend sits outside it. |
| valueFormatter | (value) => string | en-IN, 2 dp | Axis labels, tooltips, value labels and the hidden data table. |
| aria-label | string | — | What the chart shows. Also captions its hidden data table. |
| loading / emptyTitle / emptyDescription | boolean / string | — | Passed to Chart: skeleton, and the empty state when every value is zero. |