Command Palette

Search for a command to run...

Chart

Chart components built on Recharts with shincn theming support. Provides ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, and ChartLegendContent.

Installation

npx shadcn add chart --registry https://ui.ch.sh/r

Usage

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

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

const data = [
  { month: "Jan", desktop: 186 },
  { month: "Feb", desktop: 305 },
  { month: "Mar", desktop: 237 },
]

export default function Example() {
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}