Chart

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/chart

UsageCopy Anchor Link

import { Area, AreaChart } from "recharts";

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

const config = {
  kbps: { color: "var(--foreground)", label: "Bitrate (kbps)" },
} satisfies ChartConfig;

<ChartContainer className="aspect-auto h-56" config={config}>
  <AreaChart data={data}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area dataKey="kbps" fill="var(--color-kbps)" stroke="var(--color-kbps)" />
  </AreaChart>
</ChartContainer>;

Every key in the config becomes a --color-<key> variable on the chart, per theme. Point a mark's fill and stroke at it.

AnatomyCopy Anchor Link

<ChartContainer config={config}>
  <AreaChart>
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </AreaChart>
</ChartContainer>

ExamplesCopy Anchor Link

SparklinesCopy Anchor Link

A stats sparkline has no axes, no tooltip and no animation: the number above it is the reading. It's neutral by default and takes the warning tone only when the tile itself is a warning, with an icon beside its label so the colour is never alone.

BarsCopy Anchor Link

One neutral series with its value at the tip of each bar. The platform names on the axis carry identity, so the bars need no colour of their own.

ThemingCopy Anchor Link

The theme has no --chart-* palette. Videorc's chrome is monochrome and colour carries meaning, so a chart colours its series from the tokens it already has:

Give a series a theme instead of a color when it needs a different value in light and dark.

AccessibilityCopy Anchor Link

Recharts' accessibilityLayer (on by default) lets the keyboard move through a chart's points and opens the tooltip on each. A chart is never the only place its numbers live: say the current reading in words beside it, and mark a decorative sparkline aria-hidden.

API referenceCopy Anchor Link

ChartContainerCopy Anchor Link

Every div prop, plus:

ChartTooltipContentCopy Anchor Link

Every Recharts Tooltip content prop, plus:

ChartLegendContentCopy Anchor Link

ChartTooltip and ChartLegend are Recharts' Tooltip and Legend.