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. E.g. 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?
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.