Extending ember-c3 charts using base-component approach

Ben Orozco
Apr 10, 2016 · 2 min read

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:

The Backlog by Ecaresoft

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

The Backlog by Ecaresoft

Sharing our journey: from software development to company culture and productivity hacks.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade