Shadcn Chart

A chart is Recharts with your theme on the container, tooltip, and legend. You write BarChart and Bar yourself — config only supplies labels and --color-*. Use it on dashboards, reports, and any plot that should match the rest of the app.

Usage

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

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

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

config keys must match each dataKey. fill="var(--color-desktop)" reads the color the container injects.

Composition

ChartStyle is internal. ChartTooltip and ChartLegend are the Recharts primitives.

Example

Two series, no axis. fill is var(--color-desktop) from config.

Tooltip

indicator is dot, line, or dashed. hideLabel and hideIndicator drop the parts you do not want.

Grid

Turn the cartesian grid on or off. Same data, less chrome.

Axis

Format ticks. Hide an axis when the tooltip already says the number.

Tooltip Example

A custom tooltip renderer. Keep it to the series they hovered.

Legend

ChartLegendContent under the plot. Click to toggle a series if the chart supports it.

RTL

Wrap with DirectionProvider and dir="rtl". reversed on XAxis so months read right to left.

API

ChartConfig

ChartTooltipContent

ChartLegendContent

Notes

Write colors as var(--chart-1), not hsl(var(--chart-1)).

With other components

Questions

Related