ChartJS Line Chart

Multiple Line Chart

by Cupidvogel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="120"></canvas>
</body>

CSS

canvas { background-color : #eee;
width:600px !important;
  height:120px !important;
  background: rgb(254, 249, 206);
}

JavaScript

var options = {
  type: 'line',
  data: {
    labels: ["11 PM", "12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM"],
    datasets: [
	    {
	      label: 'Temperature',
	      data: [12, 19, 18, 15, 12, 13, 21, 19],
      	borderWidth: 1
    	}
		]
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false
        },
        gridLines: {
                  display: false
               }
      }],
      xAxes: [{
        gridLines: {
                  display: false
               }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);