Chart JS Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.js"></script>
<div id="myLineChart2LegendContainer">
  <div id="myLineChart2Legend"></div>
</div>
<canvas id="myChart2" height="220" width="800"></canvas>
<canvas id="myChart" height="220" width="800"></canvas>

CSS

#myLineChart2Legend {
  display: inline-block;
}
#myLineChart2LegendContainer {
  text-align: center;
  margin-bottom: 25px;
}
.chart-legend-label-text  {
  background-color: white;
  border: 1px solid darkgrey;
  cursor: pointer;
  padding: 0 3px;
  margin: 0 5px;
}
.chart-legend-label-text:nth-child(1)  {
  color: rgb(0, 153, 0);
}
.chart-legend-label-text:nth-child(2)  {
  color: #D9534F;
}
.chart-legend-label-text:nth-child(3)  {
  color: #87a3c1;
}
.chart-legend-label-text:hover  {
  background-color: lightgreen;
}

JavaScript

Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.global.responsive = true;
Chart.defaults.global.elements.line.borderDashstepped = true;
Chart.defaults.global.elements.line.fill = false;
Chart.defaults.global.elements.line.borderWidth = 2;
Chart.defaults.global.elements.line.borderDash = [];
Chart.defaults.global.elements.line.stepped = true;
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.layout = Chart.defaults.global.layout || {};
Chart.defaults.global.layout.padding = {};
Chart.defaults.global.layout.padding.top = 0;

var ctx = $("#myChart");
var ctx2 = $("#myChart2");
var data = {
  labels: ['7:00 AM', '7:05 AM', '7:10 AM', '7:15 AM', '7:20 AM', '7:25 AM', '7:30 AM', '7:35 AM', '7:40 AM', '7:45 AM', '7:50 AM', '7:55 AM', '8:00 AM'
           , '8:05 AM', '8:10 AM', '8:15 AM', '8:20 AM', '8:25 AM', '8:30 AM', '8:35 AM', '8:40 AM', '8:45 AM', '8:50 AM', '8:55 AM', '9:00 AM', '9:05 AM', '9:10 AM', '9:15 AM', '9:20 AM', '9:25 AM', '9:30 AM', '9:35 AM', '9:40 AM', '9:45 AM', '9:50 AM', '9:55 AM', '10:00 AM', '10:05 AM', '10:10 AM', '10:15 AM', '10:20 AM', '10:25 AM', '10:30 AM', '10:35 AM', '10:40 AM', '10:45 AM', '10:50 AM', '10:55 AM', '11:00 AM', '11:05 AM', '11:10 AM', '11:15 AM', '11:20 AM', '11:25 AM', '11:30 AM', '11:35 AM', '11:40 AM', '11:45 AM', '11:50 AM', '11:55 AM', '12:00 PM', '12:05 PM', '12:10 PM', '12:15 PM', '12:20 PM', '12:25 PM', '12:30 PM', '12:35 PM', '12:40 PM', '12:45 PM', '12:50 PM', '12:55 PM', '1:00 PM', '1:05 PM', '1:10 PM', '1:15 PM', '1:20 PM', '1:25 PM', '1:30 PM', '1:35 PM', '1:40 PM', '1:45 PM', '1:50 PM', '1:55 PM', '2:00 PM', '2:05 PM', '2:10 PM', '2:15 PM', '2:20 PM', '2:25 PM', '2:30 PM', '2:35 PM', '2:40 PM', '2:45 PM', '2:50 PM', '2:55 PM', '3:00 PM', '3:05 PM', '3:10 PM', '3:15 PM', '3:20 PM', '3:25 PM', '3:30 PM', '3:35 PM', '3:40 PM', '3:45 PM', '3:50 PM', '3:55 PM', '4:00 PM', '4:05 PM', '4:10 PM', '4:15 PM', '4:20 PM', '4:25 PM', '4:30 PM', '4:35 PM', '4:40 PM', '4:45 PM', '4:50...