Skip to content
Components

Chart

Responsive frame for a recharts chart. Wraps recharts' ResponsiveContainer, provides the config (series keys → label / icon / colour) to every descendant ChartTooltipContent / ChartLegendContent, and injects a --color-<key> CSS variable per series so recharts marks can be coloured 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 "@instruments/materia-ui/components/chart";

Best practices

  • Colour 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

PropTypeDefaultDescription
config(required)ChartConfig

Series keys → label / icon / colour, 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

PropTypeDefaultDescription
hideIconboolean

Draw colour swatches even when a series has a config icon.

nameKeystring

Config key to resolve each entry's name from (defaults to the datum key).

ChartStyle

PropTypeDefaultDescription
id(required)string

The data-chart id the variables are scoped to.

config(required)ChartConfig

The series-key → colour mapping to emit variables from.

ChartTooltipContent

PropTypeDefaultDescription
indicatorIndicator

Leading swatch style: filled dot, solid rule, or dashed rule.

hideLabelboolean

Hide the tooltip header (the shared axis label).

hideIndicatorboolean

Hide the per-series colour swatches.

nameKeystring

Config key to resolve each row's name from (defaults to the series name).

labelKeystring

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

Composition

Builds on

Center, Flex, Grid