ChartJS Line Chart

Multiple Line Chart

by Glutamat

HTML

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

CSS

canvas { background-color : #eee;
}

JavaScript

var stat1 = [{"month":"June 2020","value":0},{"month":"May 2020","value":0},{"month":"April 2020","value":0},{"month":"March 2020","value":0},{"month":"February 2020","value":30},{"month":"January 2020","value":182},{"month":"December 2019","value":143},{"month":"November 2019","value":111},{"month":"October 2019","value":103},{"month":"September 2019","value":128},{"month":"August 2019","value":71},{"month":"July 2019","value":129},{"month":"June 2019","value":98}]
var stat2 = [{"month":"June 2020","value":10},{"month":"May 2020","value":25},{"month":"April 2020","value":75},{"month":"March 2020","value":80},{"month":"February 2020","value":30},{"month":"January 2020","value":182},{"month":"December 2019","value":23},{"month":"November 2019","value":123},{"month":"October 2019","value":50},{"month":"September 2019","value":128},{"month":"August 2019","value":71},{"month":"July 2019","value":129},{"month":"June 2019","value":98}];

var lkp = [stat1, stat2].flat().reduce((acc, cur) => {
	const {month, value} = cur;
	acc[month] = acc[month] || [];
	acc[month].push(value);
	return acc;
}, {});

var labels = Object.keys(lkp);
var colors = ['red', 'green']
var datasets = [0, 1].map((index) => {
	const data = labels.map(label => lkp[label][index]);
  return {
  	data,
    backgroundColor: colors[index],
  }
});


console.log (datasets);
var options = {
  type: 'bar',
  data: {
    labels,
    datasets,
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false
        }
      }]
    }
  }
}

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