Intro
Basics
Charts
ScatterLineAreaDonutBarStackedBar

StackedBar

This is a simple bar chart.

020406080100
0246810
Variable one
Variable two
<Box sx={{ width: '100%', height: '400px' }}>
<Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
<Ticks left bottom />
<TickLabels left bottom />
<Axis left bottom />
<AxisLabel left>Variable one</AxisLabel>
<AxisLabel bottom>Variable two</AxisLabel>
<Plot>
<StackedBar data={data} color={'purple'} />
</Plot>
</Chart>
</Box>

Horizontal bar

0246810
020406080100
<Box sx={{ width: '100%', height: '400px' }}>
<Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
<Ticks left bottom />
<TickLabels left bottom />
<Axis left bottom />
<Plot>
<StackedBar data={data} color={'purple'} direction='horizontal' />
</Plot>
</Chart>
</Box>

Floating bar

020406080100
0246810
<Box sx={{ width: '100%', height: '400px' }}>
<Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
<Ticks left bottom />
<TickLabels left bottom />
<Axis left bottom />
<Plot>
<StackedBar
data={data.map(([x, zero, ...yValues]) => [x, ...yValues])}
color={'purple'}
/>
</Plot>
</Chart>
</Box>

Multiple colors

Custom stack colors

020406080100
0246810
<Box sx={{ width: '100%', height: '400px' }}>
<Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
<Ticks left bottom />
<TickLabels left bottom />
<Axis left bottom />
<Plot>
<StackedBar data={data} color={['pink', 'red', 'orange']} />
</Plot>
</Chart>
</Box>

Completely customized colors

020406080100
0246810
<Box sx={{ width: '100%', height: '400px' }}>
<Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
<Ticks left bottom />
<TickLabels left bottom />
<Axis left bottom />
<Plot>
<StackedBar
data={data}
color={data.map((d) => d.slice(2).map(() => getRandomColor()))}
/>
</Plot>
</Chart>
</Box>
EMAIL
hello@carbonplan.org
NEWSLETTER
Subscribe
CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status.
(c) 2024 CARBONPLAN
READ OUR TERMS
X,Y: 0000,0000
7f82ed9