[SOLVED] Hide a highchart sankey diagram node on double click

Hide a highchart sankey diagram node on double click

I have created a Sankey diagram from Highcharts.

I want to hide all the nodes which start from a particular node when i double click it.

So far, i am able to remove the path from clicked node to target node, but could not remove target node itself.

Here is the example, if you double click on "Shopping" node ( and remove the mouse from the chart ) it hides the path, but i want to remove both "Online" and "Offline" node also.

Highcharts.chart("container", {
  title: {
    text: "Cash flow"
  },
  chart: {
    events: {
      load: function() {
        let chart = this;

        chart.series[0].points.forEach((point) => {
          point.graphic.element.addEventListener("dblclick", function() {
            point.toNode.linksFrom.forEach((node) => {
              node.update({color: 'transparent', weight: 0 }, false);
            });
          });
        });
      }
    }
  },

  accessibility: {
    point: {
      valueDescriptionFormat: "{index}. {point.from} to {point.to}, " + "{point.weight}."
    }
  },
  tooltip: {
    headerFormat: null,
    pointFormat: "{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.2f} ",
    nodeFormat: "{point.name}: {point.sum:.2f}"
  },
  series: [{
    keys: ["from", "to", "weight"],
    data: [
      ["Salary", "Income", 5],
      ["Dividend", "Income", 2],
      ["Bonus", "Income", 3],

      ["Income", "Tax", 1],
      ["Income", "Shopping", 3],
      ["Income", "Invest", 6],

      ["Shopping", "Online", 1],
      ["Shopping", "Offline", 2]
    ],
    type: "sankey",
    name: "Sankey demo series"
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

Solution

You are correctly updating the path color and weight, but to fully remove the target nodes, you need to update their visibility as well. Try setting visible: false for the target nodes. Here's how you can modify your code:

point.toNode.linksFrom.forEach((node) => {
  node.update({ color: 'transparent', weight: 0 }, false);
  node.toNode.update({ visible: false }, false);
});
chart.redraw();

This ensures that both the links and the nodes are hidden when double-clicking on a node. Let me know if this works for you!