Line Chart
ProData points connected by lines, rendered as SVG, for showing trends over continuous intervals like time. Supports multiple series with distinct colours and stroke patterns. Optional data point markers, tooltips on hover, and a grid background. Multi-series lines use both colour and dash patterns for accessibility.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | ||
| Multi-line | ||
| With Area |
Usage Guidelines
Use consistent time intervals on the x-axis.
Plot more than 5 lines on a single chart — it becomes a tangle.
Add data point markers to make individual values identifiable.
Use line charts for categorical data without a natural order — use Bar Chart.
Pair colour with dash patterns (solid, dashed, dotted) for multi-series.
Omit axis labels or units — context is essential for interpretation.
Include a hidden data table as a screen reader fallback.
Interpolate between sparse data points without indicating gaps.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label describing the chart's purpose.
- Provide aria-describedby linking to a text summary of the trend.
- Include a hidden data table with the full dataset for screen readers.
- Multi-series lines must use dash patterns in addition to colour.
- Interactive data point markers should be focusable with visible tooltips.