JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="session-sql-activity" width="200" height="200"></canvas>
JavaScript
var datasets = [{
"data": [{
"y": 2,
"x": "2017-12-22 08:59"
}, {
"y": 18,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#32AA09",
"label": "7726bj0dhtnmt"
}, {
"data": [{
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#CF5A26",
"label": "0ks4u5nywjbdj"
}, {
"data": [{
"y": 4,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#DA43AA",
"label": "1mnbsygj75jvx"
}, {
"data": [{
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#5200A0",
"label": "39ymdt11ybwhz"
}, {
"data": [{
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#925E44",
"label": "4v1whmzv76j2z"
}, {
"data": [{
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#477BD4",
"label": "5sfyujuhwbj9n"
}, {
"data": [{
"y": 4,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#272755",
"label": "6x0zvf2mw8t6g"
}, {
"data": [{
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#F581E0",
"label": "7kpk62m5n8j9q"
}, {
"data": [{
"y": 20,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#4128A8",
"label": "7mwz4m103nn1k"
}];
var config = {
type:'bar',
data:{
datasets:datasets
},
options: {
responsive: true,
title:{
display:true,
text:"My Chart"
},
tooltips: {
mode: 'index'
},
hover: {
mode: 'index'
},
legend: {
position: 'bottom'
},
elements: { point: { radius: 0 }},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'minutes',
unitStepSize: 5,
...