JSFiddle - React, Tailwind, and code Playground
by blowsie
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="myChart" width="200" height="100"></canvas>
JavaScript
moment.locale('en', {
calendar : {
lastDay : '[Yesterday]',
sameDay : '[Today]',
nextDay : '[Tomorrow]',
lastWeek : '[Last] dddd',
nextWeek : 'dddd',
sameElse : 'L'
}
});
var ctx = document.getElementById("myChart");
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Redemptions',
backgroundColor: '#bada55',
data: [
{
x: moment().subtract(0, 'days').valueOf(),
y: 0
}, {
x: moment().subtract(1, 'days').valueOf(),
y: 1
}, {
x: moment().subtract(2, 'days').valueOf(),
y: 3
}, {
x: moment().subtract(3, 'days').valueOf(),
y: 9
}, {
x: moment().subtract(4, 'days').valueOf(),
y: 4
}, {
x: moment().subtract(5, 'days').valueOf(),
y: 0
}, {
x: moment().subtract(6, 'days').valueOf(),
y: 1
}
]
},
{
label: 'Notifications',
backgroundColor: '#79BEF8',
data: [
{
x: moment().subtract(0, 'days').valueOf(),
y: 0
}, {
x: moment().subtract(1, 'days').valueOf(),
y: 2
}, {
x: moment().subtract(2, 'days').valueOf(),
y: 7
}, {
x: moment().subtract(3, 'days').valueOf(),
y: 10
}, {
x: moment().subtract(4, 'days').valueOf(),
y: 5
}, {
x: moment().subtract(5, 'days').valueOf(),
y: 3
}, {
x: moment().subtract(6, 'days').valueOf(),
y: 6
}
...