Goal:
Each bar should have a total sum on top of the bar. For instance, Bike’s total sum is 23.
Problem:
Is it possible to do it in this chartjs?
Other:
https://jsbin.com/leduqarini/edit?html,output
<head>
<title>ChartJS Stacked Bar Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Chart JS Stacked Chart </h3>
<div>
<canvas id="stackedChartID"></canvas>
</div>
<script>
// Get the drawing context on the canvas
var ctx = document.getElementById("stackedChartID").getContext('2d');
var myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ["bike", "car", "scooter", "truck", "auto", "Bus"],
datasets: [{
label: 'worst',
backgroundColor: "blue",
data: [17, 16, 4, 11, 8, 9],
datalabels: {
align: "center",
anchor: "center",
font:{
size: "10px",
},
padding: "0px",
color: "#000",
},
}, {
label: 'Okay',
backgroundColor: "green",
data: [14, 2, 10, 6, 12, 16],
datalabels: {
align: "center",
anchor: "center",
font:{
size: "10px",
},
padding: "0px",
color: "#000",
},
}, {
label: 'bad',
backgroundColor: "red",
data: [2, 21, 13, 3, 24, 7],
datalabels: {
align: "center",
anchor: "center",
font:{
size: "10px",
},
padding: "0px",
color: "#000",
},
}],
},
options: {
plugins: {
title: {
display: true,
text: 'Stacked Bar chart for pollution status'
},
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
</body>
</html>