Setonix
Posts: 16
Joined: Thu Dec 23, 2021 9:14 am

HighCharts Networkgraph move node programmatically after render

Hi,
I created a networkgraph with a simple hierarchy, but after the initial render (I set simulate = false, maxIterations = 500), I don't like the position of the center node. My example hierarchy is like (attached picture shows one more level, but that is not important for the end result I'm after):
Grandparent (main node)
- Parent 1
- - Child 1
- - Child 2
- Parent 2
- - Child 1

Then after render, the two children are positioned too close to each other, but when I drag the main node to somewhere else, the children move to a more likeable position. Originally I tried with an initial position for one of the nodes, but when the bubbles are then rendered, they move away from the initial point to something that has been calculated. When dragging one of the bubbles, the calculation repositions all the other nodes again.
So I've been trying to figure out how to get my hands on the drag-event. If I can call the drag event programmatically instead of manually dragging a node, then I can determine where I want my main node to be.
I already tried keeping a reference to the actual main node point and set the plotX and plotY, but when moving my mouse over the chart to refresh it, it only moves the node I've updated, but not the others.

So long story short: I need a simple way to move a node to a different location after it has all rendered, whereby all other nodes are automatically repositioned, the same that happens when actively dragging a node.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: HighCharts Networkgraph move node programmatically after render

Hello Setonix,

Welcome to our forum and thanks for contacting us with your question!

Unfortunately, there is no attached image you mentioned. Your question seems to be a little intricate, so for better understanding, I would like to ask you for preparing the demo showing your chart. You can start here: https://jsfiddle.net/BlackLabel/o62f4jtu/

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Setonix
Posts: 16
Joined: Thu Dec 23, 2021 9:14 am

Re: HighCharts Networkgraph move node programmatically after render

I've updated the Fiddle example which comes closer to what I have and in the comments I also wrote what I expect to be able to do.
https://jsfiddle.net/2k6o3svg/2/
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: HighCharts Networkgraph move node programmatically after render

Hi,

Thank you for sharing the demo!

The structure and layout can be set by layoutAlgorithm. The initial layout algorithm for positioning nodes can be set in initialPositions property.

API Reference:
https://api.highcharts.com/highcharts/6 ... lPositions

A network graph is one of the complex ones, so the answer is not obvious and I need to consult it with a more experienced developer. I'll give you an answer as soon as possible.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: HighCharts Networkgraph move node programmatically after render

Hello again,

Good news! The solution wasn't so complicated as I thought. The only thing that you need you need to set is fixedPosition for the main node.

Code: Select all

chart: {
   events: {
      load() {
        this.series[0].nodes[0].fixedPosition = true;
      }
   }
}

Demo:
https://jsfiddle.net/BlackLabel/dgf8w6o2/

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Stock”