Chart

A set of wrapper components around Recharts that provide automatic theme-aware color injection, styled tooltip and legend content, and responsive sizing. Define your chart config once and let the components handle CSS custom property generation.

Anatomy

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "@/components/ui/chart"
import type { ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--chart-1))",
  },
  expenses: {
    label: "Expenses",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="revenue" fill="var(--color-revenue)" />
    <Bar dataKey="expenses" fill="var(--color-expenses)" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </BarChart>
</ChartContainer>

Examples

const config = {
  visitors: { label: "Visitors", color: "hsl(var(--chart-1))" },
} satisfies ChartConfig

<ChartContainer config={config}>
  <BarChart data={data}>
    <Bar dataKey="visitors" fill="var(--color-visitors)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Line chart with legend

const config = {
  desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
  mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
} satisfies ChartConfig

<ChartContainer config={config}>
  <LineChart data={data}>
    <Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Line dataKey="mobile" stroke="var(--color-mobile)" />
    <ChartLegend content={<ChartLegendContent />} />
  </LineChart>
</ChartContainer>

Theme-aware colors

Use the theme property instead of color to provide different colors for light and dark modes.

const config = {
  sales: {
    label: "Sales",
    theme: {
      light: "hsl(220 70% 50%)",
      dark: "hsl(220 70% 70%)",
    },
  },
} satisfies ChartConfig

API Reference

ChartContainer

The root wrapper. Injects CSS custom properties for chart colors and wraps children in a ResponsiveContainer.

Prop	Type	Default	Description
`config`	`ChartConfig`	—	Required. A record mapping data keys to labels, colors, and optional icons.
`id`	`string`	—	Custom ID for the chart. Auto-generated if not provided.
`className`	`string`	—
`children`	`ReactElement`	—	A Recharts chart component (e.g. `BarChart`, `LineChart`).

ChartTooltip

A re-export of Recharts' Tooltip component. Use with ChartTooltipContent as the content prop.

ChartTooltipContent

A pre-styled tooltip content renderer that reads from the chart config to resolve labels and colors.

Prop	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	The shape of the color indicator.
`hideLabel`	`boolean`	`false`	Whether to hide the tooltip header label.
`hideIndicator`	`boolean`	`false`	Whether to hide the color indicator.
`nameKey`	`string`	—	Override the key used to look up the series name.
`labelKey`	`string`	—	Override the key used to look up the tooltip header label.
`labelFormatter`	`(value: ReactNode, payload: Payload[]) => ReactNode`	—	Custom formatter for the tooltip header.
`labelClassName`	`string`	—	Class name for the label element.
`className`	`string`	—

ChartLegend

A re-export of Recharts' Legend component. Use with ChartLegendContent as the content prop.

ChartLegendContent

A pre-styled legend content renderer that reads from the chart config.

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`	Whether to hide the color icon next to each legend entry.
`nameKey`	`string`	—	Override the key used to look up series names.
`verticalAlign`	`"top" \| "bottom"`	`"bottom"`	Vertical alignment, used to adjust padding.
`className`	`string`	—