Charts
Chart legend item
Section titled “Chart legend item”Legend entry; series colours from tokens.
Variants: 3
| Property | Type / options |
|---|---|
| Label | text |
| Series | 1 · 2 · 3 |
Bar chart
Section titled “Bar chart”Grouped bar chart (12 months, 2 series).
Variants: 1
Do
- Start the value axis at zero.
- Use the brand series for the key metric, grey for comparison.
- Add a legend for more than one series.
Don’t
- Don’t use more than four series.
- Don’t use 3D or gradients.
- Don’t hide axis labels.
Line chart
Section titled “Line chart”Line chart (12 months, 2 series).
Variants: 1
Pie chart
Section titled “Pie chart”Pie and donut chart, sizes 160/200/240. Segment colours follow the Brand collection.
Variants: 6
| Property | Type / options |
|---|---|
| Type | Pie · Donut |
| Size | sm · md · lg |
Activity gauge
Section titled “Activity gauge”Concentric progress rings for up to three metrics.
Variants: 3
| Property | Type / options |
|---|---|
| Size | sm · md · lg |
Radar chart
Section titled “Radar chart”Radar chart with 6 axes and two series.
Variants: 1