/// Charts
CompositeChart
A monochrome-plus-signal composite chart mixing area, bar, and line marks on shared axes, recharts-backed.
import { CompositeChart } from "@protocore/pds";Import path
CompositeChart ships from the `@protocore/pds/charts` subpath. recharts (>=3) is an optional peer.
import { CompositeChart } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";Basics
Each series declares its own mark type — bar, area, or line — and they share the x and y axes. A common pattern: a bar series for volume with a line series for a rate laid over it.
When to use it
Use CompositeChart when two related series read best as *different marks on one frame* — volume as bars, a moving average as a line; revenue as an area, margin as a line. When every series is the same kind, use the single-mark wrapper (LineChart, AreaChart, BarChart) instead — it is simpler.
Rank marks by role: bars for the base quantity, a line for the signal metric on the accent slot. Every prop beyond data/series/xKey/height forwards to the recharts <ComposedChart>.
Usage
Do
- Pair a bar (quantity) with a line (rate) rather than stacking many marks.
- Reserve the signal hue for the line that carries the story.
- Wrap it in a ChartContainer so it inherits the `--pds-chart-*` ramp.
- Give each series a `label` so the tooltip and legend read clearly.
Don't
- Don't mix so many mark types that the frame turns to noise.
- Don't use it when a single-mark wrapper would say the same thing.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
- Don't rely on colour alone to separate marks — mark shape already does.
Accessibility
- recharts renders the plot as SVG; provide surrounding context for assistive tech.
- Mark shape (bar vs area vs line) distinguishes series independently of colour.
CompositeChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data * | ReadonlyArray<Record<string, string | number | null | undefined>> | — | Row-oriented data; each datum keyed by `xKey` and by every series `key`. |
series * | CompositeSeries[] | — | Series to plot, in draw + legend order. `CompositeSeries` = `{ key: string; label?: string; color?: string; type?: 'area' | 'bar' | 'line' }` — `type` defaults to `'line'`. |
xKey * | string | — | Datum key for the x-axis category. |
height | number | 240 | Chart height in px. |
...rest | Omit<RechartsComposedChartProps, 'data' | 'children' | 'width' | 'height' | 'ref'> | — | Remaining props spread onto the underlying recharts `<ComposedChart>`. |