ComposedChart

Chart
Bars, lines, and gradient-washed areas sharing one categorical axis: each series picks its mark with a line or area boolean (bars by default; precedence line > area > bars).
src/charts/composed-chart
View in Charts

Playground

Every control sets a real prop of ComposedChartProps. The JSX below updates as you go.
Revenue and margin
Revenue
Margin
Props
dots
boolean
JSX · ComposedChartProps
<ComposedChart />

Variants

2 examples from src/charts/composed-chart/composed-chart.md, each rendered live from its own JSX.
Traffic and conversions
Sessions
Sign-ups
Area backdrop
<ComposedChart
title="Traffic and conversions"
labels={["Mon", "Tue", "Wed", "Thu", "Fri"]}
series={[
{ label: "Sessions", values: [1200, 1420, 1310, 1680, 1540], area: true },
{ label: "Sign-ups", values: [240, 310, 280, 420, 380] }
]}
/>
Deploys and incidents
Deploys
Incidents
Dots and inspection
<ComposedChart
title="Deploys and incidents"
labels={["W1", "W2", "W3", "W4", "W5", "W6"]}
dots
defaultSelected={3}
series={[
{ label: "Deploys", values: [12, 18, 15, 22, 19, 24] },
{ label: "Incidents", values: [2, 1, 3, 1, 2, 1], line: true }
]}
/>

Anatomy

Revenue and margin
Revenue
Margin
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

2 props on ComposedChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
series *
ComposedSeries[]
–
The series to plot; each picks its mark (bars by default, line, or area).
dots
boolean
false
Mark each line/area datum with a dot (auto-suppressed when bands are under 14px).
Omit<CartesianSeriesProps, "series"> · the shared labels · series · title · max · min · success · destructive · curved · compact · plain · hideLegend · hideGrid · hideAxes · formatValue · selected · defaultSelected · onSelect · testID · style props.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
No role of its own in source; it reads as the content it renders.
From the docs
The classic "revenue bars with a margin line" chart, on one shared zero-based y axis, with the same scrub-to-inspect, legend, and accessible-name contract as the other cartesian charts. For bar-only grouped data, reach for the bar Chart's grouped mode instead; composed earns its keep when the marks mix.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Revenue vs target
Revenue
Target
Web
control 10 · field 10 · card 16 · Instrument Sans
Revenue vs target
Revenue
Target
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Revenue vs target
Revenue
Target
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<ComposedChart
title="Revenue and margin"
labels={["Q1", "Q2", "Q3", "Q4"]}
series={[
{ label: "Revenue", values: [420, 510, 480, 620] },
{ label: "Margin", values: [110, 170, 150, 240], line: true }
]}
/>
The classic "revenue bars with a margin line" chart, on one shared zero-based y axis, with the same scrub-to-inspect, legend, and accessible-name contract as the other cartesian charts. For bar-only grouped data, reach for the bar Chart's grouped mode instead; composed earns its keep when the marks mix.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx2
--tx3

Related components