0👍
See Chart.js docs for reference:
https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
Say you added another dataset:
{
label: "Dataset3",
type: "bar",
backgroundColor: "#00ff00",
borderColor: "#00ff00",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [ 149703, 122015, 123596, 164856, 136928, 220957, 213136, 235956, 187194, 183432, 163078, 138721 ]
}
Solution
You need to add extra config to your X and Y axis scales:
scales: {
xAxes: [ { stacked: true }],
yAxes: [ { stacked: true }]
}
Example
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["< 1","1 - 2","3 - 4","5 - 9","10 - 14","15 - 19","20 - 24","25 - 29","> - 29"],
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
yAxisID: "axis-time",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},{
label: "Dataset2",
type: "bar",
backgroundColor: "#ff0000",
borderColor: "#ff0000",
borderWidth: 1,
fill: true,
yAxisID: "axis-bar",
data: [
149703, 122015,
123596, 164856,
136928, 220957,
213136, 235956,
187194, 183432,
163078, 138721
]
},{
label: "Dataset3",
type: "bar",
backgroundColor: "#00ff00",
borderColor: "#00ff00",
borderWidth: 1,
fill: true,
yAxisID: "axis-bar",
data: [
149703, 122015,
123596, 164856,
136928, 220957,
213136, 235956,
187194, 183432,
163078, 138721
]
}],
},
options: {
tooltips: {
displayColors: true,
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
id: 'axis-bar'
}, {
stacked: true,
id: 'axis-time',
display: false,
}]
},
responsive: true,
maintainAspectRatio: false,
legend: { display: false },
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
if (datasets.length) {
for (var i = 0; i < datasets.length; ++i) {
text.push('<li>');
if (datasets[i].type=='line') {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
} else {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
}
text.push(datasets[i].label);
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
}
}
});
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
canvas{
background:#fff;
height:400px;
}
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<div class="wrapper">
<canvas id="myChart"></canvas>
<div id="legend"></div>
</div>
I also created a CodePen with the same code that shows the stacked bars & line chart:
https://codepen.io/pzi/pen/GRoObmq
Source:stackexchange.com