Charts
VendorTheme-aware chart components built on recharts + shadcn/ui.
Installation
pnpm add recharts npx shadcn@latest add chart
Usage
import { AreaChart, BarChart, LineChart, PieChart } from "@/components/vendor/charts"
import type { ChartConfig } from "@/components/vendor/charts"
const data = [
{ month: "Jan", revenue: 18600, expenses: 8000 },
{ month: "Feb", revenue: 30500, expenses: 12000 },
// ...
]
const config = {
revenue: { label: "Revenue", color: "hsl(var(--chart-1))" },
expenses: { label: "Expenses", color: "hsl(var(--chart-2))" },
} satisfies ChartConfig
<AreaChart
data={data}
config={config}
xKey="month"
dataKeys={["revenue", "expenses"]}
/>Examples
Area Chart
Line Chart
Bar Chart
Pie Chart (Donut)
Components
AreaChart / LineChart
Time-series charts for trends and comparisons.
data — Array of data points.config — Chart configuration (labels, colors).xKey — Data key for X axis.dataKeys — Array of keys to plot.stacked — Stack areas/bars (AreaChart only).BarChart
Comparative bar charts, vertical or horizontal.
horizontal — Render bars horizontally.stacked — Stack bars on top of each other.PieChart
Distribution charts (pie or donut style).
dataKey — Key for the numeric value.nameKey — Key for the segment label.innerRadius — Set to 0 for solid pie, higher for donut.Theming
Charts use CSS variables for colors. Define colors in your config using the built-in chart tokens:
// Available chart color tokens (defined in globals.css)
--chart-1 // Primary chart color
--chart-2 // Secondary
--chart-3 // Tertiary
--chart-4 // Quaternary
--chart-5 // Quinary
// Use in config
const config = {
revenue: {
label: "Revenue",
color: "hsl(var(--chart-1))"
},
}