Chart
Lightweight, responsive SVG charts for dashboards and data summaries. Use the chart family for trends, comparisons, and composition without adding a charting dependency.
Line chart
A highlighted trend with a second semantic series and accessible point labels.
Weekly signups
New accounts over the last seven days
| Signups, Mon | 42 |
|---|---|
| Signups, Tue | 68 |
| Signups, Wed | 54 |
| Signups, Thu | 86 |
| Signups, Fri | 73 |
| Signups, Sat | 92 |
| Signups, Sun | 78 |
| Previous week, Mon | 42 |
| Previous week, Tue | 60 |
| Previous week, Wed | 38 |
| Previous week, Thu | 86 |
| Previous week, Fri | 65 |
| Previous week, Sat | 76 |
| Previous week, Sun | 78 |
Bar chart
Use bars for compact comparisons between categories or periods.
New customers
| Customers, Mon | 42 |
|---|---|
| Customers, Tue | 68 |
| Customers, Wed | 54 |
| Customers, Thu | 86 |
| Customers, Fri | 73 |
| Customers, Sat | 92 |
| Customers, Sun | 78 |
Donut chart
A composition summary with a center total and compact legend.
Team distribution
| Values, Design | 42 |
|---|---|
| Values, Engineering | 56 |
| Values, Operations | 30 |
Loading and empty states
Loading
Empty
Charts use theme tokens, remain responsive inside narrow cards, and include a screen-reader table alternative. Data point marks can receive keyboard focus for readable values.
API reference
Named data series of label/value points, drawn as connected lines.
Render focusable point markers on each line.
Named data series of label/value points, drawn as grouped bars.
Single set of label/value points, drawn as donut segments.
Optional label rendered in the donut center.
Accessible heading and supporting text for every chart.
Show a compact series legend.
Format values in labels and the accessible table.
Show a loading composition or an empty state instead of the graphic.
Additional classes applied to the component root.