chartjs / chartjs/Chart.js

Performance regression in Chart.js 3.x vs. 2.x

Open
#10,073 23 comments 5 reactions 0 assignees View on GitHub
type: bug type: performance
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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](https://github.com/chartjs/Chart.js/issues/9965), 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 Chrome
* `chartjs3.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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.