Data

Chart

Recharts wrapper that consumes the theme --data-* palette.

Preview

import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from 'recharts';
const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] as const;

const compact = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});

/** Vertical bar chart with a single series, themed via `ChartContainer` config. */
export default function ChartBarDemo() {
  const data = monthLabels.map((month, i) => ({
    month,
    visitors: 1820 + i * 240 + (i % 2) * 180,
  }));
  const config: ChartConfig = {
    visitors: { label: 'Visitors', color: 'var(--data-1)' },
  };
  return (
    <ChartContainer config={config} className="h-72 w-full">
      <BarChart data={data} margin={{ top: 12, right: 12, left: 4, bottom: 0 }}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => compact.format(v)} />
        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
        <Bar dataKey="visitors" fill="var(--color-visitors)" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ChartContainer>
  );
}

01 Installation

Install

Pull Chart from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Chart } from "@brika/clay";

tsxGranular1 line

import { Chart } from "@brika/clay/components/chart";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxChart.tsx41 lines

import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from 'recharts';
const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] as const;

const compact = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});

/** Vertical bar chart with a single series, themed via `ChartContainer` config. */
export default function ChartBarDemo() {
  const data = monthLabels.map((month, i) => ({
    month,
    visitors: 1820 + i * 240 + (i % 2) * 180,
  }));
  const config: ChartConfig = {
    visitors: { label: 'Visitors', color: 'var(--data-1)' },
  };
  return (
    <ChartContainer config={config} className="h-72 w-full">
      <BarChart data={data} margin={{ top: 12, right: 12, left: 4, bottom: 0 }}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => compact.format(v)} />
        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
        <Bar dataKey="visitors" fill="var(--color-visitors)" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ChartContainer>
  );
}

03 Examples

Chart, every way

Bar, Grouped

Two series rendered side-by-side, colour-keyed via the config palette.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from 'recharts';
const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] as const;

const compact = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});

/**
 * Two series rendered side-by-side, colour-keyed via the config palette.
 * @title Bar, Grouped
 */
export default function ChartBarGroupedDemo() {
  const data = monthLabels.map((month, i) => ({
    month,
    desktop: 1820 + i * 240,
    mobile: 1140 + i * 180 + (i % 2) * 120,
  }));
  const config: ChartConfig = {
    desktop: { label: 'Desktop', color: 'var(--data-1)' },
    mobile: { label: 'Mobile', color: 'var(--data-2)' },
  };
  return (
    <ChartContainer config={config} className="h-72 w-full">
      <BarChart data={data} margin={{ top: 12, right: 12, left: 4, bottom: 0 }}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => compact.format(v)} />
        <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[6, 6, 0, 0]} />
        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ChartContainer>
  );
}

Bar, Stacked

Stacked bar chart, bars share a column, totalled top-to-bottom.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from 'recharts';
const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] as const;

const compact = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});

/**
 * Stacked bar chart, bars share a column, totalled top-to-bottom.
 * @title Bar, Stacked
 */
export default function ChartBarStackedDemo() {
  const data = monthLabels.map((month, i) => ({
    month,
    paid: 420 + i * 60,
    organic: 1280 + i * 110,
    referral: 380 + i * 30,
  }));
  const config: ChartConfig = {
    paid: { label: 'Paid', color: 'var(--data-1)' },
    organic: { label: 'Organic', color: 'var(--data-3)' },
    referral: { label: 'Referral', color: 'var(--data-5)' },
  };
  return (
    <ChartContainer config={config} className="h-72 w-full">
      <BarChart data={data} margin={{ top: 12, right: 12, left: 4, bottom: 0 }}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => compact.format(v)} />
        <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="paid" stackId="a" fill="var(--color-paid)" />
        <Bar dataKey="organic" stackId="a" fill="var(--color-organic)" />
        <Bar dataKey="referral" stackId="a" fill="var(--color-referral)" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ChartContainer>
  );
}

Donut

Donut variant with a center label showing the running total.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import { Label, Pie, PieChart } from 'recharts';
const DONUT_DATA = [
  { status: 'completed', tasks: 142, fill: 'var(--data-3)' },
  { status: 'inProgress', tasks: 36, fill: 'var(--data-1)' },
  { status: 'blocked', tasks: 8, fill: 'var(--destructive)' },
];
const DONUT_TOTAL = DONUT_DATA.reduce((sum, d) => sum + d.tasks, 0);

