Chart

Usage

import { UsageChart, type UsageSeries } from "@tulipfarm/sprout/chart";

const series: UsageSeries[] = [
  { key: "s0", label: "claude-sonnet-4.5", color: "var(--sprout-chart-1)" },
  { key: "s1", label: "gpt-5", color: "var(--sprout-chart-2)" },
  { key: "s2", label: "2 more", color: "var(--sprout-muted)" },
];

<UsageChart
  days={[
    { date: "2026-10-16", s0: 12.5, s1: 4, s2: 0.6 },
    { date: "2026-10-17", s0: 9, s1: null },
  ]}
  series={series}
/>

• UsageChart stacks one bar per day, 256px tall. Each day is a row with a UTC date (YYYY-MM-DD) and a value per series key. A missing or null value leaves that series out of the day’s tooltip. Day labels read like “Oct 17”;locale changes the language.
• CategoryChart draws side-by-side bars per category with a legend, 288px tall. category names the row key that labels each group.
• Both take title, which names the chart for screen readers, and className to change the height.
• Series colors are any CSS color. The palette is--sprout-chart-1 to --sprout-chart-5, with--sprout-muted for a folded “N more” series.

Canvas results

import { CanvasSection } from "@tulipfarm/sprout/canvas";
import { CategoryChart } from "@tulipfarm/sprout/chart";

<CanvasSection title={item.title}>
  <CategoryChart rows={content.rows} category={content.category} series={content.series} />
</CanvasSection>

Playground

Tooltip and legend

• ChartTooltipContent: indicator is"dot" (default), "line", or"dashed". With one series and a line or dashed indicator, the label moves into the row. hideLabel,hideIndicator, labelFormatter,labelClassName, formatter,color, nameKey, and labelKeychange what it shows.
• ChartLegendContent: hideIcon shows swatches instead of config icons, and nameKey picks the config entry. On a top legend, the 12px gap moves below it.

Custom charts

import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  chartColor,
  type ChartConfig,
} from "@tulipfarm/sprout/chart";

const config = {
  chats: { label: "Chats", theme: { light: "#245cba", dark: "#9cbdff" } },
  agentRuns: { label: "Agent runs", color: "var(--sprout-chart-4)" },
} satisfies ChartConfig;

<ChartContainer config={config} style={{ height: 256 }}>
  <LineChart data={weeks} accessibilityLayer title="Chats and agent runs by week">
    <CartesianGrid vertical={false} />
    <XAxis dataKey="week" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <ChartLegend verticalAlign="top" itemSorter={null} content={<ChartLegendContent />} />
    <Line dataKey="chats" stroke={chartColor("chats")} dot={false} />
    <Line dataKey="agentRuns" stroke={chartColor("agentRuns")} dot={false} />
  </LineChart>
</ChartContainer>

ChartContainer is 16:9 unless you give it a height. It writes --sprout-chart-color-<key> for each config entry; chartColor(key) returns that variable. Entries with theme switch value in dark mode. ChartStyleis the style tag it renders. ChartTooltip andChartLegend are Recharts’ Tooltip andLegend.

Accessibility

The ready charts turn on Recharts’ accessibility layer. The chart is one tab stop, named by title. Left and Right arrow keys move the tooltip between days or categories, and a 2px focus ring shows. Keep the real numbers in text or a table next to the chart, as the credits page does.

The tooltip moves in 160ms and stays still with reduced motion. Bars draw without animation. In forced colors, the tooltip is outlined and swatches keep their colors.

Theme tokens

Series use --sprout-chart-1 to--sprout-chart-5, with light and dark values. Tailwind gets them as bg-sprout-chart-1 and so on, for swatches beside a chart. Ticks use --sprout-muted, grid lines--sprout-line, the hover band --sprout-hover, and the tooltip --sprout-surface with--sprout-line.