ChartJS Line Chart

Multiple Line Chart

by koh_edwin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="50"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var options = {

type: 'line',
  data: {
    labels: ["12", "19", "3", "5", "2", "3", "12", "19", "3", "5", "2", "3", "2", "3", "12", "19", "3", "5"],
    datasets: [{
      pointHoverRadius:0,
      pointRadius:0,
//      data: [{x: "2017-10-08", y: 12}, {x: "2017-10-04", y: 12}, {x: "2017-09-28", y: 5}, {x: "2017-09-08", y: 28}],
//      data: [{t: '2017-10-08 00:00:00', y: 12}, {t: '2017-10-04 00:00:00', y: 12}, {t: '2017-09-28 00:00:00', y: 5}, {t: '2017-09-08 00:00:00', y: 28}],
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 2, 3, 12, 19, 3, 5],
      borderWidth: 1
    	}]
  },
  
  options: {
  	legend: {
    	display: false
    },
    tooltips: {
    	enabled: false
    },
  	scales: {
    	yAxes: [{
        display: false,
        ticks: {
					reverse: false
        }
      }]
    }
  }
  
}

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