tooltip on legend item

[d1manson]

I want to provide a sentence or two of in-depth explanation when the user hovers over a dataset's entry in the legend.

I understand that the legend (as with the rest of the chart) is rendered on a canvas rather than with the DOM, so I have to hook into the chartjs internals. After much googling, I have got as far as:

  Chart.plugins.register({
    afterEvent: function(chart, e) {
      if(!e.type=="mousemove"){
        return;
      } 
      chart.legend.legendHitBoxes.forEach((box,ii) => {
        if(!(e.x > box.left && e.x < box.left + box.width &&
             e.y > box.top && e.y < box.top + box.height)){
          return
        }
        console.log(chart.data.datasets[ii].label); 
       // imagine I have a .tooltipText property for the dataset or something
      });
  });

which logs the dataset label when I hover over it in the legend. Next I need to show a tooltip.

Am I going about this in the right way so far? How do I show a tooltip?

[etimberg]

@d1manson in general you're going about it the right way. You might be able to use the legend onHover property to avoid needed to have all kinds of internal look-ups in the legend.

To show the tooltip, I think you might get away with creating a new Chart.Tooltip object but that might be overkill for your needs. In your plugin you could always have some draw code that would draw a tooltip like box and then in the event handler you would set some options on the chart and call update() to make sure that it rendered afterwards

[d1manson]

OK, I see the onHover in legend options, and it does seem to work...

new Chart(canvas, {
  type: 'line',
  data: ...,
  options: {
    legend: {
      onHover: function(e, target){
          var idx = target.datasetIndex;
          console.log("legend " + idx);
  }}}});

however this seems to fire for mouse-move, when what I want is mouse-enter and mouse-leave. I see I can also do something with the general hover options

 options: {
   hover: {
     onHover: function(e, targets){
    }}};

but that doesn't seem be particularly relevant to the legends...?

In terms of tooltips, could you give me a pointer to some code or docs.

Thanks for the quick reply! :)

[etimberg]

Sorry for the delayed reply on this. I think you could make a modification to the legend plugin to trigger onHover on mouseenter or mouseleave instead of mousemove. I think all you have to do is change https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.legend.js#L451-L454

I think you can even patch it by overwriting Chart.Legend.prototype.handleEvent but it is a private function that can change at any time.

[etimberg]

Closing as out of date