Docs › Chart types
Population pyramid
Two series mirrored around a center axis: age and sex distributions.
type: 'pyramid' draws the first series to the left and the second to the right. Pass the values as positive numbers (no need to negate one side); the ticks on both sides read as absolute numbers too. The axis is symmetric around zero.
Live example
Code for this example
createChart('#chart', {
type: 'pyramid',
title: 'Population by age',
subtitle: 'Sample data',
data: {
labels: ['0–9', '10–19', '20–29', '30–39', '40–49', '50–59', '60–69', '70–79', '80+'],
series: [
{ name: 'Men', data: [1810, 2240, 2620, 3050, 3920, 4210, 3880, 2650, 1320] },
{ name: 'Women', data: [1720, 2110, 2480, 2930, 3810, 4260, 4120, 3190, 2280] },
],
},
});- List the youngest band first: the first label goes to the bottom (
yAxis.reversedefaults totruefor pyramids).yAxis: { reverse: false }draws from the top. - The tooltip shows both values of the band and their total. The up and down arrow keys move between bands.
- A third series and beyond are not drawn. The two-series legend switches a side off.
As shares
pyramid: { percent: true } makes the bars and ticks a share of everyone on both sides. The tooltip keeps the count next to the share. dataLabels: true writes the value at each bar end.
Live example
Code for this example
createChart('#chart', {
type: 'pyramid',
title: 'Population share by age',
pyramid: { percent: true },
dataLabels: true,
data: {
labels: ['0–19', '20–39', '40–59', '60–79', '80+'],
series: [
{ name: 'Men', data: [4050, 5670, 8130, 6530, 1320] },
{ name: 'Women', data: [3830, 5410, 8070, 7310, 2280] },
],
},
});| Option | Default | What it does |
|---|---|---|
pyramid.percent | false | Bars, ticks and labels as a share (%) of the whole |
yAxis.reverse | true | First label at the bottom; false starts at the top |
dataLabels | false | Values at the bar ends (the left end for left bars) |
colors | blue, orange | The two side colors; the legend names them so color is never the only cue |