ChartJS Line Chart

Multiple Line Chart

by Felipe Alfaro

HTML

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

JavaScript

var options = {
  type: 'doughnut',
  data: {
    labels: ["Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
	    {
	      label: '# of Votes',
	      data: [12, 19, 3, 5, 2],
      	borderWidth: 1,
        backgroundColor: ["Blue", "Yellow", "Green", "Purple", "Orange"]
    	}
		]
  },
  options: {
  },
  plugins: [
  	{
    	id: 'defaultBack',
      beforeDatasetsDraw: (chart) => {
      	const { ctx, canvas } = chart;
        const {top, left, width, height} = chart.chartArea;
      	const x = left + width / 2;
      	const y = top + height / 2;
        const outerRadius = chart._metasets[0].data[1].outerRadius;
        const innerRadius = chart._metasets[chart._metasets.length-1].data[0].innerRadius;

        ctx.beginPath()
        ctx.arc(x, y, innerRadius, 0, Math.PI*2, false); 
        ctx.arc(x, y, outerRadius, 0, Math.PI*2, true); 
        ctx.fillStyle = 'red';
        ctx.fill();
      }
    }
  ]
}

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