Highcharts | Network Graph - Is there a way to expand leaf nodes on click of the Parent node? - reactjs

Question

Highcharts | Network Graph - Is there a way to expand leaf nodes on click of the Parent node?
Sample Code`Highcharts.addEvent(
Highcharts.Series,
'afterSetOptions',
function (e) {
var colors = Highcharts.getOptions().color
i = 0,
nodes = {};
if (
this instanceof Highcharts.seriesTypes.networkgraph &&
e.options.id === 'lang-tree'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'Parent') {
nodes['Parent'] = {
id: 'Parent',
marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 10
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
}
);`

Answer 1

Currently, this feature is not available to achieve from the API options without any customization.
Please take a look at this demo where you can find some custom functions to collapse the child nodes on the click event: https://jsfiddle.net/BlackLabel/9mv0ny3j/
point: {
events: {
click: function() {
var point = this;
point.linksFrom.forEach(link => {
if (link.toNode.isHidden) {
link.graphic.show();
link.toNode.graphic.css({
opacity: 1
});
link.toNode.dataLabel.css({
opacity: 1
})
link.toNode.isHidden = false;
} else {
link.graphic.hide();
link.toNode.graphic.css({
opacity: 0
});
link.toNode.dataLabel.css({
opacity: 0
})
link.toNode.isHidden = true;
}
})
}
}
},
API: https://api.highcharts.com/highcharts/series.line.events.click