JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<canvas id="clients" width="500" height="350"></canvas>
CSS
small
{
display: block;
margin-top: 1em;
}
JavaScript
var barData = {
labels : ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
datasets : [{
label : '2010 customers #',
backgroundColor : '#382765',
data : [2500, 1902, 1041, 610, 1245, 952]
}, {
label : '2014 customers #',
backgroundColor : '#7BC225',
data : [1000, 1689, 1318, 589, 1199, 1436]
}]
};
var context = document.getElementById('clients').getContext('2d');
var clientsChart = new Chart(context, {
type : 'bar',
data : barData,
options : {
scales : {
xAxes : [{
stacked : true,
}],
yAxes : [{
stacked : true
}]
}
}
});