Load Tooltip faster during onHover of Legend Doughnut chart

Question

I currently have an implementation exactly like the answer shown in this answer which I am going to include here for clarity. If you run the code and hover between items in the legend, you will notice that if you hover over items quickly, the tooltip on the chart will not display.

Compare this to hovering over items in the Doughnut chart. The functionality is much faster.

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'left',
        onHover: (evt, item, legend) => {
          const chart = legend.chart;
          const tooltip = chart.tooltip;

          const chartArea = chart.chartArea;
          tooltip.setActiveElements([{
            datasetIndex: 0,
            index: item.index,
          }], {
            x: (chartArea.left + chartArea.right) / 2,
            y: (chartArea.top + chartArea.bottom) / 2,
          });


          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.4.1/chart.js"></script>
</body>

cfeltz · Answer 1 · 2021-08-12T14:54:27.997

For those who have ended reached this same problem I would like to share my findings.

What ends up happening is the tooltip requires too much time for it to "disappear". There are different 'transitions', 'animation', or 'animations' that you can edit from the documentation, that will all do different things. I could not find out how to speed the "disappearing" up.

Instead, implement the example External tooltip that is given in the documentation for Chart.js. This tooltip, by default, does not have the same problems that the default tooltip has with appearing/disappearing.

Edit: I would like to provide some things that I learned that may be useful for implementing the external tooltip.

The example external tooltip is coded so that it uses the logic of the original tooltip. This can be good, however if you want the functionality of hovering over the legend and showing the tooltip, I would advise adding a 'flag' to that is true if you are hovering over a label, and false otherwise. This should be added as a check to show the tooltip.
When you are setting active elements in the onHover of the legend and you have set 'external' to the externalTooltipHandler, you the externalTooltipHandler will automatically know to make items out of the active elements array. You should NOT call or pass the externalTooltipHandler, you should just set 'external: externalTooltipHandler'

Let me know if I can clarify anything here, I have spent more time than I would like on this tooltip.

Load Tooltip faster during onHover of Legend Doughnut chart

1 Answers1