Sparkline

Examples

Trend: Upward trend: Sparkline, 8 points. Values from 10 to 86. First 10, last 86.Flat: Flat trend: Sparkline, 8 points. Values from 48 to 52. First 50, last 52.With fill: Growth with area: Sparkline, 6 points. Values from 5 to 45. First 5, last 45.

import { Sparkline } from '@eekodigital/raster';

<Sparkline width={80} data={[10, 25, 18, 40, 35, 60, 72, 86]} color="var(--demo-good)" title="Upward trend" />
<Sparkline width={80} data={[5, 15, 10, 30, 25, 45]} fill color="var(--demo-accent)" title="Growth" />

Accessibility

• The drawing is aria-hidden. A visually hidden text summary carries the information instead of a data table: {title}: Sparkline, 8 points. Values from 10 to 86. First 10, last 86.
• It has no marks to focus, so it adds no tab stops.
• Reword or translate the summary with labels.summary.

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
data	number[]	—	Required. Two or more values.
title	string	—	Required. What the values are. Not displayed; it leads the text summary.
width	number	—	Fixed width in px. Omit to fill the container’s width.
height	number	24	Height in px.
color	string	series 1	Line colour.
fill	boolean	false	Fill below the line.
formatValue	(value: number) => string	Intl.NumberFormat	Formats values in the summary.
labels	Partial<ChartLabels>	English	Summary wording and number locale.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export.
className	string	—