| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Eight series colours independent of the brand; horizontal grid lines only, no axis line or ticks; axis text with tabular figures |
chart-series-1..chart-series-8, color-chart-grid, color-chart-axis |
| Hover |
Yes (mouse) |
A tooltip opens on the popup surface; a band behind the category for bars, a 1 px vertical rule for lines; on a single line the hovered point shows as a dot with a surface ring |
color-surface-raised, color-border-subtle, shadow-popup, color-chart-cursor, color-border-default |
| Loading |
Yes |
A placeholder block; the figure is aria-busy |
- |
| Empty |
Yes |
The text “No data for this period” |
color-text-subtle |
| Values hidden |
Yes |
No axis values; •••• in the tooltip and table |
- |
| Focus |
Table button only |
The 2 px focus ring of the button |
color-focus-ring, border-width-focus |
| Disabled, pressed |
No |
The chart is not an interactive control |
- |
| Property |
Value |
Token |
Height sm |
160 px |
chart-height-sm |
Height md |
240 px |
chart-height-md |
Height lg |
320 px |
chart-height-lg |
| Sparkline height |
32 px (default width 96 px) |
chart-sparkline-height |
| Series count |
8 colours; after eight the colours repeat |
chart-series-1..chart-series-8 |
| Line width |
2 px, smooth curve |
chart-line-width |
| Bar corner |
4 px on the outer end only; in a stack only the top segment, with a 1 px surface line between segments |
chart-bar-radius |
| Area fill |
A vertical fade from 30 % to 2 % of the series colour |
- |
| Donut inner and outer radius |
62 % and 90 % of the area; a 1.5° gap and a 2 px surface edge between slices |
- |
| Bar maximum width |
32 px; 30 % between categories |
- |
| Axis text |
12 px, 8 px from the axis; 4 intervals on the value axis |
body-sm |
| Legend |
At the top start, 8 px squares |
- |
Values follow the selected brand; switch the brand in the top bar. Chart reads these values at run time and passes resolved colours to ECharts instead of var().
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-chart-series-1 | | #0068a5#0068a5#0068a5 | #79c2ff#79c2ff#79c2ff |
--bigbang-chart-series-2 | | #0a9f9a#0a9f9a#0a9f9a | #9edfda#9edfda#9edfda |
--bigbang-chart-series-3 | | #8a5600#8a5600#8a5600 | #c17a00#c17a00#c17a00 |
--bigbang-chart-series-4 | | #9575e2#9575e2#9575e2 | #9575e2#9575e2#9575e2 |
--bigbang-chart-series-5 | | #b34881#b34881#b34881 | #f897c6#f897c6#f897c6 |
--bigbang-chart-series-6 | | #138a50#138a50#138a50 | #2da264#2da264#2da264 |
--bigbang-chart-series-7 | | #e1595b#e1595b#e1595b | #ffbebb#ffbebb#ffbebb |
--bigbang-chart-series-8 | | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 |
--bigbang-chart-height-sm | | 160px160px160px | 160px160px160px |
--bigbang-chart-height-md | | 240px240px240px | 240px240px240px |
--bigbang-chart-height-lg | | 320px320px320px | 320px320px320px |
--bigbang-chart-sparkline-height | | 32px32px32px | 32px32px32px |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-data-positive | | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 |
--bigbang-color-data-negative | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-motion-chart-enter-duration | | 0.4s0.4s0.4s | 0.4s0.4s0.4s |
--bigbang-motion-chart-update-duration | | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
| Interaction |
Motion |
Reduced motion |
| First draw |
Series appear over 400 ms, cubicOut (motion-chart-enter-duration) |
Animation off |
| Data update |
Series change in place over 240 ms; the entrance does not replay (motion-chart-update-duration) |
Animation off |
| Tooltip |
Opens on mouse hover; stays inside the chart box (confine) |
Same |
| Placeholder |
A highlight crosses with motion.skeleton |
Still |
| Table button |
Press feedback with motion.press |
Scale 1 |
Values come from tokens; see Motion for details.