Chart

The chart package is a thin system layer on top of Recharts. It exists so teams can define series once in a shared config, get consistent CSS variable-based coloring, and reuse the same tooltip and legend treatment across dashboards, reports, and operational readouts.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { Bar, BarChart, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <XAxis dataKey="label" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-series)" />
  </BarChart>
</ChartContainer>

Why This Primitive Exists

Recharts already solves rendering. The wrapper solves consistency.

• Use ChartContainer when a chart should inherit system spacing, borders, and series colors.
• Use the shared tooltip and legend content when repeated chart surfaces should read the same way.
• Avoid the wrapper only if you need a one-off visualization with completely custom presentation.

Examples

Single-Series Bar Readout

This is the smallest useful pattern: a config object, a ChartContainer, and a Recharts chart that references CSS variables derived from the config.

const chartConfig = {
  series: {
    label: "Series",
    color: "oklch(0.62 0.24 26)",
  },
}

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <ChartTooltip content={<ChartTooltipContent hideLabel />} />
    <Bar dataKey="value" fill="var(--color-series)" />
  </BarChart>
</ChartContainer>

Trend Comparison With Legend

For multi-series charts, define one config entry per series and add the shared legend component. That keeps labels and colors aligned between the chart, legend, and tooltip.

<ChartContainer config={chartConfig}>
  <LineChart data={data}>
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line dataKey="briefs" stroke="var(--color-briefs)" />
    <Line dataKey="approvals" stroke="var(--color-approvals)" />
  </LineChart>
</ChartContainer>

In Context

A chart becomes more useful when the surrounding layout explains the metric and what action to take next. Pair the visualization with a short interpretation, not another paragraph of axis labels.

Guidance

Start With The Config

• Define a stable key for each series in ChartConfig.
• Give every key a label so tooltips and legends stay readable.
• Use color for one palette or theme when light and dark need separate values.

Let Recharts Handle Geometry

• Keep using native Recharts components like BarChart, LineChart, AreaChart, XAxis, and YAxis.
• The wrapper does not replace chart geometry; it standardizes framing and shared presentation.
• Treat ChartContainer as the boundary between system styling and chart internals.

Keep The Readout Focused

• Hide labels in the tooltip when the axis label is already obvious.
• Add a legend only when multiple series need clarification.
• If a chart needs a long textual explanation to make sense, reconsider the chart type or the surrounding layout.

API Reference

Core Exports

Types And Props

ChartContainer also accepts standard div props such as className, id, and children.