const DONUT_CONFIG: ChartConfig = {
  tasks: { label: 'Tasks' },
  completed: { label: 'Completed', color: 'var(--data-3)' },
  inProgress: { label: 'In progress', color: 'var(--data-1)' },
  blocked: { label: 'Blocked', color: 'var(--destructive)' },
};

function DonutCenterLabel(props: Readonly<{ viewBox?: unknown }>) {
  const viewBox = props.viewBox as { cx?: number; cy?: number } | undefined;
  const cx = viewBox?.cx;
  const cy = viewBox?.cy;
  if (cx === undefined || cy === undefined) return null;
  return (
    <text x={cx} y={cy} textAnchor="middle" dominantBaseline="middle">
      <tspan x={cx} y={cy} className="fill-foreground font-semibold text-3xl">
        {DONUT_TOTAL}
      </tspan>
      <tspan x={cx} y={cy + 22} className="fill-muted-foreground text-xs">
        Tasks
      </tspan>
    </text>
  );
}

/** Donut variant with a center label showing the running total. */
export default function ChartDonutDemo() {
  return (
    <ChartContainer config={DONUT_CONFIG} className="mx-auto h-80 w-80">
      <PieChart>
        <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="status" />} />
        <Pie
          data={DONUT_DATA}
          dataKey="tasks"
          nameKey="status"
          innerRadius={70}
          outerRadius={110}
          strokeWidth={2}
        >
          <Label content={DonutCenterLabel} />
        </Pie>
        <ChartLegend content={<ChartLegendContent nameKey="status" />} />
      </PieChart>
    </ChartContainer>
  );
}

KPI Dashboard

Sparklines compose into a KPI strip; each one keeps its own color via the data palette.

GitHub

import { Badge } from '@brika/clay/components/badge';
import { Chart } from '@brika/clay/components/chart';
import { DAY, generate, HOUR } from '../chart.demo-data';

const hourly = generate(24, HOUR, 3, 18, 1.5);
const weekly = generate(7, DAY, 1.2, 12, 4);
const monthly = generate(30, DAY, 4, 22, 0.4);
// Pseudo-random but deterministic so the demo renders identically every reload.
const volatile = Array.from({ length: 48 }, (_, index) => ({
  ts: Date.now() - (47 - index) * 30 * 60_000,
  value:
    50 +
    (Math.sin(index * 0.91) * 18 +
      Math.sin(index * 0.37 + 1.3) * 10 +
      Math.cos(index * 1.7) * 6),
}));

const currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});
const percent = new Intl.NumberFormat('en-US', {
  style: 'percent',
  maximumFractionDigits: 1,
});

interface KpiSeries {
  label: string;
  value: string;
  delta: string;
  trend: 'up' | 'down';
  color: string;
  data: Array<{ ts: number; value: number }>;
}

const KPI_SERIES: KpiSeries[] = [
  { label: 'Revenue', value: currency.format(48230), delta: '+12.4%', trend: 'up', color: 'var(--data-1)', data: weekly },
  { label: 'Active users', value: '8,402', delta: '+3.1%', trend: 'up', color: 'var(--data-2)', data: monthly },
  { label: 'Error rate', value: percent.format(0.018), delta: '-0.4%', trend: 'down', color: 'var(--destructive)', data: volatile },
  { label: 'Latency p95', value: '142ms', delta: '+5ms', trend: 'up', color: 'var(--data-4)', data: hourly },
];

/**
 * Sparklines compose into a KPI strip; each one keeps its own color via the data palette.
 * @title KPI Dashboard
 */
