rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Angular Page with multiple Graphs

Hello,
I have a web page that has 4 graphs on it. Two of them have one series, and two of them have 4 series. They load in a reasonable time, but after the graphs are loaded the page is very laggy. Scrolling, clicking a button, doing anything on the graphs (zoom, click, mouse over etc) very laggy.

Any ideas how to resolve this?

Thanks.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Angular Page with multiple Graphs

Hello rfreitas,

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

Performance issues might be caused by many different reasons and before we go any further, I need to know more details. Please share with me more informations, like your charts' config, types of series, number of points and try to prepare working live demo. You can start here: https://jsfiddle.net/BlackLabel/Lcf36abd/

Meanwhile, I've gathered for you few links that you might find useful:

-Render millions of chart points with the Boost Module
https://www.highcharts.com/tutorials/hi ... st-module/

- How can I get the best performance out of Highcharts?
https://www.highcharts.com/docs/getting ... highcharts

- Lazy-loading demo
http://highcharts.com/stock/demo/lazy-loading

Please try to make sure that the performance issue isn't caused by your code. Four graphs shouldn't cause any performance issues, unless the data is massive. For example, here you can see 100 charts on single page: https://jsfiddle.net/BlackLabel/z7ct49or/

Best regards!
Mateusz Bernacik
Highcharts Developer
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

Hello,

We are using Scatter. I did enable Boost yesterday and it was super fast, and the lag was gone. However, on some of the graphs, we need to allow the user to click on the graph to select a point, which doesn't work in Boost? Also, on two of the graphs, when they click a point, we need to grab a 3rd value, so we have X, Y, and a third value on each point. I am read that is not supported in Boost.

Each series has around 20K points, so all graphs combined have around 200K points on this page.

Let me know if you need more info. I will look over the links you sent too.

Thanks!
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

One other thing, when Boost is off, they load in a decent amount of time. After all 4 graphs have completely rendered, if I open Task manager, I can see CPU spikes when I move the mouse anywhere on the page.
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

So is there a way to use Boost and allow the user to click on a point and grab the value?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Angular Page with multiple Graphs

Hi rfreitas,

It is possible, it might be a bit tricky though. As you can read here: https://www.highcharts.com/docs/advance ... ost-module
Point click handlers are not supported in boost mode.
However, there is an issue related to boost module and click event on points. You can find it here with possible workarounds: https://github.com/highcharts/highcharts/issues/14067

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

Yeah I tried the workaround:
{
click: function () {
alert('a');
},
mouseOver: function() {
if(this.series.halo) {
this.series.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
}
}

I get an error: Property 'halo' does not exist on type 'Series'.

At this point, do you think I should try and get the click to work with Boost, or turn off Boost and try to get the performance issue fixed?

Thanks!
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

I got it to work sort of with Boost on by adding this:
series: {
states: {
hover: {
halo: {
attributes: {
class: 'highcharts-tracker',
},
size: 25,
}
}
},

However, you have to click inside the Halo, and if you click on the point/line it doesn't work. So if you click below or above the point, inside the halo it works. Is there any way to make it work if you click on the point/line?
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

Update, I got the point click working with Boost, had to add zIndex:

series: {
states: {
hover: {
halo: {
attributes: {
class: 'highcharts-tracker',
zIndex: 25
},
size: 25,
}
}
},
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Angular Page with multiple Graphs

Hi rfreitas!

Congrats on figuring it out! Adjusting zIndex is the valid solution in this case. Alternatively, if you don't want to do it using zIndex option, you could try slightly different apporach and use toFront() method. Here's the demo: https://jsfiddle.net/BlackLabel/jqch6v9L/
API reference: https://api.highcharts.com/class-refere ... nt#toFront

Feel free to ask any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

toFront does work but I get this build error:

this.series.halo.attr({
~~~~
error TS2339: Property 'halo' does not exist on type 'Series'.


App works fine, but I get the error above during the build. Any idea how to get around it?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Angular Page with multiple Graphs

Hello rfreitas,

I think extending series interface should help in this case. It should be something like this:

Code: Select all

interface ExtendedSeries extends Highcharts.Series {
  halo: any;
}
Of course any is more a band-aid that a proper solution, so feel free to improve it, but in general I think that this should help.

Let me know if it worked.
Regards!
Mateusz Bernacik
Highcharts Developer
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

Hello,
I put together a Demo, not sure if I got all my settings included, but you can see my issue here:
https://jsfiddle.net/rfreitas/45L2jrek/14/

We have a 2 point green line that is on the same graph as a red scatter plot. When the green line lands on top of the red scatter, we cannot grab and drag the points.

You will see the point on the left side is slightly below the red, so you can grab it if you put the mouse at the bottom of the green square. You can actually see a small pointer and as soon as it clears the red, you can grab it.

If you try to move the green point/square on the right side, you can't grab it because it is entirely on top of the red scatter graph.

Any suggestions how to make grabbing and moving the point easier? We do have Boost enabled.

Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Angular Page with multiple Graphs

Hello rfreitas,

In this case you should consider disabling mouse tracking for red series. There are too many points anyway and that option seems redundant. As a result problem with selecting draggable points should be gone.
Demo: https://jsfiddle.net/BlackLabel/71mbcnt3/
API reference: https://api.highcharts.com/highcharts/s ... seTracking

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
rfreitas
Posts: 15
Joined: Wed Aug 25, 2021 6:49 pm

Re: Angular Page with multiple Graphs

Hello,
Thanks for that. That does fix the issue, but brings out a new one. We have a Click Event that adds a Plot line and it only adds the plot line when we click on a point in the series. This no longer works when I set enableMouseTracking=false on the red series.

Is there a way to add a plot line and still grab that X value of the plot line without the user having click on a point? So is there a way to add the plot line when they click in white space?

Thanks!

Return to “Highcharts Usage”