vijayr98
Posts: 9
Joined: Fri Apr 30, 2021 4:44 pm

Question about highcharts angular component data binding and rescaling of axes

Hi highcharts team -

We have a parent and child component - parent component gets data from an api and passes it to the child component which then takes that data and binds it to our highcharts component. The child component needs to do some manipulations on that data before binding it to the component so it does that in ngOnChanges and then we set the update flag to true to force an update on the highcharts-angular component. Before doing the manipulations we ensure to set our chartOptions objects series.data array to an empty array like this -> series: [{ data: []}]. This works perfectly on initial load (see initload.png) of a certain time range of data but the moment we pass in another data set, the x axis does not rescale (see 2nd load.png). After trying to refresh the data a couple of more times, it loads correctly (see correctload.png). We noticed this problem was not there when weren't doing parent -> child data communication, but I would say logically we haven't missed any step but I am wondering if anyone else has experienced this where the x axis (or even y axis) does not rescale when there is new data introduced to the highcharts angular component?

Thank you!
Attachments
init-load.PNG
init-load.PNG (3.45 KiB) Viewed 490 times
correctload.PNG
correctload.PNG (3.22 KiB) Viewed 490 times
2ndload.PNG
2ndload.PNG (2.79 KiB) Viewed 490 times
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Question about highcharts angular component data binding and rescaling of axes

Thanks for your message,

Despite your description, I'm unable to reproduce your case without a code example or online demo.
I have prepared a case with two components, try to communicate them in a similar way as yours and prepare a simplified version of your case.


Demo:
https://stackblitz.com/edit/highcharts- ... onent.html

Let me know how are you going with this.
Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”