Line Chart

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default
`label`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	-
`categories`	`readonly (LocalizedMessage \| DisplayValue)[]`	required
`series`	`readonly LineChartSeries[]`	required
`sparkline`	`boolean`	`false`
`curve`	`LineChartCurve`	`Monotone`
`beginAtZero`	`boolean`	`true`
`showValueAxis`	`boolean`	`false`
`palette`	`ChartPalette \| readonly string[]`	`Categorical`
`showLegend`	`boolean`	`false`
`legendPosition`	`ChartLegendPosition`	`Top`
`hiddenSeries`	`readonly number[]` (controlled)	-
`defaultHiddenSeries`	`readonly number[]`	`[]`
`onHiddenSeriesChange`	`(hiddenSeries, details) => void`	-
`showTooltip`	`boolean`	`true`
`formatTooltipTitle`	`(index, category) => LocalizedMessage \| DisplayValue`	the category
`formatTooltipRow`	`(row: LineChartTooltipRow) => LocalizedMessage \| DisplayValue`	name and value
`formatValue`	`(value: number) => LocalizedMessage \| DisplayValue`	locale decimal format
`locale`	`string`	runtime locale
`onSelect`	`(selection: LineChartSelection) => void`	read-only
`className`, `id`, `ref`	root `div`	-

LineChart forwards data-* attributes to the root. It takes no style, role, children or other event handler.

LineChartSeries

Field	Type	Default
`name`	`LocalizedMessage \| DisplayValue`	required
`values`	`readonly number[]`	required
`color`	CSS color or bare custom property name	palette color for the position
`dashed`	`boolean`	`false`
`fill`	`boolean`	`true` for a one-series chart, else `false`

LineChartSelection and LineChartTooltipRow

LineChartSelection is { datasetIndex, index }. LineChartTooltipRow adds value, formattedValue and dataset.

Exports

LineChart, LineChartCurve, ChartLegendPosition, ChartPalette and the types LineChartProps, LineChartSeries, LineChartSelection, LineChartTooltipRow, ChartColor, ChartText and ChartPaletteInput, from @prepared911/ui/line-chart. The root barrel exports the same names.

Props

Name	Type	Default	Description
`categories`	`readonly ChartText[]`	—	Category labels, given once. Every series has one value per category. The labels show on the horizontal axis, and thin out when they would collide.
`label`	`LocalizedMessage`	—	Accessible name of the chart. It names the plot and captions the data table that assistive technology reads. The chart paints no heading; render one beside it if the screen needs one.
`series`	`readonly LineChartSeries[]`	—	The lines, in the order callbacks report as `datasetIndex`.
`beginAtZero`	`boolean`	—	Includes zero on the value axis. Defaults to `true`.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`curve`	`LineChartCurve`	—	How lines run between points. Defaults to {@link LineChartCurve.Monotone}.
`defaultHiddenSeries`	`readonly number[]`	—	Initial hidden series positions when uncontrolled.
`description`	`LocalizedMessage`	—	Longer description of the chart, read after its name: what it shows, or how to explore it with a keyboard.
`formatTooltipRow`	`((row: LineChartTooltipRow) => ChartText)`	—	Formats one tooltip row, the whole text beside the series swatch. Defaults to the series name and the formatted value.
`formatTooltipTitle`	`((index: number, category: ChartText) => ChartText)`	—	Formats the tooltip heading from the category position and its label. Defaults to the category label.
`formatValue`	`((value: number) => ChartText)`	—	Formats a value for axis ticks, end labels, tooltip rows and the data table. Defaults to the runtime locale's decimal format. Return `toDisplayValue(...)` for data, or a `LocalizedMessage` when the text carries a unit word.
`hiddenSeries`	`readonly number[]`	—	Controlled list of hidden series positions. Pair with `onHiddenSeriesChange`.
`id`	`string`	—	Id of the root element.
`legendPosition`	`ChartLegendPosition`	—	Legend edge. Defaults to {@link ChartLegendPosition.Top}.
`locale`	`string`	—	BCP 47 locale for the default value format. Defaults to the runtime locale.
`onHiddenSeriesChange`	`((hiddenSeries: readonly number[], details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next list of hidden series positions when a legend entry is pressed, before it applies. `details.cancel()` keeps the current list.
`onSelect`	`((selection: LineChartSelection) => void)`	—	Called when a series is selected: its active marker is clicked, or Enter or Space is pressed on the keyboard cursor. A click on the plot away from a marker selects nothing. Pass `undefined` to make the chart read-only.
`palette`	`ChartPaletteInput`	—	Series colors. Defaults to {@link ChartPalette.Categorical}. After the last color the order repeats.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showLegend`	`boolean`	—	Paints a legend whose entries are buttons that show or hide a series or slice. Defaults to `false`.
`showTooltip`	`boolean`	—	Shows the tooltip on hover and keyboard focus. Defaults to `true`.
`showValueAxis`	`boolean`	—	Paints value axis tick labels and gridline labels beside the plot. Defaults to `false`.
`sparkline`	`boolean`	—	Draws only the lines and their areas, for a small decorative trend such as the MetricCard `sparkline` slot: no axes, legend, tooltip, markers, keyboard stop or data table, and the chart is one image named by `label`. It ignores `showLegend`, `showValueAxis`, `showTooltip`, `onSelect`, `description` and the formatters. Defaults to `false`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Line Chart / Usage

Line Chart / Accessibility

On this page

LineChartSeries

LineChartSelection and LineChartTooltipRow

Exports

Props

Storybook

Line Chart

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default
`label`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	-
`categories`	`readonly (LocalizedMessage \| DisplayValue)[]`	required
`series`	`readonly LineChartSeries[]`	required
`sparkline`	`boolean`	`false`
`curve`	`LineChartCurve`	`Monotone`
`beginAtZero`	`boolean`	`true`
`showValueAxis`	`boolean`	`false`
`palette`	`ChartPalette \| readonly string[]`	`Categorical`
`showLegend`	`boolean`	`false`
`legendPosition`	`ChartLegendPosition`	`Top`
`hiddenSeries`	`readonly number[]` (controlled)	-
`defaultHiddenSeries`	`readonly number[]`	`[]`
`onHiddenSeriesChange`	`(hiddenSeries, details) => void`	-
`showTooltip`	`boolean`	`true`
`formatTooltipTitle`	`(index, category) => LocalizedMessage \| DisplayValue`	the category
`formatTooltipRow`	`(row: LineChartTooltipRow) => LocalizedMessage \| DisplayValue`	name and value
`formatValue`	`(value: number) => LocalizedMessage \| DisplayValue`	locale decimal format
`locale`	`string`	runtime locale
`onSelect`	`(selection: LineChartSelection) => void`	read-only
`className`, `id`, `ref`	root `div`	-

LineChart forwards data-* attributes to the root. It takes no style, role, children or other event handler.

LineChartSeries

Field	Type	Default
`name`	`LocalizedMessage \| DisplayValue`	required
`values`	`readonly number[]`	required
`color`	CSS color or bare custom property name	palette color for the position
`dashed`	`boolean`	`false`
`fill`	`boolean`	`true` for a one-series chart, else `false`

LineChartSelection and LineChartTooltipRow

LineChartSelection is { datasetIndex, index }. LineChartTooltipRow adds value, formattedValue and dataset.

Exports

Props

Name	Type	Default	Description
`categories`	`readonly ChartText[]`	—	Category labels, given once. Every series has one value per category. The labels show on the horizontal axis, and thin out when they would collide.
`label`	`LocalizedMessage`	—	Accessible name of the chart. It names the plot and captions the data table that assistive technology reads. The chart paints no heading; render one beside it if the screen needs one.
`series`	`readonly LineChartSeries[]`	—	The lines, in the order callbacks report as `datasetIndex`.
`beginAtZero`	`boolean`	—	Includes zero on the value axis. Defaults to `true`.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`curve`	`LineChartCurve`	—	How lines run between points. Defaults to {@link LineChartCurve.Monotone}.
`defaultHiddenSeries`	`readonly number[]`	—	Initial hidden series positions when uncontrolled.
`description`	`LocalizedMessage`	—	Longer description of the chart, read after its name: what it shows, or how to explore it with a keyboard.
`formatTooltipRow`	`((row: LineChartTooltipRow) => ChartText)`	—	Formats one tooltip row, the whole text beside the series swatch. Defaults to the series name and the formatted value.
`formatTooltipTitle`	`((index: number, category: ChartText) => ChartText)`	—	Formats the tooltip heading from the category position and its label. Defaults to the category label.
`formatValue`	`((value: number) => ChartText)`	—	Formats a value for axis ticks, end labels, tooltip rows and the data table. Defaults to the runtime locale's decimal format. Return `toDisplayValue(...)` for data, or a `LocalizedMessage` when the text carries a unit word.
`hiddenSeries`	`readonly number[]`	—	Controlled list of hidden series positions. Pair with `onHiddenSeriesChange`.
`id`	`string`	—	Id of the root element.
`legendPosition`	`ChartLegendPosition`	—	Legend edge. Defaults to {@link ChartLegendPosition.Top}.
`locale`	`string`	—	BCP 47 locale for the default value format. Defaults to the runtime locale.
`onHiddenSeriesChange`	`((hiddenSeries: readonly number[], details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next list of hidden series positions when a legend entry is pressed, before it applies. `details.cancel()` keeps the current list.
`onSelect`	`((selection: LineChartSelection) => void)`	—	Called when a series is selected: its active marker is clicked, or Enter or Space is pressed on the keyboard cursor. A click on the plot away from a marker selects nothing. Pass `undefined` to make the chart read-only.
`palette`	`ChartPaletteInput`	—	Series colors. Defaults to {@link ChartPalette.Categorical}. After the last color the order repeats.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showLegend`	`boolean`	—	Paints a legend whose entries are buttons that show or hide a series or slice. Defaults to `false`.
`showTooltip`	`boolean`	—	Shows the tooltip on hover and keyboard focus. Defaults to `true`.
`showValueAxis`	`boolean`	—	Paints value axis tick labels and gridline labels beside the plot. Defaults to `false`.
`sparkline`	`boolean`	—	Draws only the lines and their areas, for a small decorative trend such as the MetricCard `sparkline` slot: no axes, legend, tooltip, markers, keyboard stop or data table, and the chart is one image named by `label`. It ignores `showLegend`, `showValueAxis`, `showTooltip`, `onSelect`, `description` and the formatters. Defaults to `false`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Line Chart / Usage

Line Chart / Accessibility

On this page

LineChartSeries

LineChartSelection and LineChartTooltipRow

Exports

Props

Storybook