-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Performance issues (2.0.0-beta2) #2040
Comments
@jtblin great to hear from you. Performance@mathiask88 had a bunch of amazing performance fixes that came after beta2 released that you may want to try. Note that the Chart.js file moved to the I cloned your v2 branch, downloaded the latest Chart.js from our v2.0-dev branch and renabled the live chart. It takes about 15ms to update the chart (technically fast enough for true 60fps, but we should try and improve some more). The chrome profile looks like: Bugs
As an aside, would you like an invitation to our slack channel? |
Thanks a ton for the quick and detailed answer! 👍 I've tested with the latest version of beta2 and the performance improvement is indeed impressive. Went from ~105% CPU on my MBP to around 60% at 25fps (not 60 as erroneously said above). It's actually now better than Re: animation, yes it doesn't look like there is an animation. In the past I remember I had to disable animations for this realtime chart so I thought it may be related. Changing the duration doesn't seem to have any effect though. Thanks for looking into that and confirming the point radius issue. At the moment, I use Yes, it could be useful to be in your slack channel, my email address is the one on my GH profile. |
Re: performance, I think you could increase your performance by turning bezier curve drawing off (there are lots of points, so it's not very noticeable). To turn off bezier curve drawing in your config, set the line tension to 0. On my desktop machine this took ~5ms off the render time. config: {
elements: {
line: {
tension: 0
}
}
} I noticed that the chart min/max jump around as the min/max of the data changes. I think we should add an optimization to not even calculate the data min/max if both the hard min and max are set in the config for the axis. This might get another millisecond off the update time. |
I did notice that the chart hangs when you mouseover the points even after I turned off the hover mode with the snippet below in the config. I will look into this as well. hover: {
mode: false
} |
@etimberg Ah yes the hover. I missed to mention that the performance of this is horrible :D I changed the events array to ['','','','','','']. Disabling just one event seems to be bugged. |
Awesome, confirmed 👍 |
I'm the creator of angular-chart.js lib which is a thin wrapper over Chart.js for Angular. I've started working on integrating support for
2.0.0
and things have been going pretty well 👍 except for a realtime chart that updates ticks every 40ms (~60fps). You can see the live example for Chart.js1.0.2
at http://jtblin.github.io/angular-chart.js/. The problem is that it uses so much CPU with2.0.0
that I had to disable it in my 2.0.0 branch.Here are the options I set for the realtime chart:
In
1.0.2
I used to have these options instead:In
2.0.0
, setting options to0
doesn't seem to work i.e. I have to setpoint.radius: 0.1
otherwise it shows the standard radius. Is there a way to disable the point entirely like in1.0.x
?Same for
duration: 0
orduration: false
, I'm not sure it works as expected. #2039 seems to complain about the same problem. Is there a way to disable animations entirely?Code for the realtime chart example can be found at https://github.com/jtblin/angular-chart.js/blob/chartjs-2.0/examples/app.js#L160.
This performance issue is a major blocker from my point of view for
2.0.0
.The text was updated successfully, but these errors were encountered: