Chart

Installation

npx shadcn@latest add @blank/chart

Usage

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

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

<ChartContainer config={config} className="h-60">
  <BarChart data={data}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
  </BarChart>
</ChartContainer>

Charts are Recharts components. The container turns each config key into a --color-<key> variable scoped to that chart, so series colors come from tokens and follow the theme. --chart-1 to --chart-5 are steps of one ink, darkest first; give a series a status role such as var(--danger-primary) only when it means one, like the failures above.

Examples

Line

indicator="line" on the tooltip and a legend from the same config.

Stacked area

API Reference

ChartContainer

Every div prop, plus:

ChartConfig

One entry per series: { label?: ReactNode; icon?: ComponentType } and either color (one value) or theme ({ light, dark }).

ChartTooltipContent

Recharts tooltip content props, plus:

ChartLegendContent