79474866

Date: 2025-02-28 08:13:07
Score: 0.5
Natty:
Report link

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

Reasons:
  • Blacklisted phrase (0.5): Thanks
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Sebastian
  • Low reputation (0.5):
Posted by: Amol Ghatol