Data visualization
Chart series tokens for Aura charts — accent and status contrast, gray grid and ticks, 250ms motion.
Charts use the same color, type, and motion rules as the rest of Aura. The first family is the area chart, drawn with Recharts and the @aura/chart container.
Series
Five series tokens live on :root in packages/registry/styles/globals.css. They point at colors that already exist, so a theme change retints the chart.
| Token | Points at | Role |
|---|---|---|
--chart-1 | --accent-9 (--primary) | First series, brand |
--chart-2 | --info-contrast | Second series |
--chart-3 | --success-contrast | Third series |
--chart-4 | --warning-contrast | Fourth series |
--chart-5 | --danger-contrast | Fifth series |
Under prefers-color-scheme: dark, --chart-2 through --chart-5 use the lighter status-contrast values (#8cb4ff, #67cf9d, #efe08e, #ff9469) so strokes stay visible on the dark gray canvas. --chart-1 keeps following --accent-9.
A chart config passes those tokens through. The container writes --color-<series> for the plot. Colors that are not a var(--token) are ignored.
Axes, grid, and surface
| Part | Rule |
|---|---|
| Grid | Gray step 6, solid |
| Tick labels | Gray step 11, 13px (text-xs is the utility size; ticks are set at 13px) |
| Tooltip | gray-1 surface, gray step 6 border, rounded-sm. Values use font-mono |
| Plot focus | Accent step 8, 2px outline |
| Card | The area chart sits in Card: gray-2 fill, gray step 6 border, rounded-md |
There is no separate annotation, axis-title, or chart-palette scale beyond these five series.
Motion
ChartArea animates for 250ms with ease-out. prefers-reduced-motion: reduce sets isAnimationActive to false. The chart stylesheet also shortens CSS animation and transitions on the plot.
What is still open
Bar, line, pie, radar, and radial charts are not in the registry yet. @aura/data-grid remains a table, with its own type and spacing rules, and is not this chart system.
Related
- Area chart
- Chart
- Color
- Theming
- Motion
packages/registry/registry/default/components/ui/Chart.tsxpackages/registry/registry/default/styles/chart.css