Skip to main content

Stacked bar chart

Bars stacked by series.

Stacked bar chart in the example app

Screenshot from the example app. Run it to try every option live.

Usage​

import { StackedBarChart } from 'react-native-skia-chart';

<StackedBarChart width={w} height={200} series={[{ data: a, color: '#7C5CFF' }, { data: b, color: '#00D2D3' }]} />

Props​

PropTypeDefaultNotes
series{ data, color }[]—One entry per stack layer.
…BarChart propsExcept data and stacked.

All charts also accept the shared props: width, height, padding, style, backgroundColor, animation, font, effects and gradient.

Gradient​

<StackedBarChart {...props} gradient={{ type: 'linear', colors: ['#ffffff', '#7C5CFF'], mode: 'overlay', opacity: 0.4 }} />

GPU notes​

Use mode: 'overlay' to keep each layer's colour and blend a gradient on top (srcATop).