Docs › Components › Chart

Shadcn Chart

shadcn/ui Charts are themed chart components built on Recharts and styled with Tailwind CSS v4. A chart config maps each series to a label and color, and ChartContainer provides a styled tooltip and legend so charts match your design tokens in light and dark. Charts power dashboards across ShadcnStore application blocks.

Key features

• Compose Recharts primitives (Bar, Line, Area, Pie…).
• Config-driven labels and theme-aware colors.
• Styled tooltip and legend components.
• Responsive container that fits its parent.
• Works in light and dark using your CSS variables.

Installation

npx shadcn@latest add chart

Usage

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

const chartData = [
  { month: "Jan", desktop: 186 },
  { month: "Feb", desktop: 305 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export function Example() {
  return (
    <ChartContainer config={chartConfig} className="h-[200px] w-full">
      <BarChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

Colors

Each key in the config exposes a --color-<key> CSS variable that you reference in fill or stroke, so series colors follow your theme.

Built on Recharts

Charts are built on Recharts and are independent of the UI primitive layer.

Accessibility

• Provide a text summary or data table alongside a chart for screen-reader users.
• Do not rely on color alone; use labels and patterns to distinguish series.
• Keep tooltips keyboard-reachable where interaction matters.

When to use the Chart

Use charts to visualize trends and comparisons in dashboards and reports: revenue over time, traffic by source, or category breakdowns. For raw rows of data, use a Data Table. For a single metric, a Card stat is clearer.

Used in these blocks

• Charts: dashboard charts.
• Widgets: metric visualizations.
• Apps: analytics screens.

Related components

Charts sit inside a Card with a Badge trend, alongside a Data Table for detail and Tabs to switch views.

FAQ

What is the shadcn chart?

shadcn Charts are a set of themed components built on Recharts, giving you a chart config, styled tooltip, and legend so charts match your design tokens.

Does the shadcn chart use Recharts?

Yes. You compose Recharts primitives inside ChartContainer, which applies the theme colors from your chart config.

How do I set chart colors?

Define a chart config mapping each series to a label and color; ChartContainer exposes CSS variables like --color-desktop you reference in fill or stroke.

How do I make the chart responsive?

ChartContainer is responsive; give it a height and a full-width class and it fills its parent.