Charts
Line, bar, pie, radar and gauge charts for dashboards and reports, with a shared legend item.
In Figma
Section titled “In Figma”From guidelines/components/charts.md
Properties, variants and anatomy of the Figma components.
Line chart
Section titled “Line chart”Line chart (12 months, 2 series).
Variants: 1
Bar chart
Section titled “Bar chart”Grouped bar 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 |
Radar chart
Section titled “Radar chart”Radar chart with 6 axes and two series.
Variants: 1
Activity gauge
Section titled “Activity gauge”Concentric progress rings for up to three metrics.
Variants: 3
| Property | Type / options |
|---|---|
| Size | sm · md · lg |
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 |
Line chart
Section titled “Line chart”Do
- Use for trends over continuous time.
- Label axes with units.
Forbidden
- Never draw categories as a line — use a bar chart.
Bar chart
Section titled “Bar chart”Do
- Start the value axis at zero.
- Use the brand series for the key metric and grey for comparison.
- Add a legend when there is more than one series.
Forbidden
- Never use more than four series.
- Never use 3D or gradients.
- Never hide axis labels.
Pie chart
Section titled “Pie chart”Do
- Use for parts of a whole, with five slices or fewer.
Forbidden
- Never compare values across several pies — use a bar chart.