andreyHudso
Posts: 5
Joined: Fri Apr 30, 2021 8:28 am

Multiple line charts using one angular component

Hi,
Currently I am trying to show multiple different line charts in a component. Number of charts are dynamic as user can select the number of charts needs to be displayed.
I managed to over come my problem by following below mentioned thread.
https://stackblitz.com/edit/highcharts- ... mponent.ts

So the data is taken from a live service and each data is updated in a time interval. but the problem is all the charts are being updated even only one data element is updated. Is there any proper way to handle that?
andreyHudso
Posts: 5
Joined: Fri Apr 30, 2021 8:28 am

Re: Multiple line charts using one angular component

Hi,
Anyone with an idea how to overcome this problem?.

Or any other different approach maybe?

Thanks In Advance
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Multiple line charts using one angular component

Hi,
Thank you for contacting us with your issue.

I think the better solution to manage data will be to use the service to do it.
Have you tried this approach in action?
https://stackblitz.com/edit/highcharts- ... -service-2

https://github.com/highcharts/highchart ... e-examples
https://angular.io/tutorial/toh-pt4#why-services

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
andreyHudso
Posts: 5
Joined: Fri Apr 30, 2021 8:28 am

Re: Multiple line charts using one angular component

Hi Sebastian,
I am using a service to get the data. My problem is not about the service.

In my scenario, I have multiple charts with different types of data.
https://stackblitz.com/edit/highcharts- ... mponent.ts
According to this. component has 3 charts based on an array containing 3 set of data. When array is updated all the charts are being rendered. Charts will be redrawn even if I update only one chart data. Can I stop that?.

All the charts should be displayed, but only one chart should be redrawn when a SINGLE element of array is updated.

You can try that scenario using the above stackblitz. Try updating only one element of the array, but you will notice all the charts will be redrawn.

Hope you got my point.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Multiple line charts using one angular component

Hi,
Thanks for the explanation.

Well, it's rather a matter of re-building the app, but in general, I wouldn't worry about it because this is not a use case for the app in a state other than dev (in the sense, in a ready-made angular app, the user will not bother in files and rebuilt it.

See in my example I used a handler to change data and it didn't change data in all charts.
I think the production version of the Angular application will update each component separately, as in the other wrapper demos.

Live demo:
https://stackblitz.com/edit/highcharts- ... ata-gacgkq

API References:
https://github.com/highcharts/highcharts-angular
https://stackblitz.com/edit/highcharts- ... -to-update

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
andreyHudso
Posts: 5
Joined: Fri Apr 30, 2021 8:28 am

Re: Multiple line charts using one angular component

Hi Sebastian,

Thanks for your output. I went through your suggestion and its not what I am looking for the moment. Let me explain more on this using the example that you have provided.
https://stackblitz.com/edit/highcharts- ... mponent.ts
Please refer the updated stackblitz.
I have created a new component and I am calling

Code: Select all

updateData()
function and in there I am only updating the first element of the

Code: Select all

myData1
array .
But at that point both the charts are being updated and redrawn. I only need to redraw the first chart where the only that charts data was updated.
Can I stop that by following this scenario?. Is there any other way that I can do it?.

Hope my explanation is clear enough.
Thanks again for your valuable output on this.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Multiple line charts using one angular component

Hi,
It seems that with such constructed data the chart will be redrawn each time.

I have a proposal to save the data as separate arrays with the object that you want to edit.
In my example, I'm editing myData1 and the data only changes in the first chart.

Live demo:
https://stackblitz.com/edit/highcharts- ... ata-gacgkq

Best regards.
Sebastian Hajdus
Highcharts Developer
bijoyalfred1983
Posts: 1
Joined: Mon Apr 18, 2022 3:35 am

Re: Multiple line charts using one angular component

sebastian.h wrote: Mon May 10, 2021 2:17 pm Hi,
It seems that with such constructed data the chart will be redrawn each time.

I have a proposal to save the data as separate arrays with the object that you want to edit.
In my example, I'm editing myData1 and the data only changes in the first chart.

Live demo:
https://stackblitz.com/edit/highcharts- ... ata-gacgkq

Best regards.
I want to add more properties in the graph like xAxis and yAxis and so on, I tried but its not updating in the details in the graph.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Multiple line charts using one angular component

Hi,

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

Here is a working example of updating yAxis.gridLineColor:
https://stackblitz.com/edit/highcharts- ... mponent.ts

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

Return to “Highcharts Usage”