cssgridgen

shadcn Chart Generator

Bar, line, area, pie, radar and radial — with the ChartConfig written.

JanFebMarAprMayJun
DesktopMobile
ChartConfig + component
"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>
  )
}
Free tool

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

  1. Pick a chart type

    Bar, line, area, pie, radar or radial. The preview redraws immediately and the Recharts imports change with it.

  2. 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.

  3. 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.

  4. 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?
Run 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?
It maps each 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?
Usually because 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?
A five-colour categorical palette defined in your CSS, added when you install the chart component. Referencing 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?
Give every <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?
No. The chart component is a wrapper, so the chart elements themselves — BarChart, Line, Pie — all come from Recharts. If you want no dependency, generate the layout here and draw the marks yourself in SVG.

Related tools