# Chart

> Recharts wrappers themed by chart tokens.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/chart.json`

## Install

```tsx
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from "@aspyn-io/kit";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
```

### Bar chart with theme-aware colors

Series colors come from chart tokens, so charts re-skin with the brand and dark mode automatically: switch the theme to see it.

```tsx
const config = {
  new_subscriptions: { label: "New subscriptions", color: "var(--as-chart-1)" },
  cancellations: { label: "Cancellations", color: "var(--as-chart-5)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="h-64 w-full">
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="new_subscriptions" fill="var(--color-new_subscriptions)" radius={4} />
    <Bar dataKey="cancellations" fill="var(--color-cancellations)" radius={4} />
  </BarChart>
</ChartContainer>
```

### Line chart

```tsx
<ChartContainer config={config} className="h-64 w-full">
  <LineChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <Line type="monotone" dataKey="new_subscriptions" stroke="var(--color-new_subscriptions)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>
```

## Notes

- ChartContainer injects --color-<key> variables from your config: reference them in fill/stroke.
- Data keys use snake_case to match Aspyn API responses directly.
- Any Recharts chart works inside ChartContainer: Area, Pie, Radar, Radial…