Chart
Recharts-based chart primitives with theme-aware colors, tooltip content, legend content, and Figma-aligned chart token styling.
Figma: DS-shadcn-001 Foundations · Charts 533:8856
Import
Live Demo
Recharts examples using Lumin chart colors, tooltip content, legend content, and Figma reference primitives.
Figma: DS-shadcn-001 Foundations · Charts 533:8856 · Tooltip 523:8354 · Legend 449:7467
Bar chart
Cartesian grid, 8px bar radius, tooltip, and legend.
Line chart
Five-series legend using chart semantic tokens.
Pie chart
Pie slices use the same chart color sequence.
Tooltip reference
2024-07-19
Item 1600kcal
Item 1600kcal
Item 1600kcal
Total600kcal
Legend reference
Item 1
Item 2
Item 3
Item 4
Item 5
Props
| Name | Type | Default | Description |
|---|---|---|---|
| config* | ChartConfig | — | Maps data keys to labels, icons, and chart colors or theme colors |
| indicator | "dot" | "line" | "dashed" | "dot" | Visual indicator style for ChartTooltipContent |
| hideLabel | boolean | false | Hides the tooltip label row |
| hideIcon | boolean | false | Hides configured legend icons in ChartLegendContent |
Examples
Bar Chart
Use ChartContainer with Recharts primitives and chart tokens.
Line Chart
Add ChartLegendContent for Figma-aligned legend swatches.
Pie Chart
Use chart token fills for pie segments.