Simple C3.js wrapper for AngularJS
2 people use it
Author: 436730?v=3 wasilak

Angular C3 Simple

Code Climate

A simple AngularJS directive allowing to work with C3.js which is D3 based chart rendering library.

You can see demo here.

Why bother?

I needed a way to use C3.js in my AngularJS applications and all libraries/directives I came upon were either too complicated, incomplete or broken and not supported.

Biggest problem with them was that all of them included some kind of theit own API or a way to communicate with C3.js via them. I don't need extra directive attributes ot other ways allowing me to access charts and set their options. Most of the time existing libs didn't even allow to set all of options available in C3.js.

All I needed was a directive, whish is a simple wrapper allowing me to display chart and use any option available while maintaining ability to use AngularJS $scope and two-way data binding for chart data.

This is why I bothered writing this plugin. If its features are what you are looking for - that's perfect! :)


via bower:

or simply download latest source code from repository: link


First of all - you'll need some libraries and If you are using bower - you're in luck. They'll be installed for you. Otherwise, please do it manually or use CDN. Here it's what you need:

Link to them in your project:

Angular C3 Simple directive uses simple markup: its name is c3-simple and you can use it either as:

  • an Element <c3-simple id="chart" config="chart"></c3-simple>
  • an Attribute <div c3-simple id="chart" config="chart"></div>

In both cases it accepts same parameters as attributes:

  • id - and ID of element it is attached to, simple stuff nothing fancy
  • config - JavaScript object with all options you can use in C3.js documentation
  • one thing to remember: for now Directive only knows how to handle data.columns (docs) type of data provided for chart. Any other might work, but it will not be change/update aware - $scope won't we working it's magic. I plan to implement this in near future, if there will be need for it.

Now all you have to do is plug-in angular-c3-simple module into your application, maybe something like this:

afterwards you can initialize chart with any C3.js options available. For sake of this docs, I'll keep it simple. I'll set type of chart to timeseries with some example data (remember: columns) and I'll apply some custom formatting on X axis ticks and tooltips. Also I don't want legend. Here it goes:


Oh, and there is one more nifty thing: c3SimpleService. This little fellow allows you to control any existing chart via C3.js API. You can use any API call available in documemtation. All you have to do is pluig-in this service into your AngularJS controller, like this:

After plugging-in you'll have all charts available via c3SimpleService. Let's say you have chart with id="myNewChart1". You can access it like this:

Now let's say you'd like to transform data1 series from whatever it is now to bar type:


Basically all API toher than installation and initial config is provided by C3.js docs.

Building / Minifing

You can build minified version yourself, by simply using Grunt in project root.


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
comments powered by Disqus
This page was last updated over 3 years ago.