Extending ember-c3 charts using base-component approach

Recently we needed to create a metrics dashboard for Nimbo X. After some research we finally settled for C3.js; a nice “D3-based reusable chart library” that suited our needs pretty well.

Meet ember-c3

Being C3.js a vanilla JS lib itself, we needed some kind of abstraction to use it within our Ember app. Fortunately we found a wonderful addon by Glavin Wiechert called ember-c3.

An example of C3 donut chart
📈 Ember addon library for C3, a D3-based reusable chart library. http://glavin001.github.io/ember-c3/

Chart Base Component

The requirement was that all charts must share the same look-and-feel, following same design’s visual language, colors, and behaviour. Therefore we needed to have some kind of abstraction on top in order to keep it DRY.

Using ember-c3 library is pretty straightforward, since it exposes a c3-chart component we can use in our app right away by passing several parameters listed in the project’s readme.

That’s exactly how our base component should look like!, also making use of ember-cli’s pods feels more natural and better organised for this use-case:


This way we can just consume our chart-base and customize any chart (check out C3 API reference) by passing only needed parameters:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.