How to populate dataset legends in chart.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var myChart = new Chart(ctx, {
  type: 'line', // or any other chart type
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3'], // x-axis labels
    datasets: [{
      label: 'Dataset 1',
      data: [1, 2, 3], // y-axis values
      backgroundColor: 'rgba(255, 99, 132, 0.2)' // optional background color
    },
    {
      label: 'Dataset 2',
      data: [3, 2, 1],
      backgroundColor: 'rgba(54, 162, 235, 0.2)'
    }]
  },
  options: {
    legend: {
      display: true, // set to true to display the legend
      position: 'top', // choose 'top', 'bottom', 'left', 'right' or 'chartArea' for the position
      labels: {
        fontColor: 'rgb(255, 99, 132)' // optional font color for legend labels
      }
    }
  }
});