JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
JavaScript
var config = {
type: 'horizontalBar',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Dataset 1",
backgroundColor: "rgba(154,178,96,0.5)",
hoverBackgroundColor: "rgba(154,178,96,1)",
data: [10, 15, 5, 81, 55],
}, {
label: "Dataset 2",
backgroundColor: "rgba(197,213,167,0.5)",
hoverBackgroundColor: "rgba(197,213,167,1)",
data: [90, 85, 95, 19, 45]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);