How to detect when Tooltip closes in chart.js?

Question

I'm using chart.js for a web project and it's working pretty fine. However, I do have one question. I'm trying to connect a line graph with n data points to a list of n html divs. When the user hovers over data point 2, div 2 will be highlighted and a function is called. That does work. However, when the user unhovers data point 2, div 2 should change its style back to the default style.

My question is: How can I detect the mouseout event on data points?

That is how I define what happens when the data point is hovered.

myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
      title: {
      ...
      },
      tooltips: {
        enabled: true,
        custom: function(tooltip) {
          if (!tooltip) {
              return;
          }

          if(tooltip.dataPoints != null) {
            // here, the function that highlights the respective div is called, and it works fine
          }
        }
      }
    }
});

Is there such a thing for unhovering? I found out that there is a global events -> mousout option, but I don't figure out how to use it and I also think that it references the whole chart.

Thank you!

Answer 1

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
})

var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    showAllTooltips: true
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Answer 2

Not sure if this will help you, but I had a similar issue with stacked bar charts. I wanted to show values at the top of the bars, but I found that if the tooltips were open the values were written over the top of the tooltips, making both unreadable. I decided I wanted to show the values only if the tooltips were not showing (and were not rendered if a tooltip was open).

Turns out I can use the tooltip's opacity setting to determine if the tooltip is showing or not. This is very over-simplified, but this is what I came up with:

        options: {
            tooltips: {
                custom: function( tooltip ) {
                    if( tooltip.opacity > 0 ) {
                        console.log( "Tooltip is showing" );
                    } else {
                        console.log( "Tooltip is hidden" );
                    }
                    return;
                }
            }
        }

Having worked that out, I was then able to save a global variable that I could test elsewhere to see if the tooltip was showing.