ComposedChart

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).
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.
Revenue and margin
Revenue
Margin
iOS
Revenue and margin
Revenue
Margin
Android
Revenue and margin
Revenue
Margin
Web
tsx
<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 }
]}
/>

Props

Prop
Description
series
required
ComposedSeries[]
The series to plot; each picks its mark (bars by default, `line`, or `area`).
dots
boolean
Mark each line/area datum with a dot (auto-suppressed when bands are under 14px).
labels
required
string[]
Category labels along the x axis, one per data column.
title
string
Optional heading shown above the plot.
max
number
Y-axis maximum override. Defaults to a nice bound above the data max.
min
number
Y-axis minimum override. Defaults to 0 (or the data min when negative).
success
boolean
Tone (single-series only; pick one; default is the primary fill).
destructive
boolean
Tone (single-series only; pick one; default is the primary fill).
curved
boolean
Curve (omit for straight segments).
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility.
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels and accessible values (data formatting, not styling).
selected
number | null
Scrub-to-inspect: the selected category index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected category (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a category (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

ComposedChart

Don’t
Revenue
Costs
All-bar composed data belongs on the bar Chart's grouped mode; composed adds nothing but indirection.
Do
Revenue and margin
Revenue
Margin
Mix marks when the series mean different things: bars for the magnitude, a line for the derived rate.
← Chart
DepthChart →