Chartjs-How to change legend icon on hover Chartjs

by

0👍

✅

Yes this is possible, you can update the pointStyle of the given dataset you are hovering, you can pass any of the predefined pointStyles of chart.js or an image as decribed in the documentation (https://www.chartjs.org/docs/master/configuration/elements.html#point-styles)

Example:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true
        },
        onHover: (evt, item, legend) => {
          legend.chart.data.datasets[item.datasetIndex].pointStyle = 'rectRot'
          legend.chart.update();
        },
        onLeave: (evt, item, legend) => {
          legend.chart.data.datasets[item.datasetIndex].pointStyle = ''
          legend.chart.update();
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<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>

Leave a comment