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>
<small>Demo created by <a href="https://twitter.com/AurelioDeRosa">@Aurelio De Rosa</a></small>
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,
}]
}
}})