Chart

Recharts charts with theme colors, tooltips and legends that follow the active theme.

Requests

Thousands per month, June to November

Installation

The chart parts come from @zynactra/ui; the chart types (BarChart, Area...) come from Recharts. Add it to your app at the version the library uses:

pnpm add recharts@3.8.0

Usage

import { Bar, BarChart } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@zynactra/ui/chart"

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

<ChartContainer config={config} className="min-h-48 w-full">
  <BarChart data={data}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="api" fill="var(--color-api)" />
  </BarChart>
</ChartContainer>

ChartContainer turns each config key into a CSS variable (--color-api) for the marks to use. It needs a height: a min-h-* or h-* class.

Examples

Area

A trend over time, for one series.

Stacked area

Parts that add up to a total, over time. Give every Area the same stackId.

Stacked bar

Totals per category, split into parts.

Horizontal bar

Long category names, or a ranking. Set layout="vertical" and swap the axes; LabelList prints each value.

Positive and negative

Gains and losses. Split the value into two series on one stack with stackOffset="sign", so each sign gets its own color and label.

Line

Several series over time, where the exact values matter more than the area under them. Show dots only when there are few points.

Step line

Values that change in jumps, not smoothly: instance counts, plan limits, prices.

Bar and line

Two related measures with different units. Give each its own YAxis with a yAxisId.

Pie

Shares of one whole, with four slices or fewer. Each data row sets its own fill from the config.

Donut

A share breakdown with the total in the middle, through a Label inside the Pie.

Radar

Several scores on the same scale, compared across two periods or two things.

Radial bar

Progress or usage against a limit, for a few items.

Scatter

Whether two measures move together. One dot per item.

Choosing a chart

To show	Use
A trend over time	Line, or area for one series
Parts of a total over time	Stacked area or stacked bar
Comparing categories	Bar; horizontal when the names are long
Gains and losses	Positive and negative bar
Two measures with different units	Bar and line
Shares of a whole	Pie or donut, four slices or fewer; otherwise a horizontal bar
Several scores on one scale	Radar
Usage against a limit	Radial bar, or `Progress` for a single value
How two measures relate	Scatter

Guidelines

Colors come from --chart-1 to --chart-6, in order. Never the brand gradient: charts are data, not decoration.
One idea per chart. The title says what, the description says the unit and period.
Don't rely on color alone: label series in the legend or tooltip.
Leave bar radius unset. Recharts takes pixels, so a rounded bar would ignore the theme's corners (square in Zynactra).
Pass accessibilityLayer so the chart can be read with a keyboard and screen reader.

On this page