C3.js performance issues

C3.js is a nice charting library, easy to include on a webpage. At work, we created an Angular wrapper, for easy use. Its API is fairly intuitive and minimal, and the standard settings and styling are quite good. Being based on D3.js, you'd expect performance not to be an issue. However...

Don't use C3.js on a page with many DOM elements.

You won't notice the problems in a toy example, but it takes to browser more than 100 ms to draw and layout your page, C3.js will very noticeably render very slowly. Here are some approximate numbers for our webpage at work, drawing a single line chart with about 500 points.

• Firefox: 0.3 seconds
• Chrome: 0.3 seconds
• Edge: 3 seconds

The Firefox and Chrome numbers might make the user wonder why it's not as snappy as expected. Waiting three seconds in Edge, though, is unacceptable.

Why is it slow? Because it breaks one of the central rules of web performance:

Measure sizes and positions as little as possible. And if you do, do it all at once, without modifying the DOM in between.

Quoting Anthony Pessy on Github: Basically the browser is taking all its time to modify DOM, force relayout, measure values, modify DOM, force relayout, measure values, etc.

For further information, see C3.js Github issue #2303.