Chartjs-Chart.js – change which data the legend uses for the coloured box

by

2👍

✅

You can use the generateLabels function as described here.

Please take a look at below runnable sample code and see how it works.

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: 'My Dataset',
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => {
            let ds = chart.data.datasets[0];
            let color = ds.backgroundColor[ds.backgroundColor.length - 1];
            return [{
              datasetIndex: 0,
              text: ds.label,
              fillStyle: color,
              strokeStyle: color
            }];
          }
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>

0👍

Following up with @uminder’s answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:

options: {
  responsive: false,
  plugins: {
    legend: {
      labels: {
        generateLabels: chart => {
          let ds = chart.data.datasets[0];
          let color = ds.backgroundColor[ds.backgroundColor.length - 1];
          return [{
            datasetIndex: 0,
            text: ds.label,
            fillStyle: color,
            strokeStyle: color,
+           hidden: !chart.isDatasetVisible(0)
          }];
        }
      }
    }
  }
}

Leave a comment