JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<canvas id="bar-chart"></canvas>
CSS
canvas {
display: block;
background: #fff;
width: 100%;
}
JavaScript
// http://www.chartjs.org/dist/master/Chart.bundle.min.js
/*!
* Chart.js
* http://chartjs.org/
* Version: 2.6.0
*
* Copyright 2017 Nick Downie
* Released under the MIT license
* https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
*/
// JUMP
//do some time operations and then load into barChartData
var timeOperations = ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"].map(function(value){
return moment(value, "YYYY-MM-DD").format('MMM-DD').toString();
});
var barChartData = {
labels: timeOperations,
datasets: [{
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
},
{
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
};
Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;
var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
responsive: true,
legend: {
display: true,
position: "right"
},
title: {
display: false
},
scales: {
xAxes: [{
ticks: {
minRotation: 90
}
}]
}
}
});