Chart

Responsive frame for a recharts chart. Wraps recharts' ResponsiveContainer, provides the config (series keys → label / icon / color) to every descendant ChartTooltipContent / ChartLegendContent, and injects a --color-<key> CSS variable per series so recharts marks can be colored with fill="var(--color-desktop)". Pass a single recharts chart element as the child. It is dimensionless — set the aspect / height with className (defaults to aspect-video).

Usage

import { Chart, chartAnatomy, ChartConfig, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "@desk/ui/components/chart";

Best practices

Color every series through config ({ desktop: { label, color } }) and reference var(--color-<key>) on the marks — never hardcode a hex on a Bar / Line; that keeps light/dark theming and the legend/tooltip swatches in sync.
Reach for Chart only to render a recharts data visualization; for a static value + delta use Stat, and for a progress bar use Progress.

Props

Chart

Prop	Type	Default	Description
config(required)	`ChartConfig`		Series keys → label / icon / color, injected as `--color-<key>` variables.
initialDimension	`{ width: number; height: number; }`	`{ width: 320, height: 200 }`	Width / height the container assumes before it has measured itself — keeps the first paint (and SSR) from rendering at zero size.

ChartLegendContent

Prop	Type	Default	Description
hideIcon	`boolean`		Draw color swatches even when a series has a config `icon`.
nameKey	`string`		Config key to resolve each entry's name from (defaults to the datum key).

ChartStyle

Prop	Type	Default	Description
id(required)	`string`		The `data-chart` id the variables are scoped to.
config(required)	`ChartConfig`		The series-key → color mapping to emit variables from.

ChartTooltipContent

Prop	Type	Description
indicator	`Indicator`	Leading swatch style: filled dot, solid rule, or dashed rule.
hideLabel	`boolean`	Hide the tooltip header (the shared axis label).
hideIndicator	`boolean`	Hide the per-series color swatches.
nameKey	`string`	Config key to resolve each row's name from (defaults to the series name).
labelKey	`string`	Config key to resolve the header label from (defaults to the datum key).

Also exports

constchartAnatomy
typeChartConfig
componentChartLegend
componentChartTooltip

Anatomy

Chart

chart

Responsive frame + config provider for a recharts chart

ChartStyle

chart-style

Per-series --color-<key> CSS variables emitted from config

ResponsiveContainer

chart-surface

The recharts chart element (BarChart, LineChart, …)

ChartTooltipContent

chart-tooltip-content

Themed tooltip surface resolving labels/colors by key

ChartLegendContent

chart-legend-content

Themed legend row of swatches + labels