Chart
Recharts wrapper with semantic token support. Area, Line, Bar, and Pie — all reading from ChartConfig.
@/components/ui/chartArea + Line — ticket volume trend
Stacked area
Open, Closed, Blocked per month
Line chart
Trend comparison without fill
Bar — priority distribution
Vertical bars
Ticket count by priority
Horizontal bars
Rotated axis for long labels
Pie + Donut — status breakdown
Pie chart
Ticket distribution by status
Donut chart
Same data with inner radius
Chart type — when to use
| Type | Use for | Recharts primitives |
|---|---|---|
| Area | Volume trends over time (tickets created, closed) | AreaChart + Area |
| Line | Comparison trends without fill — cleaner for 3+ series | LineChart + Line |
| Bar (V) | Counts by category (priority, department) | BarChart + Bar |
| Bar (H) | Long category names, ranking order (use layout='vertical') | BarChart layout='vertical' |
| Pie | Part-of-whole — status breakdown, category share | PieChart + Pie |
| Donut | Same as Pie but with space for a center KPI number | PieChart + Pie innerRadius |
Chart color tokens
--chart-1var(--chart-1)--chart-2var(--chart-2)--chart-3var(--chart-3)--chart-4var(--chart-4)--chart-5var(--chart-5)Always reference chart colors via CSS variables (var(--chart-N)) — never hardcode. Both light and dark values are defined in globals.css.
Sub-components
| Component | Role |
|---|---|
| ChartContainer | Root wrapper — binds ChartConfig and sets CSS color variables for Recharts |
| ChartTooltip | Recharts Tooltip wrapper — must pass content={<ChartTooltipContent />} |
| ChartTooltipContent | Styled tooltip panel — reads config for labels and colors |
| ChartLegend | Recharts Legend wrapper — must pass content={<ChartLegendContent />} |
| ChartLegendContent | Styled legend row — nameKey prop matches the config key to label display |
ChartConfig maps your data keys to display labels and colors. The config is read by ChartTooltipContent and ChartLegendContent to render styled labels automatically.
On this page