Chart.js: Performance regression in Chart.js 3.x vs. 2.x
Expected behavior
I have a site that shows various graphs of Covid-19 spread in different countries and regions, at https://mackuba.eu/corona/, which uses Chart.js. I’ve been maintaining it since March 2020, and at the beginning the charts worked fine since there wasn’t much data to show, but the datasets were getting longer and longer, and last year already it was working kind of slow. It’s especially bad in Chrome and Firefox, surprisingly it’s much better in Safari.
I’ve built it in Chart.js 2.x, since 3.0 only came out last year. I read that 3.x includes some performance improvements, so I thought it would fix the problem.
I struggled for some time with an issue with TypeScript definitions, which changed in 3.x, but I couldn’t figure it out and in the end I worked around it by marking all Chart.js types as any.
I managed to update all the calls to Chart.js to the 3.x API and started testing the site. The result was… unexpected. The site seems to work just as slow in Chrome, but now it also works slower in Safari…
I’ve managed to extract a minimal code sample that shows the issue to a new repo: https://github.com/mackuba/chart_slow_demo. It’s a bit of an extreme example, because it shows 20 datasets with the full date range (since March 2020), and normally there’s a few up to 10 datasets and a smaller date range - but this way the problem is more obvious. You can make the chart “lighter” by removing some items from the population dictionary.
Current behavior
In Chrome (Brave):
chartjs2.html(2.9.3): works slow (animation starts quickly but is like 3 fps)chartjs3.html(3.7.0): slow, but in a different way (for more than half a second nothing is happening)
In Safari:
chartjs2.html(2.9.3): works ok - animation starts immediately and is faster than in Chromechartjs3.html(3.7.0): there’s almost a second of delay before the chart starts animating
I’m testing this on 2018 MacBook Pro (macOS 11.6.2) - if you’re checking it on a fast computer like M1 Macs and it loads immediately, try on an older machine.
Safari version: Version 14.1.2 Brave version: Version 1.34.80 Chromium: 97.0.4692.71 (Official Build) (x86_64)
Reproducible sample
https://github.com/mackuba/chart_slow_demo
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
v3.7.0
Browser name and version
Safari 14.1.2
Link to your project
No response
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 5
- Comments: 18 (6 by maintainers)
Hi, we also have a performance regression issue when migrating from 2.x.x to 4.x.x. Here is a diff when calling
chart.update()on a line chart.With 2.x.x, it takes 180ms :
With 4.x.x, it takes 855ms :
Both contains 29 lines with 336 points. On the update we are changing the colors of the lines.
I also tried to update from 2.9.4 to 3.9.1 or 4.4.1 and both versions were slower. Way slower when using Chrome with Devtools open which is 90% of my workday. We ended up staying on 2.9.4.
No. Currently we have both versions in our app (v2 and v4) because in some place the regression is too important, this is annoying. @virtualmartire can you open a new issue and mention my previous message ? Maybe it will be more visible …
I just want to add my concern about performance, as mentioned in https://github.com/chartjs/Chart.js/issues/10637 as well. I have recently upgraded from chartjs 2.9.3 to 4.1.1.
Unfortunately, the ‘performance’ problem is impacting other things very negatively. Note that the charts themselves appear to be performing fine - I can interact with them without problems.
Apart from the charts, I have other elements on my dashboard page, including bootstrap collapse sections, items that have tooltips and can be interacted with and clicked on.
On chartjs 2.9.3, the dashboard page was performing fine. I can hover on elements, click them, and the page responds almost instantly. After the upgrade, all the other elements on my page have become laggy and slow to respond to clicks. It takes a frustratingly obvious 2-3 seconds to interact with anything.
If I hide/remove all the charts, the performance improves again, back to how it was with 2.9.3. Reverting back to 2.9.3 seems to be the only solution at this stage.
I hope someone has some clues as to why the chart performance has dropped so rapidly! Even disabling chart animations did nothing to improve my page performance.
I tried recording using the performance monitor in chrome for more details. Miraculously, while the recording is taking place, the issue goes away! My page performance returns to normal. As soon as the recording is stopped, it returns to the choppy performance.
My project is using angular 14, and my suspicion is that the chartjs 4.1.1 is messing with the angular rendering pipeline, causing all my other elements to be reevaulated slowly and costing page performance on any dom interaction (via angular).
Does anyone have any comment or suggestions as to why this might be the case?
I have inspected and compared 2.9.3 vs 4.1.1 in the dom, and I noticed that the new version is missing something called a chartjs-render-monitor and chartjs-size-monitor. Could this be a clue? Or is there something else in the canvas that is interfering and causing issues for frameworks (like angular, in my case).
Closed it because it’s a duplicate
Has there been any headway on this? In testing these issues continue even with the latest release. 😞
@LeeLenaleee you closed the related ticket above as not planned?