Chart

Token-aware chart wrapper that passes Sigil colors to your charting library.

Installation

npx @sigil-ui/cli add chart

Preview

This chart uses the actual ChartContainer, ChartTooltip, and ChartLegend components.

Install Recharts alongside Sigil if it is not already in your project:

pnpm add recharts

Import

import { ChartContainer, ChartTooltip, ChartLegend } from "@sigil-ui/components";

Usage

Wrap any Recharts, Chart.js, or custom SVG chart. The container injects token colors as CSS variables scoped to the chart area.

import { BarChart, Bar, XAxis, YAxis } from "recharts";

<ChartContainer>
  <BarChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Bar dataKey="value" fill="var(--s-primary)" />
  </BarChart>
</ChartContainer>

Examples

<ChartContainer>
  <BarChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Bar dataKey="value" fill="var(--s-primary)" />
    <ChartTooltip />
  </BarChart>
</ChartContainer>

Multi-series with token colors

<ChartContainer>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Bar dataKey="revenue" fill="var(--s-primary)" />
    <Bar dataKey="expenses" fill="var(--s-secondary)" />
    <ChartLegend />
  </BarChart>
</ChartContainer>

Line chart

import { LineChart, Line } from "recharts";

<ChartContainer className="h-[300px]">
  <LineChart data={data}>
    <XAxis dataKey="date" />
    <YAxis />
    <Line type="monotone" dataKey="value" stroke="var(--s-primary)" strokeWidth={2} />
  </LineChart>
</ChartContainer>