Charts
Charts
Two chart libraries on one palette.
| Library | Built on | Reach for it when |
|---|---|---|
| shadcn default charts | Recharts, Chart and Card | A standard area, bar, line, pie, radar or radial chart in a card, copied as one file |
| Bklit charts | visx and Motion | Animated charts with richer hover, and the types Recharts lacks: heatmap, funnel, sankey, sunburst, gauge, ring and stat cards |
Both read the same tokens, so a page can mix them.
Color
- One series uses
primary. The Figma kit only draws single-series charts, and it paints them inprimary. That is warm black in light mode and off-white in dark mode, not orange. - Two or more series use
chart-1tochart-5, in this order: orange, green, yellow, blue, lime. Categorical charts use this palette too, such as a pie with one slice per category, or a bar chart that colors positive and negative values differently. These five tokens are proposed rather than taken from Figma (see Chart). Red is not in the palette, so it only ever means destructive. - Sequential scales use the orange ramp, from
orange-50toorange-500in light mode andorange-950toorange-500in dark mode. Bklit's heatmap reads it as--chart-scale-01to--chart-scale-05. - Gradient fills are allowed in charts only. An area may fade to transparent, and Bklit's gauge blends lime into green. Everywhere else the no-gradient rule holds.