KPI
KPI cards with the change on the last period, progress to a target, and bar, line and area charts.
A KPI card puts one headline number first, with what it means next to it: the change on the previous period, the target it's working towards or the shape of the week behind it. Changes come from the value and the previous value, in percent or in percentage points for rates, and keep their arrow and sign so colour never carries them alone. Use goodDirection for metrics like churn, where a drop is good. Values count up once in view, and screen readers get the final value. Numbers use named formats in en-US, so the server and the browser render the same, and every chart has a text alternative.
Headline
A value with its change and what it's compared with.
Change Badge
A value with its change as a badge beside the label.
Previous Value
A rate with its previous value underneath and the change in percentage points.
Target Pace
Progress to a monthly target, with a tick where an even pace would be by today and the total you're on pace for.
Day 18 of 30. On pace for $145,833, below target. The tick marks an even pace.
Status Breakdown
The share of work done, with a bar for each status.
- Done51 (59%)
- In progress26 (30%)
- Not started10 (11%)
Goal Ring
A count against a goal as a ring, with how many are left to go.
2,500 sales to go
Bar Chart
The week's total with a bar for each day and the change on the week before.
Actual vs Goal
Each day's value next to its goal, with the share of the goal reached and how many days met it.
Goal $33,800 · met on 2 of 7 days
Line Chart
This week against the same days last week, drawn as a solid and a dashed line.
Area Chart
Gross profit with its margin, and revenue and profit by day as stacked areas.
28.4% margin on $36,300 revenue
Background Chart
A total with an area chart behind it, for a hero card at the top of a dashboard.