export default function ChartDashboardDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {KPI_SERIES.map((s) => (
        <div
          key={s.label}
          className="flex flex-col gap-3 overflow-hidden rounded-card border border-border bg-card-container p-4 shadow-card"
        >
          <div className="flex items-center justify-between gap-2">
            <p className="font-medium text-muted-foreground text-xs uppercase tracking-wide">{s.label}</p>
            <Badge variant={s.trend === 'down' ? 'secondary' : 'outline'} className="text-[10px]">
              {s.delta}
            </Badge>
          </div>
          <p className="font-semibold text-2xl text-foreground tabular-nums">{s.value}</p>
          <div className="-mx-1 h-14">
            <Chart data={s.data} color={s.color} />
          </div>
        </div>
      ))}
    </div>
  );
}

Labeled Axes

`xLabel`/`yLabel` add axis titles; tick formatters render dates and currency for a finance-style chart.

GitHub

import { Chart } from '@brika/clay/components/chart';
import { DAY, generate } from '../chart.demo-data';

const monthly = generate(30, DAY, 4, 22, 0.4);

const currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

/**
 * `xLabel`/`yLabel` add axis titles; tick formatters render dates and currency for a finance-style chart.
 */
export default function ChartLabeledAxesDemo() {
  const data = monthly.map((d) => ({ ts: d.ts, value: d.value * 1234 }));
  return (
    <div style={{ height: 320, width: '100%' }}>
      <Chart
        data={data}
        color="var(--data-2)"
        showAxes
        xLabel="Date"
        yLabel="Revenue (USD)"
        formatValue={(v) => currency.format(v)}
        formatX={(ts) =>
          new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
        }
      />
    </div>
  );
}

Line, Multi-series

Multi-series line chart with a dashed target overlay and a themed legend.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  CartesianGrid,
  Line,
  LineChart,
  XAxis,
  YAxis,
} from 'recharts';
const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] as const;

/**
 * Multi-series line chart with a dashed target overlay and a themed legend.
 * @title Line, Multi-series
 */
export default function ChartLineMultiDemo() {
  const data = monthLabels.map((month, i) => ({
    month,
    revenue: 18 + i * 4 + Math.sin(i) * 2,
    target: 22 + i * 3,
  }));
  const config: ChartConfig = {
    revenue: { label: 'Revenue', color: 'var(--data-1)' },
    target: { label: 'Target', color: 'var(--muted-foreground)' },
  };
  return (
    <ChartContainer config={config} className="h-72 w-full">
      <LineChart data={data} margin={{ top: 12, right: 12, left: 4, bottom: 0 }}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} width={40} />
        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Line
          type="monotone"
          dataKey="revenue"
          stroke="var(--color-revenue)"
          strokeWidth={2}
          dot={{ fill: 'var(--color-revenue)', r: 3 }}
        />
        <Line
          type="monotone"
          dataKey="target"
          stroke="var(--color-target)"
          strokeWidth={2}
          strokeDasharray="4 4"
          dot={false}
        />
      </LineChart>
    </ChartContainer>
  );
}

Live Stream

Live-streaming chart with controls, pick a metric, swap the time window, pause / resume the simulated feed.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import { Chart } from '@brika/clay/components/chart';
import { ToggleGroup, ToggleGroupItem } from '@brika/clay/components/toggle-group';
import { Pause, Play, RotateCcw } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
const currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

const STREAM_RANGES = {
  '60s': { points: 60, intervalMs: 1_000, tickFormat: { minute: '2-digit', second: '2-digit' } as const },
  '5m': { points: 60, intervalMs: 5_000, tickFormat: { hour: 'numeric', minute: '2-digit' } as const },
  '15m': { points: 90, intervalMs: 10_000, tickFormat: { hour: 'numeric', minute: '2-digit' } as const },
} as const;
type StreamRange = keyof typeof STREAM_RANGES;

const METRICS = {
  revenue: { label: 'Revenue / sec', color: 'var(--data-1)', base: 120, jitter: 40, format: (v: number) => currency.format(v) },
  users: { label: 'Active users', color: 'var(--data-2)', base: 8400, jitter: 600, format: (v: number) => Math.round(v).toLocaleString() },
  errors: { label: 'Errors / min', color: 'var(--destructive)', base: 4, jitter: 5, format: (v: number) => v.toFixed(1) },
  latency: { label: 'Latency (ms)', color: 'var(--data-4)', base: 140, jitter: 35, format: (v: number) => `${v.toFixed(0)}ms` },
} as const;
type MetricKey = keyof typeof METRICS;

