Highcharts Gantt - Show Tooltip on Dependency Path Hover

Question

I'm trying to figure out an approach to add hover-over tooltips on the Highcharts Gantt dependency pathway; but am not sure the best approach as there doesn't seem to be a native config property to interact with the dependency pathways and endpoints.

I'm starting with the approach of binding a mouseenter event on the rendered .highcharts-point-connecting-path class; however, the returned object doesn't appear to have any identifying data attributes to help tie the mouseenter object to an object that holds the tooltip data.

$('#gchart-container').on('mouseenter','.highcharts-point-connecting-path',function(event) {
    console.log( this );
});

// returns
// <path fill="none" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path highcharts-color-4" d="M 17.5 125.5 L 30.5 125.5 L 30.5 100.5 L 30.5 100.5 L 30.5 25.5 L 17.5 25.5"></path>

Since I already have all the original series data stored in my $data object, if there was a way to add custom data properties to the series dependency that would show on the HTML node, then this solution would work. Eg adding a custom attribute like data-series-id or something:

// <path fill="none" data-series-id="aa33233dd" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path high..... blah blah blah"></path>

Then $data['aa33233dd'] could be accessed to get the appropriate info... in theory.

Any ideas? Or is there a way better approach to do this?

Answer 1

I think that a better approach will be to create this custom functionality inside the load callback, where you can have access to the whole chart.

Here is my guideline: https://jsfiddle.net/BlackLabel/1v0oquaf/

Code:

 chart: {
    events: {
      load() {
        let chart = this;

        setTimeout(function() {
          chart.pathfinder.connections[0].pathfinder.group.element.onmouseover = function() {
            console.log(chart)
          }
        }, 100)
      }
    }
  },

I use the setTimeout because it seems that the load function triggers before the path has been rendering.

API: https://api.highcharts.com/gantt/chart.events.load