Chart

Tessina charts are thin, token-driven primitives wrapped around Recharts v3, with the Recharts composition left fully exposed. Reach for these when you need a chart shape beyond Area or Line; otherwise use those ready-made components.

Playground

Installation

pnpm add @tessinaui/ui recharts

Usage

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

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

<ChartContainer config={config} className="aspect-[2/1]">
  <LineChart data={data} accessibilityLayer>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Line dataKey="mobile" stroke="var(--color-mobile)" />
    <ChartLegend content={<ChartLegendContent />} />
  </LineChart>
</ChartContainer>

ChartContainer reads config and injects each series colour as a --color-<key> CSS variable scoped to the chart, so raw Recharts children reference var(--color-desktop) in stroke / fill / stopColor. Because the underlying --chart-N tokens flip with the .dark class, charts recolour on theme change with no React re-render.

Examples

Default

A single-series area chart composed from ChartContainer and raw Recharts primitives.

Tooltip Indicators

ChartTooltipContent supports three indicator styles — dot, line, and dashed.

Legend

A multi-series chart with a token-styled ChartLegend labelling each series.

Loading

ChartSkeleton renders a shape-aware loading placeholder per chart type.

Empty & Error

ChartMessage covers the empty and error states where there's no plot to show.

Primitives

Theming

Every colour resolves to a token — series via --chart-1 … --chart-6, and chrome via border (grid/axis), muted-foreground (ticks/legend), and popover (tooltip). Nothing is hardcoded. The six series tokens are brand-led and contrast-checked in both light and dark.