JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.js"></script>
<canvas id="canvas" height="300">
not supported
</canvas>
JavaScript
var ctx = document.getElementById("canvas");
var data = {
labels: [
"2018-04-03",
"2018-04-04",
"2018-04-05",
"2018-04-06",
"2018-04-07",
"2018-04-08",
"2018-04-09",
"2018-04-10",
"2018-04-11",
"2018-04-12"
],
datasets: [
{
backgroundColor: "rgba(46, 142, 0, 0.2)",
data: [
{
"x": "2018-04-04",
"y": 10
},
{
"x": "2018-04-05",
"y": 13
},
{
"x": "2018-04-10",
"y": 2
},
{
"x": "2018-04-11",
"y": 13
},
{
"x": "2018-04-12",
"y": 8
}
]
},
{
backgroundColor: "rgba(255, 68, 0, 0.2)",
data: [
{
"x": "2018-04-03",
"y": 2
},
{
"x": "2018-04-04",
"y": 1
},
{
"x": "2018-04-05",
"y": 1
}
]
}
]
};
var myLineChart = new Chart(ctx, {
type: "bar",
data: data,
options: {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
stacked: true,
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD, ’YY',
}
},
ticks: {
source: 'labels',
autoSkip: true,
},
}],
yAxes: [{
type: 'linear',
stacked: true,
}]
},
}
});