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>
)
}