Diverging Bar Chart
Cash flow, gains vs losses: one bar up and one down from a shared zero line, with a bubble showing both and the net. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<DivergingBarChart />1 variantNew in 2.0.1
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-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
DivergingBarChart.tsx
<DivergingBarChart data={[ { label: "Sep", positive: 5400, negative: 3300 }, { label: "Oct", positive: 4900, negative: 2700 }, ]} formatValue={(v) => `$${v}`}/>Props
| Prop | Type | Default |
|---|---|---|
| data `negative` can be an amount or a negative number. | { label, positive, negative }[] | — |
| positiveLabel / negativeLabel Names in bubble and legend. | string | "Income" / "Expense" |
| positiveColor / negativeColor Colours. | string | theme positive / negative |
| height / gap / barWidth Layout. | number | 200 / 10 / auto |
| showNet / showLegend / showLabels / showTooltip Extras. | boolean | true |
| onScrubStart / onScrubEnd Pause your ScrollView while dragging. | () => void | — |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag (haptics via ChartProvider). | (index, datum) => void | — |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?