JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<canvas id="chart" width="600" height="400"></canvas>
JavaScript
requirejs.config({
paths: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min',
'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment',
//'chartjs': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart'
// should work, but Moment.js is not found by Chart.js
'chartjs': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle'
// works, but includes Moment.js twice
}
});
require(['jquery', 'moment', 'chartjs'], function($, moment, Chart) {
function day(offset) {
return moment().add(offset, 'd').toDate();
}
var configuration = {
type: 'line',
data: {
labels: [day(-2), day(-1), day(0), day(1), day(2)],
datasets: [{
label: 'Quantity per day',
data: [3, 5, 2, 8, 1]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
round: 'day'
}
}]
}
}
}
var context = document.getElementById('chart')
var chart = new Chart(context, configuration)
})