[Chartjs]-Chart.js – show tooltip when hovering on legend

by

0👍

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 = new Chart('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();
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

0👍

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

const chart = new Chart('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 = new MouseEvent('mousemove', {
          clientX: rect.left + point.x,
          clientY: rect.top + point.y
        });
        chart.canvas.dispatchEvent(e);
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Leave a comment