Charts

The chart components are a thin, themed wrapper around Recharts. You bring the Recharts chart (a BarChart, LineChart, and so on) and wrap it in ChartContainer with a config that maps each data series to a label and color. The wrapper injects CSS variables (--color-<key>), applies token-driven styling for axes and grids, and provides drop-in ChartTooltip and ChartLegend content. Reach for it for dashboards, AR aging, and any in-app data visualization.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: chart.tsx

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@beacon/design-system";
import { Bar, BarChart, XAxis, YAxis } from "recharts";

const chartData = [
  { month: "Jan", value: 186 },
  { month: "Feb", value: 305 },
  { month: "Mar", value: 237 },
];

const chartConfig = {
  value: { label: "Value", color: "hsl(var(--chart-1))" },
} satisfies ChartConfig;

<ChartContainer config={chartConfig} className="h-64 w-full max-w-sm">
  <BarChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-value)" radius={4} />
  </BarChart>
</ChartContainer>

Parts

Part	Role
`ChartContainer`	Required wrapper. Takes a `config` and renders a Recharts `ResponsiveContainer`, injecting per-series color variables.
`ChartTooltip`	Re-export of the Recharts `Tooltip`; pass `content={<ChartTooltipContent />}`.
`ChartTooltipContent`	Themed tooltip body. Supports `indicator` (`"line" \| "dot" \| "dashed"`), `hideLabel`, `hideIndicator`, `nameKey`, `labelKey`.
`ChartLegend`	Re-export of the Recharts `Legend`; pass `content={<ChartLegendContent />}`.
`ChartLegendContent`	Themed legend body. Supports `hideIcon` and `nameKey`.
`ChartStyle`	Renders the `<style>` block that defines the `--color-<key>` variables (used internally by `ChartContainer`).
`ChartConfig`	Type mapping each series key to a `label`, optional `icon`, and a `color` or per-theme `theme` colors.

When to use

Dashboard summaries and KPI visualizations.
Financial views such as AR aging or collections trends.
Any in-app chart that must follow the design tokens and theme.

Do not hardcode hex colors on series. Define them in the config (via color or theme) and reference var(--color-<key>) so charts stay token-driven and theme-aware.