i want to create a bar chart that would look like below:
i tried creating a stacked bar chart with the documentation given on the website. https://www.chartjs.org/docs/latest/samples/bar/stacked.html
but could not find a way to create a chart as per my requirement.
i have tried below example
<canvas id="myChart" style="vertical-align:left;z-index:1; height: 350px"> </canvas>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['T1', 'T2', 'T3', 'T4'],
datasets: [{
label: 'Done',
backgroundColor: "#caf270",
data: [12, 59, 5, 56],
}, {
label: 'Running',
backgroundColor: "#45c490",
data: [12, 59, 5, 56],
}, {
label: 'Todo',
backgroundColor: "#008d93",
data: [12, 59, 5, 56],
}, {
label: 'KO',
backgroundColor: "#2e5468",
data: [12, 59, 5, 56],
}],
},
options: {
tooltips: {
displayColors: true,
callbacks:{
mode: 'x',
},
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
},
type: 'linear',
}]
},
responsive: true,
maintainAspectRatio: false,
legend: { position: 'top' },
}
});
</script>
