JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
JavaScript
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["13Aug", "14Aug", "15Aug"],
datasets: [{
label: 'Blue',
stack: 'Stack 0',
data: [240, 270, 1320],
backgroundColor: 'blue',
},
{
label: 'Orange',
stack: 'Stack 1',
data: [0, 300, 1520],
backgroundColor: 'orange',
},
{
label: 'Yellow',
data: [1500, 700, 200],
stack: 'Stack 1',
backgroundColor: 'yellow',
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});