Collapse/Expand Child Nodes - highcharts

Question

In Highcharts Organization Chart, is there a way to hide the people below. So for instance, if you have the CEO and 5 people report to them. Can I add a button to the CEO node that will hide all children once clicked? Even deeper if the CTO reports to the CEO but the CTO has 9 people report to her, can I hide the CTO children and the CEO? Thanks so much.

Answer 1

I prepared an example of how to hide/show nodes under the CEO node on custom Highcharts button. By using this logic you should be able to create the rest of the wanted collapse buttons.
Demo: https://jsfiddle.net/BlackLabel/7orp61kx/
Render responsive button on render event:
events: {
render() {
let chart = this,
points = chart.series[0].points,
ceoPoint = points[1].toNode,
buttonX = ceoPoint.dataLabel.translateX,
buttonY = ceoPoint.dataLabel.translateY + chart.plotTop;
// check if button exist after window resize
if (chart.ceoButton) {
chart.ceoButton.destroy();
}
// create button
chart.ceoButton = chart.renderer.button('hide/show children', buttonX, buttonY, hideShow).add()
// translate button
chart.ceoButton.translate(buttonX - chart.ceoButton.getBBox().width, buttonY + chart.ceoButton.getBBox().height / 3)
}
}
hideShow function:
function hideShow() {
chart.series[0].points.forEach((p, i) => {
if (i > 1) {
if (p.state === "") {
p.graphic.hide();
p.toNode.graphic.hide();
p.toNode.dataLabel.hide();
p.state = 'hidden';
} else {
p.graphic.show();
p.toNode.graphic.show();
p.toNode.dataLabel.show();
p.state = ""
}
}
})
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/highcharts/chart.events.render