Chart

"use client";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@reva/ui";import { Pie, PieChart } from "recharts";const chartData = [{ id: "easy-access", value: 4000, fill: "var(--color-easy-access)" },{ id: "mmf", value: 5500, fill: "var(--color-mmf)" },];const chartConfig = {value: { label: "Balance" },"easy-access": { label: "Easy Access", color: "var(--chart-1)" },mmf: { label: "MMF", color: "var(--chart-2)" },} satisfies ChartConfig;export function ChartPieDonutDemo() {return (  <ChartContainer config={chartConfig} className="mx-auto aspect-square size-[180px]">    <PieChart>      <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />      <Pie data={chartData} dataKey="value" nameKey="id" innerRadius={56} strokeWidth={4} />    </PieChart>  </ChartContainer>);}

Usage

import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@reva/ui";
import { Pie, PieChart } from "recharts";

Reva's Chart primitives wrap Recharts with a ChartContainer that injects per-chart CSS variables from a ChartConfig object. Reference colors as var(--color-<key>) in your chart data, and define them on the config as color: "var(--chart-1)" (bound to the categorical theme tokens --chart-1 … --chart-7 — amber in light mode, gold in dark).

Composition

Use the following composition to build a Chart:

ChartContainer (config, className)
├── RechartsPrimitive.ResponsiveContainer (auto)
│   └── <Recharts chart> (PieChart, BarChart, LineChart, …)
│       ├── ChartTooltip
│       │   └── ChartTooltipContent
│       └── ChartLegend
│           └── ChartLegendContent

Customisation

Categorical ramp

For multi-series charts where the colours only need to be distinct (pies, stacked bars, grouped series), use the categorical tokens var(--chart-1) … var(--chart-7) as in the hero demo above.

Chart variants

When a series carries meaning — brand performance, a benchmark, gains, losses — use the five chart variant token groups instead. Each maps onto a semantic intent:

Each variant exposes five roles as CSS variables — var(--chart-<variant>-<role>):

• stroke — the line itself (≡ the intent's solid colour)
• fill — solid fills: bars, dots, the active pie segment
• area-start / area-end — the two stops of a vertical gradient for area fills; area-end is fully transparent, hue-matched so the fade never greys out
• projected — ghost/forecast fills: dashed projections, what-if bands

The gradient recipe for a line/area series — stroke on the line, an area-start → area-end vertical gradient under it, projected for the forecast segment:

<AreaChart data={data}>
  <defs>
    <linearGradient id="fillPrimary" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="var(--chart-primary-area-start)" />
      <stop offset="100%" stopColor="var(--chart-primary-area-end)" />
    </linearGradient>
  </defs>
  <Area dataKey="value" stroke="var(--chart-primary-stroke)" fill="url(#fillPrimary)" />
  <Area dataKey="forecast" stroke="var(--chart-primary-stroke)" strokeDasharray="4 4" fill="var(--chart-primary-projected)" />
</AreaChart>

The variants flip with the colour mode automatically (the tokens mirror the intent ladders per mode) — no dark: handling in chart code.

Examples

This component was added from upstream shadcn with minimal integration. Additional examples (bar, line, area, radial, stacked) will be added in a follow-up pass.

Props

ChartContainer

ChartTooltipContent

ChartLegendContent

ChartTooltip / ChartLegend

Direct re-exports of Recharts Tooltip / Legend. Pass content={<ChartTooltipContent />} / content={<ChartLegendContent />} to render the themed slots.