How to add onHover action for pointStyle legend in order to display the tooltip and highlight the corresponding data of the chart

[harmin-parra]

Hello

I have this pie chart with a point style legend

const data = {
  labels: [
    'Green',
    'Red',
    'Blue'
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      '#33CC33',
      '#FF3333',
      '#66B2FF',
    ],
  }]
};


const config = {
  type: 'pie',
  data: data,
  options: {
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          usePointStyle: true,
        },
      }
    }
  }
};

var ctx = document.getElementById('canvas');
new Chart(ctx, config);

How can I add onHover action to the legend, so that every time there is a mouse-over on a labe, the following 2 things happen :

• The corresponding data of the pie chart gets highlighted
• The tooltip is displayed for the corresponding data

Thanks