Nooxit
Charts

Charts

Two chart libraries on one palette.

LibraryBuilt onReach for it when
shadcn default chartsRecharts, Chart and CardA standard area, bar, line, pie, radar or radial chart in a card, copied as one file
Bklit chartsvisx and MotionAnimated 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 in primary. That is warm black in light mode and off-white in dark mode, not orange.
  • Two or more series use chart-1 to chart-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-50 to orange-500 in light mode and orange-950 to orange-500 in dark mode. Bklit's heatmap reads it as --chart-scale-01 to --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.

On this page