// Deterministic pseudo-random number generator (mulberry32). Seeded so the
// streaming demo never depends on `Math.random()` — keeps the visual output
// reproducible and avoids flagged uses of a non-cryptographic PRNG.
function mulberry32(seed: number): () => number {
  let state = seed >>> 0;
  return () => {
    state = (state + 0x6d_2b_79_f5) >>> 0;
    let t = state;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
  };
}

const nextRandom = mulberry32(0xc0_ff_ee);

function nextSample(metric: MetricKey, prev?: number): number {
  const cfg = METRICS[metric];
  const base = prev ?? cfg.base;
  // Random walk with mean-reversion towards the metric's base value.
  const drift = (cfg.base - base) * 0.05;
  const noise = (nextRandom() - 0.5) * cfg.jitter;
  return Math.max(0, base + drift + noise);
}

function seedSeries(metric: MetricKey, range: StreamRange): Array<{ ts: number; value: number }> {
  const { points, intervalMs } = STREAM_RANGES[range];
  const now = Date.now();
  const out: Array<{ ts: number; value: number }> = [];
  let prev: number | undefined;
  for (let i = 0; i < points; i += 1) {
    prev = nextSample(metric, prev);
    out.push({ ts: now - (points - 1 - i) * intervalMs, value: prev });
  }
  return out;
}

function Stat({
  label,
  value,
  highlight,
}: Readonly<{ label: string; value: string; highlight?: boolean }>) {
  return (
    <div className="flex flex-col gap-1">
      <span className="text-muted-foreground text-xs uppercase tracking-wide">{label}</span>
      <span
        className={`tabular-nums ${highlight ? 'font-semibold text-foreground text-lg' : 'text-foreground text-sm'}`}
      >
        {value}
      </span>
    </div>
  );
}

/**
 * Live-streaming chart with controls, pick a metric, swap the time window, pause / resume the simulated feed.
 */
