4👍
✅
Source: https://www.chartjs.org/samples/latest/charts/bar/stacked.html
You can define each column as 1 or more dataset.
Ex:
datasets: [{
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
null,
null,
null,
null,
null,
null
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
null,
randomScalingFactor(),
null,
null,
null,
null,
null
]
}]
var barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
null,
null,
null,
null,
null,
null
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
randomScalingFactor(),
null,
null,
null,
null,
null,
null
]
}, {
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
null,
randomScalingFactor(),
null,
null,
null,
null,
null
]
}, {
label: 'Dataset 4',
backgroundColor: window.chartColors.green,
data: [
null,
null,
randomScalingFactor(),
null,
null,
null,
null
]
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 100%">
<canvas id="canvas"></canvas>
</div>
Source:stackexchange.com