Combo Chart

Mix series types per key — e.g. revenue and costs as bars with margin as a line.

<ComboChart />1 variant

Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.

Installation

terminal

npx expo install expo-charts react-native-svg

Usage

Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.

ComboChart.tsx

<ComboChart  data={data}  config={{ revenue: { label: "Revenue" }, costs: { label: "Costs" }, margin: { label: "Margin %" } }}  types={{ revenue: "bar", costs: "bar", margin: "line" }}  xKey="month"  showDots/>

Props

Prop	Type	Default
types Series type per key.	Record<key, "bar" \| "line" \| "area">	bar
radius Bar corners.	number	6
curve Interpolation.	"monotone" \| "natural" \| "linear" \| "step"	"monotone"
strokeWidth Line thickness.	number	2
strokeVariant Stroke style; animated dashes march.	"solid" \| "dashed" \| "animated-dashed"	"solid"
glow Soft neon glow under the stroke.	boolean	false
showDots Point markers.	boolean	line: true
dotVariant Point marker style.	"default" \| "border" \| "colored-border" \| "none"	"default"
activeDotVariant Marker at the scrubbed point.	DotVariant	"default"
bufferLast Draws the last segment dashed (projection).	boolean	false

Shared cartesian props

Every Area, Bar, Line and Combo chart also accepts these — this is where axes, grid, legend, tooltip, brush and loading live.

Prop	Type	Default
data Rows, e.g. [{ month: "Jan", desktop: 186 }].	Datum[]	—
config Series keys → { label, color, variant, strokeVariant, glow }.	ChartConfig	—
xKey Key of the category / x value in each row.	string	—
keys Subset and order of series to draw.	string[]	all config keys
width Omit to fill the parent and re-flow on rotation.	number	parent width
height Chart height in points.	number	220
showGrid Horizontal grid lines.	boolean	true
gridStyle Grid line style.	"solid" \| "dashed"	"solid"
gridVertical Vertical grid lines at categories.	boolean	false
showXAxis Category labels under the chart.	boolean	true
showYAxis Value ticks.	boolean	false
yAxisPosition Side for the value axis.	"left" \| "right"	"left"
yTickCount Approximate number of ticks.	number	4
backgroundVariant dots, grid, cross-hatch, diagonal-lines, plus, tiny-checkers, wiggle-lines, bubbles.	BackgroundVariant	"none"
showLegend Legend under (or above) the chart.	boolean	false
legendVariant square, circle, circle-outline, rounded-square, rounded-square-outline, vertical-bar, horizontal-bar.	LegendVariant	"rounded-square"
legendPosition Where the legend sits.	"top" \| "bottom"	"bottom"
legendAlign Legend alignment.	"left" \| "center" \| "right"	"center"
legendMode Tap to hide a series, or highlight it and dim the rest.	"toggle" \| "select" \| "none"	"toggle"
showTooltip Floating tooltip while scrubbing / after a tap.	boolean	true
tooltipIndicator Colour marker in tooltip rows.	"dot" \| "line" \| "dashed"	"dot"
tooltipVariant Tooltip surface.	"default" \| "frosted-glass"	"default"
tooltipRoundness Tooltip corner radius.	"sm" \| "md" \| "lg" \| "xl"	"lg"
showTooltipTotal Adds a Total row.	boolean	false
showLabels Value labels on points / bars.	boolean	false
animationType rise, left-to-right, right-to-left, center-out, edges-in, none.	AnimationType	"left-to-right" (bars: "rise")
isLoading Pulsing skeleton with a Loading badge.	boolean	false
showBrush Range selector under the chart for long series.	boolean	false
formatValue Formats values in axes, labels and tooltip.	(v, key) => string	compact (1.2k)
formatLabel Formats category labels.	(x, index) => string	String(x)
onSelect Fires while scrubbing and on tap (great for haptics).	(index, datum) => void	—
onScrubStart / onScrubEnd Pause your ScrollView while the finger scrubs.	() => void	—

PreviousLine Chart NextPie & Donut

Did you like the content?