0
182
ViewsAge pyramid: 3.5.1 chartjs
I want to create an age pyramid using pure chartjs 3.5.1. I have viewed the thread Age pyramid chart using chart.js, but one of the solutions uses react, another is not compatible with chartjs 3.+.
The result should be similar to this:
Really appreciate your help!
Regards.
·
Juan Pablo Isaza
1 answers
Answer question0
Yes, you can use floating bars together with faking the scales, you can just use negative numbers for 1 of the 2 datasets and just invert all those numbers with all the callbacks:
var options = {
type: 'bar',
data: {
labels: ["0-10", "10-20", "20-30"],
datasets: [{
label: 'Girls',
data: [
[
0,
12
],
[
0,
19
],
[
0,
3
]
],
backgroundColor: 'pink',
barPercentage: 1,
categoryPercentage: 1,
borderColor: 'black',
borderWidth: 1
},
{
label: 'Boys',
data: [
[
0, -7
],
[
0, -11
],
[
0, -5
]
],
backgroundColor: 'lightBlue',
barPercentage: 1,
categoryPercentage: 1,
borderColor: 'black',
borderWidth: 1,
borderSkipped: 'none' // Leave this line out to remove middle border at 0 line
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (Math.abs(ttItem.parsed.x)) // Inverse negatives to positive numbers
}
}
},
indexAxis: 'y',
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
x: {
min: -20,
max: 20,
ticks: {
callback: (val) => (Math.abs(val)) // Inverrt negatives to positive numbers
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
·
Juan Pablo Isaza
Report
Answer question