c3js / c3js/c3

Performance issues with c3js

Open
#2,303 5 comments 7 reactions 0 assignees View on GitHub
C-performance
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

I'm currently struggling with the poor performance of c3js as others do and there is a lot of reasons for that.

- displaying a single line chart (from `simple.html`) calls `getBoundingClientRect` 99 times which has a significant cost ( #1645 )

- displaying a single line chart will also append and remove from DOM a dummy (to mesure font size) a dozen times per chart (probably because we call updateSizes N times per display)

- it creates and resizes absolutely everything, although there is a single line chart it also create, append and resize the nodes for regions, arcs, titles, grid, the Y2 axis and the X axis for subchart (#1591)

- each axis is created up to 5 times at render time, meaning for our line chart with 2 real axes we create in reality (with uncached sizing since it's a new instance etc.) 20 axes because we call updateScales/updateSizes multiple times at render time:

- initWithData -> redraw -> updateDimension -> updateScales
- initWithData -> updateDimension -> updateScales
- initWithData -> initLegend -> updateLegendWithDefaults -> updateLegend -> updateScales
- initWithData -> initLegend -> updateLegendWithDefaults -> updateLegend -> updateSizes
- initWithData -> updateScales

Basically the browser is taking all its time to modify dom, force relayout, mesure values, modify dom, force relayout, etc.. hundreds of times. (#1067)

There was attempt to cache values with `withoutCompute` for some parts but more often than not this is not used because the boolean is not passed.

I started trying to opt-out from unused stuff (starting with axes) and I could reduce the 99 calls to `getBoundingClientRect` to 28 which feels much better on big dashboards but I'm not 100% familiar with the code stack so I can't be sure I'm not breaking some edge cases here and there.

Is there anyone with some knowledge of the code stack that would be interested in trying to improve the performance? Is it worth it to try and do thing nicely and create PRs to this repository?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.