Highlight Highcharts Organization Chart nodes - highcharts

Question

I'm using Highcharts to create organization charts that where each node can be collapsed when clicked as in provided example : http://jsfiddle.net/vegaelce/83uktasc/
I would like to highlight the full path (from top level parent until the child node) when the mouse hover a node.
There is an example here : https://www.highcharts.com/blog/tutorials/how-to-use-an-org-chart-more-effectively/
I saw that the highlighting is provided in
#import 'https://code.highcharts.com/css/highcharts.css';
but it only highlights the first level parent.
How to achieve that ?

Answer 1

You can make the colors more bright in a similar way as the collapsing is implemented. Example:
const operateChildren = (point, operation) => {
point.linksFrom.forEach(link => {
operation([
link.toNode.graphic,
link.graphic,
link.toNode.dataLabel
]);
operateChildren(link.toNode, operation);
});
};
const hideElements = (elements) => {
elements.forEach(element => {
element.hide();
});
}
const showElements = (elements) => {
elements.forEach(element => {
element.show();
});
}
const highlighElements = (elements) => {
const color = elements[0].attr('fill');
elements[0].attr({
fill: Highcharts.Color(color).brighten(0.3).get()
});
};
Highcharts.chart('container', {
plotOptions: {
series: {
point: {
events: {
click: function() {
if (this.linksFrom && this.linksFrom[0]) {
if (this.linksFrom[0].graphic.visibility === "hidden") {
operateChildren(this, showElements);
} else {
operateChildren(this, hideElements);
}
}
},
mouseOver: function() {
if (this.linksFrom) {
highlighElements([this.graphic]);
operateChildren(this, highlighElements);
}
}
}
},
...
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/s70ujvwy/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Color