export default function ChartLiveStreamDemo() {
  const [metric, setMetric] = useState<MetricKey>('revenue');
  const [range, setRange] = useState<StreamRange>('60s');
  const [paused, setPaused] = useState(false);
  const [data, setData] = useState<Array<{ ts: number; value: number }>>(() =>
    seedSeries('revenue', '60s')
  );
  const lastValueRef = useRef<number | undefined>(undefined);

  // Reseed when the user swaps metric or range; also reset the random-walk anchor.
  useEffect(() => {
    const seeded = seedSeries(metric, range);
    setData(seeded);
    lastValueRef.current = seeded.at(-1)?.value;
  }, [metric, range]);

  // Stream a new point every interval-ms while not paused.
  useEffect(() => {
    if (paused) return;
    const { intervalMs, points } = STREAM_RANGES[range];
    const id = setInterval(() => {
      const next = nextSample(metric, lastValueRef.current);
      lastValueRef.current = next;
      setData((prev) => [...prev.slice(-(points - 1)), { ts: Date.now(), value: next }]);
    }, intervalMs);
    return () => clearInterval(id);
  }, [metric, range, paused]);

  const cfg = METRICS[metric];
  const tickFormat = STREAM_RANGES[range].tickFormat;

  const stats = useMemo(() => {
    if (data.length === 0) return null;
    const values = data.map((d) => d.value);
    const current = values.at(-1) ?? 0;
    const min = Math.min(...values);
    const max = Math.max(...values);
    const avg = values.reduce((a, b) => a + b, 0) / values.length;
    return { current, min, max, avg };
  }, [data]);

  const reset = (): void => {
    const seeded = seedSeries(metric, range);
    setData(seeded);
    lastValueRef.current = seeded.at(-1)?.value;
  };

  return (
    <div className="flex w-full flex-col gap-4 rounded-card border border-border bg-card-container p-4 shadow-card">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <ToggleGroup
          type="single"
          value={metric}
          onValueChange={(v) => v && setMetric(v as MetricKey)}
          aria-label="Metric"
        >
          {(Object.keys(METRICS) as MetricKey[]).map((key) => (
            <ToggleGroupItem key={key} value={key}>
              {METRICS[key].label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
        <div className="flex items-center gap-2">
          <ToggleGroup
            type="single"
            value={range}
            onValueChange={(v) => v && setRange(v as StreamRange)}
            aria-label="Range"
          >
            <ToggleGroupItem value="60s">60s</ToggleGroupItem>
            <ToggleGroupItem value="5m">5m</ToggleGroupItem>
            <ToggleGroupItem value="15m">15m</ToggleGroupItem>
          </ToggleGroup>
          <Button
            variant="outline"
            size="icon-sm"
            onClick={() => setPaused((p) => !p)}
            aria-label={paused ? 'Resume stream' : 'Pause stream'}
          >
            {paused ? <Play /> : <Pause />}
          </Button>
          <Button variant="outline" size="icon-sm" onClick={reset} aria-label="Reset stream">
            <RotateCcw />
          </Button>
        </div>
      </div>

      {stats ? (
        <div className="grid grid-cols-4 gap-3 border-border border-y py-3">
          <Stat label="Current" value={cfg.format(stats.current)} highlight />
          <Stat label="Average" value={cfg.format(stats.avg)} />
          <Stat label="Min" value={cfg.format(stats.min)} />
          <Stat label="Max" value={cfg.format(stats.max)} />
        </div>
      ) : null}

      <div className="h-72 w-full">
        <Chart
          data={data}
          color={cfg.color}
          showAxes
          formatValue={cfg.format}
          formatX={(ts) => new Date(ts).toLocaleTimeString(undefined, tickFormat)}
        />
      </div>

      <p className="flex items-center gap-2 text-muted-foreground text-xs">
        <span
          aria-hidden
          className={`inline-block size-2 rounded-full ${paused ? '' : 'animate-pulse'}`}
          style={{ backgroundColor: paused ? 'var(--muted-foreground)' : cfg.color }}
        />
        {paused ? 'Paused' : `Streaming, new sample every ${STREAM_RANGES[range].intervalMs / 1000}s`}
      </p>
    </div>
  );
}

Pie

Pie chart with a custom legend, segments map to the data palette via per-row `fill`.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import { Pie, PieChart } from 'recharts';
const PIE_DATA = [
  { browser: 'chrome', visitors: 4280, fill: 'var(--data-1)' },
  { browser: 'safari', visitors: 2310, fill: 'var(--data-2)' },
  { browser: 'firefox', visitors: 1490, fill: 'var(--data-3)' },
  { browser: 'edge', visitors: 870, fill: 'var(--data-4)' },
  { browser: 'other', visitors: 510, fill: 'var(--data-5)' },
];

const PIE_CONFIG: ChartConfig = {
  visitors: { label: 'Visitors' },
  chrome: { label: 'Chrome', color: 'var(--data-1)' },
  safari: { label: 'Safari', color: 'var(--data-2)' },
  firefox: { label: 'Firefox', color: 'var(--data-3)' },
  edge: { label: 'Edge', color: 'var(--data-4)' },
  other: { label: 'Other', color: 'var(--data-5)' },
};

/** Pie chart with a custom legend, segments map to the data palette via per-row `fill`. */
export default function ChartPieDemo() {
  return (
    <ChartContainer config={PIE_CONFIG} className="mx-auto h-80 w-80">
      <PieChart>
        <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="browser" />} />
        <Pie
          data={PIE_DATA}
          dataKey="visitors"
          nameKey="browser"
          outerRadius={120}
          strokeWidth={2}
        />
        <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
      </PieChart>
    </ChartContainer>
  );
}

Radar

Radar chart, multivariate comparison across labelled axes.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from 'recharts';
/** Radar chart, multivariate comparison across labelled axes. */
export default function ChartRadarDemo() {
  const data = [
    { axis: 'Speed', current: 86, target: 70 },
    { axis: 'Reliability', current: 74, target: 80 },
    { axis: 'Cost', current: 62, target: 75 },
    { axis: 'Coverage', current: 90, target: 85 },
    { axis: 'Latency', current: 68, target: 78 },
    { axis: 'Throughput', current: 82, target: 80 },
  ];
  const config: ChartConfig = {
    current: { label: 'Current quarter', color: 'var(--data-1)' },
    target: { label: 'Target', color: 'var(--data-3)' },
  };
  return (
    <ChartContainer config={config} className="mx-auto h-80 w-80">
      <RadarChart data={data} margin={{ top: 12, right: 12, left: 12, bottom: 12 }}>
        <PolarGrid />
        <PolarAngleAxis dataKey="axis" />
        <PolarRadiusAxis tick={false} axisLine={false} />
        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Radar
          dataKey="current"
          fill="var(--color-current)"
          fillOpacity={0.3}
          stroke="var(--color-current)"
          strokeWidth={2}
        />
        <Radar
          dataKey="target"
          fill="var(--color-target)"
          fillOpacity={0.15}
          stroke="var(--color-target)"
          strokeWidth={2}
        />
      </RadarChart>
    </ChartContainer>
  );
}

Radial

Radial bar chart, useful for goal-completion or capacity visualisations.

GitHub

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from '@brika/clay/components/chart';
import { RadialBar, RadialBarChart } from 'recharts';

/** Radial bar chart, useful for goal-completion or capacity visualisations. */
export default function ChartRadialDemo() {
  const data = [
    { metric: 'storage', value: 78, fill: 'var(--data-1)' },
    { metric: 'memory', value: 64, fill: 'var(--data-2)' },
    { metric: 'cpu', value: 91, fill: 'var(--destructive)' },
    { metric: 'network', value: 42, fill: 'var(--data-4)' },
  ];
  const config: ChartConfig = {
    value: { label: 'Utilisation' },
    storage: { label: 'Storage', color: 'var(--data-1)' },
    memory: { label: 'Memory', color: 'var(--data-2)' },
    cpu: { label: 'CPU', color: 'var(--destructive)' },
    network: { label: 'Network', color: 'var(--data-4)' },
  };
  return (
    <ChartContainer config={config} className="mx-auto h-80 w-80">
      <RadialBarChart data={data} innerRadius={32} outerRadius={120} startAngle={90} endAngle={-270}>
        <ChartTooltip
          content={<ChartTooltipContent hideLabel nameKey="metric" formatter={(v) => `${v}%`} />}
        />
        <RadialBar dataKey="value" background cornerRadius={6} />
        <ChartLegend content={<ChartLegendContent nameKey="metric" />} />
      </RadialBarChart>
    </ChartContainer>
  );
}

With Axes

`showAxes` reveals tick labels on both axes plus a faint grid; tooltip gets a timestamp header.

GitHub

import { Chart } from '@brika/clay/components/chart';
import { generate, HOUR } from '../chart.demo-data';

const hourly = generate(24, HOUR, 3, 18, 1.5);

/** `showAxes` reveals tick labels on both axes plus a faint grid; tooltip gets a timestamp header. */
export default function ChartWithAxesDemo() {
  return (
    <div style={{ height: 280, width: '100%' }}>
      <Chart
        data={hourly}
        color="var(--data-1)"
        showAxes
        formatValue={(v) => `${v.toFixed(0)}`}
      />
    </div>
  );
}

04 Accessibility

Accessibility

Charts are visual, provide a <caption> or adjacent text summary for screen readers.
Recharts renders an SVG; ensure the wrapper has role="img" and aria-label describing the data.
Tooltips visible on hover are not reliably announced by AT, critical data should also appear in text form.

05 Tokens 3 theme-overridable

Theme tokens

Every CSS variable Chart reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Chart without touching component code.

Chart tokens

3 tokens

ColorFill, border, and text colors.3

--chart-tooltip-containercolorvar(--popover)
components.chart.tooltipContainer
Background color of the chart tooltip surface. Defaults to the theme popover so tooltips read as floating UI.
--chart-tooltip-labelcolorvar(--popover-foreground)
components.chart.tooltipLabel
Text color of the chart tooltip readout. Defaults to the theme popover foreground.
--chart-tooltip-bordercolorvar(--border)
components.chart.tooltipBorder
Border color of the chart tooltip surface. Defaults to the theme border.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.chart, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "chart": {
      "tooltipContainer": "var(--popover)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-chart-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Chart. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

Chart exposes no wrapper-specific props.

All props pass through to the underlying HTML / Radix primitive, see the component source linked above for the full type signature.