Chart

Recharts-based data visualisation.

Bar chart

Single series with the chart-1 token. The fill follows the active brand.

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@smaller-earth/ui"

const config = {
  sessions: { label: "Sessions", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={config} className="h-64">
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="sessions" fill="var(--color-sessions)" radius={4} />
  </BarChart>
</ChartContainer>

Multi-series line chart

Categorical palette in use: chart-1, chart-2, chart-3. Switch brands in the top bar: the palette stays constant because chart tokens are locked across brands.

import { Line, LineChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@smaller-earth/ui"

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
  tablet: { label: "Tablet", color: "var(--chart-3)" },
} satisfies ChartConfig

<ChartContainer config={config} className="h-72">
  <LineChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" strokeWidth={2} dot={false} />
    <Line dataKey="mobile" stroke="var(--color-mobile)" strokeWidth={2} dot={false} />
    <Line dataKey="tablet" stroke="var(--color-tablet)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>