Angular 7 Highchart Node.marker not working on page load

Question

I am using Angular 7 with Highchart at my dashboard which loads at first. When the page is loaded I want the marker to be of radius:50 but when the page is loaded it does not set the radius to 50. When I click to other router link and come back then it works perfectly fine. I have replicate the problem in Stackblitz.

When the page is loaded at first it won't displays correctly when I uncomment the debugger in addColours() it works as expected. I know I am doing something wrong that some part of the code is executed prior to the formation of graph or some of the file is getting delayed in loading.

I have tried modifying like this as well

let highchart: any = Highcharts;
Highcharts.addEvent(Highcharts.Series, 'afterSetOptions', function (e: any) {
  var colors = Highcharts.getOptions().colors, i = 0, nodes = {};
  if (this instanceof highchart.seriesTypes.networkgraph &&
    e.options.id === 'network-budget') {
      ---- doing my stuff
    }

I see that you are using not official Highcharts Angular wrapper. Try to reproduce your case using the officially supported wrapper: https://github.com/highcharts/highcharts-angular — Sebastian Wędzel, Apr 23 '20 at 13:51
Which one is the official `highcharts-angular` or `angular-highcharts` — Iswar, Apr 24 '20 at 04:43
using `highchart-angular' too haing same problem ..... here I have reproduce it in stackblitz https://stackblitz.com/edit/networkgraph-highchart-angular?file=src/app/app.component.ts — Iswar, Apr 24 '20 at 04:57
I checked both demos, and it seems that everything is working correctly with the `highcharts-angular` - the markers have the correct size after the page has been loaded. According to your previous question - `highcharts-angular` is the only official wrapper for the Angular. — Mateusz Kornecki, Nov 16 '20 at 07:10

score 1 · Accepted Answer · answered Apr 24 '20 at 08:47

chartCallback fires when the chart is already fully rendered and ready to start the initial animation. Your custom logic launches when afterSetOptions is triggered. In order to make it happen the series has to be updated. So, I added this line to force the update:

chart.series[0].update({})

Live demo

Angular 7 Highchart Node.marker not working on page load

1 Answers1