C3 Angular Directives

C3js Angular Directives

A set of Angularjs directives for the very nice C3js library.

Get Started

Overview of C3 angular directives.

Get Started Quickly

Use bower and grunt to install the directives for your project or just download the distributable.

Easy out of the box

With just a few lines of code you can already add nice charts to your pages


The most used options of the c3js library are available through the directive as well.


Easy to created a dynamic chart using standard AngularJS components.


On the left you can download the latest release. You can also download the latest and greatest from the master branch (zip / tar.gz) or check all releases for older versions.

Getting started.

If you just want to include the directives to your poject You have to add the following libraries and stylesheet. They are all also available from the a cdn. If you add these and initialise your AngularJS application you are good to go. Next step would be to check out the samples below and start doing stuff yourself. If you need more information

If you are a bower/grunt user, you are better of using bower into install the library

            # bower info c3-angular
            # bower install c3-angular --save

If you want more information about this, check the following blog:


Some examples for the graphs we support, there is more though.

More examples are available in a separate project which can be found here: More examples

API Documentation can be found here: API docs

Basic chart with two lines

Change line name and color

Add more info to the axes and add the second y axis.

Add a grid to the chart

Hide labels, but add subchart and zoom

Show legend, tooltip and size customization

Hide axis

Scatter chart with data that has different x values.

Stacked bar chart

Create a Gauge

Create a Pie

Create a Donut

Use click event

Data clicked: Name {{clicked.name}}, Value {{clicked.value}}


Issues and requests

If you have bugs, feature request or maybe pull requests head over to github.

Github project

Contact us

If you have non-feature or bug related questions, you can send me an email:
jettro at gridshore dot nl

More Information

If you want to know more about me, what I am doing, check my linkedin profile or follow me on twitter.

  • @jettroCoenradie
  • https://nl.linkedin.com/in/jettro