Chart

Install

pnpm dlx shadcn@latest add @namche/chart

Usage

import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from '@/components/ui/chart';

const chartConfig = {
  inference: { label: 'Inference', color: 'var(--chart-1)' },
} satisfies ChartConfig;

<ChartContainer config={chartConfig}>
  <AreaChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area dataKey="inference" fill="var(--color-inference)" stroke="var(--color-inference)" />
  </AreaChart>
</ChartContainer>

Series colours come from --chart-1 through --chart-5 — the one place in this system where the OKEANOS and HELIOS editorial palettes are meant to show up, since everywhere else they're reserved for charts and illustration rather than product chrome. Each ChartConfig entry keyed by a data field (inference above) becomes a scoped --color-<key> CSS variable that the chart's own SVG elements read from, so reference colours as var(--color-inference) rather than the raw --chart-* token. ChartTooltipContent and ChartLegendContent look up labels and icons from that same config by matching each Recharts payload entry's dataKey (or nameKey/labelKey override) back to a config key.