Override default highlighting on hover in networkgraph - highcharts

Question

I'm drawing a binomial tree using a network graph by fixing initial positions for each node.
If I hover over a node, it highlights each node that's connected to that node by default.
How can I override this to highlight only the antecedent nodes (i.e. from right to left through the paths from the hovered node back to the single node on the far left).
I tried picking up the previous two nodes on the end of the links connected to the hovered node, and continuously iterating until there's no more antecedent nodes, but it's not working out.
function iterateBack(node) {
console.log("Node " + node.id);
var previousNodes = node.linksTo
if (previousNodes != null) {
previousNodes.forEach(function(l) {
var precedingNode = l.fromNode;
precedingNode.update({
//color: 'black',
active: true
});
iterateBack(precedingNode);
});
}
}
Highcharts.chart('container', {
tooltip: {
enabled: false
},
credits: {
enabled: false
},
chart: {
type: 'networkgraph',
margin: 20,
height: '100%',
},
plotOptions: {
series: {
cursor: 'crosshair',
stickyTracking: false,
point: {
events: {
mouseOver: function() {
//this.active = true;
iterateBack(this);
this.linksFrom.forEach(function(l) {
l.update({
active: false
});
});
},
mouseOut: function() {
this.linksTo.forEach(function(l) {
l.update({
active: false
});
});
this.linksFrom.forEach(function(l) {
l.update({
active: false
});
});
}
}
},
}
},
series: [{
marker: {
radius: 15,
lineWidth: 2,
lineColor: 'black',
},
layoutAlgorithm: {
maxIterations: 1,
initialPositions: function() {
var chart = this.series[0].chart,
width = chart.plotWidth,
height = chart.plotHeight;
this.nodes.forEach(function(node, i) {
var initialX = 0;
var initialY = 500;
var distance = 80;
var identifiers = node.id.split(",");
var round = identifiers[0] - 1;
var level = identifiers[1] - 1;
node.plotX = initialX + (round * distance * 2);
node.plotY = initialY - (round * distance) + (level * 2 * distance);
});
}
},
keys: ['from', 'to'],
data: [
['1,1', '2,1', 'win'],
['1,1', '2,2', 'win'],
['2,1', '3,1', 'win'],
['2,1', '3,2', 'lose'],
['2,2', '3,2', 'win'],
['2,2', '3,3', 'lose'],
['3,1', '4,1', 'win'],
['3,1', '4,2', 'lose'],
['3,2', '4,2', 'win'],
['3,2', '4,3', 'lose'],
['3,3', '4,3', 'win'],
['3,3', '4,4', 'lose'],
['4,1', '5,1', 'win'],
['4,1', '5,2', 'lose'],
['4,2', '5,2', 'win'],
['4,2', '5,3', 'lose'],
['4,3', '5,3', 'win'],
['4,3', '5,4', 'lose'],
['4,4', '5,4', 'win'],
['4,4', '5,5', 'lose'],
['5,1', '6,1', 'win'],
['5,1', '6,2', 'lose'],
['5,2', '6,2', 'win'],
['5,2', '6,3', 'lose'],
['5,3', '6,3', 'win'],
['5,3', '6,4', 'lose'],
['5,4', '6,4', 'win'],
['5,4', '6,5', 'lose'],
['5,5', '6,5', 'win'],
['5,5', '6,6', 'lose']
],
nodes: [{
id: '1,1'
},
{
id: '2,1'
},
{
id: '2,2'
},
{
id: '3,1'
},
{
id: '3,2'
},
{
id: '3,3'
},
{
id: '4,1'
},
{
id: '4,2'
},
{
id: '4,3'
},
{
id: '4,4'
},
{
id: '5,1'
},
{
id: '5,2'
},
{
id: '5,3'
},
{
id: '5,4'
},
{
id: '5,5'
},
{
id: '6,1'
},
{
id: '6,2'
},
{
id: '6,3'
},
{
id: '6,4'
},
{
id: '6,5'
},
{
id: '6,6'
}
],
}]
})

Answer 1

Overwrite the default setState method from networkgraph Point class prototype and use your iterateBack function in mouse over event.
(function(H) {
H.seriesTypes.networkgraph.prototype.pointClass.prototype.setState = function() {
H.Point.prototype.setState.apply(this, arguments);
}
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/ua72mrqp/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts