shadcn Chart Generator
Bar, line, area, pie, radar and radial — with the ChartConfig written.
"use client"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
} from "@/components/ui/chart"
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 173, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]
const chartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function Chart() {
return (
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
)
}
ChartConfig is the part worth generating
shadcn charts are Recharts underneath, with one layer of indirection on top:
chartConfig maps each dataKey to a label and a theme colour, and
generates the --color-* variable the marks reference. Getting that wiring right by
hand is fiddly, and it is most of what this writes for you.
How to use it
-
Pick a chart type
Bar, line, area, pie, radar or radial. The preview redraws immediately and the Recharts imports change with it.
-
Define your series
Each series is a dataKey, a label and one of the five theme colours. The dataKey is what the generated fill references.
-
Set the options
Grid, axes, legend, stacking, rounded bars and dots. Options that do not apply to the current chart type are disabled rather than hidden.
-
Copy the component
You get the ChartConfig, sample data in the right shape, and the full component with correct imports.
How the colour indirection works
You write color: "var(--chart-2)" in chartConfig against a key like
desktop. ChartContainer turns that into a
--color-desktop variable scoped to the chart, and the mark uses
fill="var(--color-desktop)". The indirection is what lets one component respond to
light and dark themes without touching the JSX.
The height trap
Recharts measures its parent to size itself, so a ChartContainer with no height
renders nothing at all — no error, just an empty box. Give it
min-h-[200px] or an aspect-* class. This is the most common reason a
shadcn chart appears blank.
Pie and radial take one key
Bar, line, area and radar plot several series across a shared axis. Pie and radial plot a
single dataKey across categories instead, so extra series stay in
chartConfig for their labels and colours but only one is drawn. The generator says
so rather than silently dropping them.
It is still Recharts
Anything Recharts supports works here — reference lines, custom shapes, brushes. shadcn only supplies the container, the tooltip and the legend, so reach for the Recharts docs for the rest.
Frequently asked questions
How do I add charts in shadcn/ui?
npx shadcn@latest add chart, which installs the chart wrapper and Recharts. shadcn does not implement charts itself — it wraps Recharts in ChartContainer and adds themeable tooltips and legends.What is ChartConfig for?
dataKey to a label and a colour, and generates a --color-<key> CSS variable you reference in fill or stroke. That indirection is what lets the same chart respond to your theme instead of hard-coding hex values into the JSX.Why is my shadcn chart not showing up?
ChartContainer has no height. Recharts measures its parent, so the container needs a min-h-* or aspect-* class — className="min-h-[200px] w-full" is the usual fix.What are the --chart-1 to --chart-5 variables?
var(--chart-2) in chartConfig rather than a hex value keeps charts consistent across light and dark themes.How do I stack bars in a shadcn chart?
<Bar> the same stackId, such as stackId="a". The same applies to <Area>. Without a shared id the series render side by side instead.Can I use shadcn charts without Recharts?
BarChart, Line, Pie — all come from Recharts. If you want no dependency, generate the layout here and draw the marks yourself in SVG.