ChartJS Line Chart

Multiple Line Chart

by Leelenaleee

HTML

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

CSS

canvas { background-color : #eee;
}

JavaScript

var options = {
  type: 'line',
  data: {
    datasets: [
	    {
	      label: '# of Votes',
	      data: [{'date': '15/06', 'bought': 2}, {'date': '17/06', 'bought': 5}, {'date': '20/06', 'bought': 3}],
      	borderWidth: 1
    	}
		]
  },
  options: {
  	plugins: {
    	title: {
      	display: true,
        text: 'Title placeholder'
      }
    },
  	parsing: {
    	xAxisKey: 'date',
      yAxisKey: 'bought'
    }
  },
  plugins: [{
  	id:'f',
    afterDraw: (chart, args, options) => {
    	chart.titleBlock.options.text = 'FFFF';
      chart.update();
    }
  }]
}

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