I have created fully working example here
Demo: Organization chart demo
CODE:
point: {
events: {
click: function () {
// Build a map of 'from' to 'to' relationships for quick lookups
const hierarchy = this.series.chart.series[0].data.reduce(
(acc, { from, to }) => {
if (!acc[from]) {
acc[from] = [];
}
acc[from].push(to);
return acc;
},
{}
);
// Function to find all children recursively
const findChildren = (key) => {
const children = hierarchy[key] || [];
return children.concat(
...children.map((child) => findChildren(child))
);
};
// Get all children for the current node
const childIds = findChildren(this.id);
// Filter the relevant child nodes based on 'to' values
const children = this.series.chart.series[0].data.filter(
({ options: { to } }) => childIds.includes(to)
);
// Check if all child nodes are visible
const allVisible = children.every((child) => child.visible);
// Toggle visibility of child nodes
children.forEach((child) => {
const isVisible = !allVisible;
child.setVisible(isVisible, false);
const node = this.series.nodeLookup[child.to];
if (node) {
isVisible ? node.graphic.show() : node.graphic.hide();
isVisible ? node.dataLabel.show() : node.dataLabel.hide();
}
});
// Redraw the chart to reflect changes
this.series.chart.redraw();
},
},
}
Thanks @Sebastian, I refereed your solution for implementation