Chart

Recharts wrappers themed by chart tokens.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

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.

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

<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…