Chart

The frame around a recharts chart. ChartContainer sizes it to its parent, turns a config into --color-<key> variables and themes the axes and grid; the tooltip and legend read their labels from the same config.

tsx

1import {
2  ChartContainer,
3  ChartTooltip,
4  ChartTooltipContent,
5  ChartLegend,
6  ChartLegendContent,
7  type ChartConfig,
8} from "@pestoui/core"

Area chart

Each config key becomes a CSS variable inside the container, so the series is painted with var(--color-runs) and never with a literal. Give the container a height; the width follows its parent.

Two series with a legend

ChartLegendContent lists each series by its config label. indicator="line" on the tooltip swaps the dot for a bar beside each row.

Props

Prop	Type	Default	Description
config	ChartConfig	—	On ChartContainer. Required. One entry per series key: a label, an optional icon, and a color (or a theme with light and dark values). A color is a var(--token) reference, a hex value, or an rgb, hsl, lab, lch, oklab or oklch function of numbers; any other value is ignored and leaves the series uncolored.
children	ReactElement	—	On ChartContainer. Exactly one recharts chart — AreaChart, BarChart, LineChart, PieChart.
initialDimension	{ width: number; height: number }	{ width: 320, height: 200 }	On ChartContainer. The size used for the first paint, before the container has been measured.
indicator	"dot" \| "line" \| "dashed"	"dot"	On ChartTooltipContent. The colour mark beside each row.
hideLabel / hideIndicator	boolean	false	On ChartTooltipContent. Drops the heading, or the colour marks.
nameKey / labelKey	string	—	On ChartTooltipContent. Which payload field names a row or the heading, when it is not the dataKey.
labelFormatter / formatter	function	—	On ChartTooltipContent. Custom rendering for the heading or for each row.
hideIcon	boolean	false	On ChartLegendContent. When true a series' config icon is ignored and the colour swatch is drawn instead.
nameKey	string	—	On ChartLegendContent. Which payload field holds the config key.

PreviousCarousel Next Chart Axis Tick

Pesto UI · 117 documented components