Performance Issues on create/resize
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Hi,
I've noticed that c3.js can be quite slow when the window is resized or when the chart is initially generated. These issues are related to issue #730 which has been closed, however the performance is still quite poor.
In my app we have a number of charts on the same page (~7), and are planning on increasing this number. There are also several pages which means overall we have 50+ charts on our single page app (though mostly hidden).
Initially (and preferably) I have the charts in variable sized containers and I'm finding a single resize will take the page 3-4sec. I've tried setting a fixed size.width/size.height and also the padding.left as in #730 however this only reduces the resize time to ~1.5sec (~200ms per chart).
I have other charts in the same page that are using pure d3 and these all resize in around 10-20ms per chart.
I've noticed in the profiler that the vast majority of the resize time (~180ms per chart) is spent in the function: getBoundingClientRect, which is called several times each resize and takes ~25ms per call.
At this stage I've only just started looking into what I can do to improve this performance, however I thought I'd raise the issue so if others have ideas for solutions or have seen the issue they can let me know.
Overall I'm loving c3.js and its ease of use and features and really want to see how it progresses and am hoping I can find time to help contribute.
Contributor guide
Assessment
This issue has not been assessed yet.