Chart.js - Show Tooltip When Hovering On Legend

I recently upgraded my version of Chart.js from v2.3 to v2.7.1, which broke an existing functionality where the specified segment in a doughnut chart would be active (hover color,

Solution 1:

Here's a solution based on your approach that works with the current version of Chart.js (2.9.3).

Beside onHover, you also have to defined an onLeave callback function. This makes sure to hide the tooltip and revert the hover effect as soon as the mouse pointer leaves the legend label.

const chart = newChart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [4, 5, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
      hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
      borderWidth: 1,
      hoverBorderWidth: 3
    }]
  },
  options: {
    legend: {
      onHover: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const activeSegment = chart.getDatasetMeta(0).data[index];
        activeSegment._model.backgroundColor = activeSegment._options.hoverBackgroundColor;
        activeSegment._model.borderWidth = activeSegment._options.hoverBorderWidth;
        chart.tooltip._active = [activeSegment];
        chart.tooltip.update();
        chart.draw();
      },
      onLeave: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const activeSegment = chart.getDatasetMeta(0).data[index];
        activeSegment._model.backgroundColor = activeSegment._options.backgroundColor;
        activeSegment._model.borderWidth = activeSegment._options.borderWidth; 
        chart.tooltip._active = [];
        chart.tooltip.update();
        chart.draw();
      }
    }
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvasid="chart"height="80"></canvas>

Solution 2:

Here's a solution based on this anwser from timclutton that works with the current version of Chart.js (2.9.3).

const chart = newChart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [4, 5, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
      hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
      borderWidth: 1,
      hoverBorderWidth: 3
    }]
  },
  options: {
    legend: {
      onHover: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const rect = chart.canvas.getBoundingClientRect();
        const point = chart.getDatasetMeta(0).data[index].getCenterPoint();
        const e = newMouseEvent('mousemove', {
          clientX: rect.left + point.x,
          clientY: rect.top + point.y
        });
        chart.canvas.dispatchEvent(e);
      }
    }
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvasid="chart"height="80"></canvas>