Data visualization
Charts help coaches see progress: completed workouts, revenue, check-in rates. Each theme has a five-color chart palette, --chart-1 to --chart-5, so the same chart code follows the product it runs in.
Palette
Each color's contrast against the background is computed for both themes. Chart marks are graphics, so they need 3:1 (WCAG 1.4.11).
| Token | SuperCoach | Coach |
|---|---|---|
--chart-1 | brand-600 · 7.40:1 Pass | orange-500 · 2.80:1 Below 3:1 |
--chart-2 | lime-600 · 3.05:1 Pass | green-700 · 5.02:1 Pass |
--chart-3 | navy-900 · 12.25:1 Pass | orange-400 · 2.35:1 Below 3:1 |
--chart-4 | sand · 1.64:1 Below 3:1 | sand · 1.64:1 Below 3:1 |
--chart-5 | maroon · 10.17:1 Pass | maroon · 10.17:1 Pass |
The colors below 3:1 can't be the only way to tell series apart. Use them with direct labels, a legend with text, or a data table.
Example
The same chart follows the theme switch in the header. Open the data table under it: every chart needs a text alternative.
- Strength
- Hypertrophy
- Fat loss
- Mobility
- Endurance
Show data table
| Program | Week 1 | Week 2 | Week 3 | Week 4 |
|---|---|---|---|---|
| Strength | 42 | 48 | 51 | 55 |
| Hypertrophy | 36 | 39 | 37 | 44 |
| Fat loss | 58 | 61 | 57 | 63 |
| Mobility | 18 | 22 | 25 | 24 |
| Endurance | 27 | 25 | 30 | 33 |
Anatomy
- Title says what is measured and over what period: "Completed workouts per week, by program type".
- Legend with text labels, above the chart, in series order.
- Axes: a zero baseline for bars, light gridlines in
border, axis labels inmuted-foregroundattext-xs. - Marks in palette order:
chart-1for the most important series. - Data table or summary sentence as the text alternative.
Rules
- At most five series. Group the rest as "Other".
- Don't use status colors (
success,destructive) for series. Keep them for good and bad. - Time runs left to right, in RTL too; labels and the legend follow the page direction.
- Don't animate charts on every data load. A single fade-in is enough.
Related: Color, Accessibility.