LineChart
A line chart for visualising trends over time, supporting multiple series.
Installation
npx dafink-ui add line-chartRequires: recharts
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | ChartDataPoint[] | - | Array of data objects. |
| xKey | string | - | Key in each data object to use as the x-axis label. |
| series | ChartSeries[] | - | Lines to render. Each entry has key, label, and optional color. |
| height | number | 240 | Chart height in px. |
| showLegend | boolean | true | Whether to show the legend. |
| showGrid | boolean | true | Whether to show the background grid. |
| className | string | "" | Extra classes applied to the container. |
Accessibility
LineChart's SVG root is focusable through Recharts' accessibility layer (enabled by default here): Tab moves focus onto the chart, then ArrowLeft/ArrowRight step through the x-axis's data points to move a shared tooltip between each line's dots, and Enter pins the active tooltip in place. The wrapping div carries role="img" and aria-label="Line chart" for its own accessible name. Hovering a point shows the same tooltip via the mouse; the legend renders static labels only and is not clickable to hide a line.