0๐
โ
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23],
stack: 1
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67],
stack: 3
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0],
stack: 2
},
{
label: 'Taxi cash',
backgroundColor: "rgba(83, 55, 219,1)",
data: [25, 10, 12, 20, 10, 12, 5],
stack: 2
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" },
stacked: true
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Look into stacked bar chart example
scales: {
yAxes: [{
stacked: true
}]
}
0๐
The options you configured are correct. It will be a bar chart, As you are providing multiple datasets for each mode of transportation, chartjs will consider this as a stacked bar chart.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0]
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" }
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Source:stackexchange.com