Chart

Recharts wrapper with theme-aware series colors, tooltip, and legend.

Examples

Type

Tooltip indicator

Grid

Legend

Composed chart (bar + line)

Donut chart

Radar chart

Radial bar chart

Scatter chart

Overview

ChartContainer wraps Recharts' ResponsiveContainer and injects a --color-<key> CSS variable per series from its config, so marks can reference fill="var(--color-<key>)" / stroke="var(--color-<key>)" and stay theme-aware. Colors given as theme: { light, dark } switch automatically with the .dark class.

The chart components compose with Recharts primitives, so import chart types (BarChart, LineChart, Bar, Line, axes, …) directly from recharts.

tsx

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@rogo-technologies/ui/chart";
import { Bar, BarChart, XAxis } from "recharts";

const config: ChartConfig = {
  revenue: { label: "Revenue", color: "rgb(var(--chart-1))" },
};

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

Usage

Series colors

Use the shared chart tokens --chart-1 … --chart-5 (see Colors). They are RGB channel triples, so wrap them in rgb():

tsx

const config: ChartConfig = {
  revenue: { label: "Revenue", color: "rgb(var(--chart-1))" },
  expenses: { label: "Expenses", color: "rgb(var(--chart-2))" },
};

For colors that differ per theme, pass a theme object instead of color:

tsx

const config: ChartConfig = {
  price: { label: "Price", theme: { light: "#1B8C6C", dark: "#2AA37F" } },
};

Tooltip

ChartTooltip is Recharts' Tooltip; pass ChartTooltipContent as its content for the Rogo-styled card. Labels resolve from the chart config, and formatter / labelFormatter customize values.

tsx

<ChartTooltip
  content={<ChartTooltipContent indicator="line" formatter={(value) => formatUsd(value)} />}
/>

Legend

ChartLegend is Recharts' Legend; pass ChartLegendContent as its content. Series labels and optional icons come from the chart config.

tsx

<ChartLegend content={<ChartLegendContent />} />

API

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	-	Per-series `label`, optional `icon`, and `color` or `theme: { light, dark }`.
`children`	Recharts chart element	-	A single Recharts chart (`BarChart`, `LineChart`, …).
`id`	`string`	auto	Stable id for the injected per-series CSS variables.
`className`	`string`	-	Merged onto the container (defaults include `aspect-video`; override freely).

ChartTooltipContent

Prop	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Marker style next to each series row.
`hideLabel`	`boolean`	`false`	Hide the tooltip header label.
`hideIndicator`	`boolean`	`false`	Hide the series color marker.
`formatter`	`(value, name, item, …) => ReactNode`	-	Replace the default row rendering per entry.
`labelFormatter`	`(label, payload) => ReactNode`	-	Customize the header label.
`nameKey`	`string`	-	Config lookup key for series names.
`labelKey`	`string`	-	Config lookup key for the header label.

ChartLegendContent

Prop	Type	Default	Description
`verticalAlign`	`"top" \| "bottom"`	`"bottom"`	Adjusts padding toward the chart.
`hideIcon`	`boolean`	`false`	Hide config icons, show color swatches.
`nameKey`	`string`	-	Config lookup key for series names.

Guidelines

Do

Use the shared --chart-1 … --chart-5 tokens so series colors stay consistent and theme-aware
Give every series a label in the config, since the tooltip and legend read from it
Size charts with className on ChartContainer (it defaults to aspect-video)

Don't

Don't use more than 5 series colors in one chart (see Colors)
Don't hardcode hex colors on marks. Reference var(--color-<key>) from the config
Don't wrap ChartContainer in another ResponsiveContainer. It already provides one

PreviousCard

NextCheckbox