LineChart

Basic

Period	Assessed
Week 1	10
Week 2	25
Week 3	40
Week 4	60
Week 5	72
Week 6	86

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

<LineChart
  series={[{ name: 'Assessed', data: [10, 25, 40, 60, 72, 86] }]}
  labels={['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6']}
  aria-label="Assessment progress over time"
/>

Multi-series

Pass multiple series to compare trends. A legend renders automatically.

PassFailN/A

Period	Pass	Fail	N/A
Jan	0	0	0
Feb	5	1	2
Mar	12	3	4
Apr	20	5	7
May	30	6	10
Jun	42	8	12

<LineChart
  series={[
    { name: 'Pass', data: [0, 5, 12, 20, 30, 42], color: 'var(--color-success)' },
    { name: 'Fail', data: [0, 1, 3, 5, 6, 8], color: 'var(--color-danger)' },
    { name: 'N/A', data: [0, 2, 4, 7, 10, 12], color: 'var(--color-inactive)' },
  ]}
  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
  aria-label="Results trend by status"
/>

Area fill

Set area to fill below the line.

Period	Assessed
Week 1	10
Week 2	25
Week 3	40
Week 4	60
Week 5	72
Week 6	86

<LineChart
  series={[{ name: 'Assessed', data: [10, 25, 40, 60, 72, 86] }]}
  labels={['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6']}
  area
  aria-label="Assessment progress (area)"
/>

Accessibility

• SVG has role="img" with aria-label
• Each series is a role="region" with the series name
• Data points are focusable with series name, label, and value announced
• Left/Right arrows navigate within a series; Up/Down switch between series
• A hidden <table> provides the full data for screen readers
• Legend rendered as HTML (not SVG) for proper semantics

Props

Prop	Type	Default	Description
series	LineSeries[]	—	Array of { name, data: number[], color? }
labels	string[]	—	X-axis labels (one per data point)
area	boolean	false	Fill below the line
height	number	200	Chart height in pixels
aria-label	string	—	Required. Describes the chart.
className	string	—