Building Charts using C3.js

In this post, I will show you how to build charts in your web application using C3.js reusable charting library.

Introduction

C3.js is D3.js (D3 = Data Driven Document) based JavaScript chart library. It is simple to use, customizable and provides a nice API. It can be used to create visualizations using SVG, HTML & CSS.

Why use C3.js

C3.js is a simple wrapper around D3.js and is faster to render, has good cross-browser compatibility and is very simple to integrate.

Easy to use: C3.js make it easy to render D3 based charts by wrapping the code required to construct the entire chart.

It is Easy to customize.

API/Controllable: C3 provides variety of callbacks to access the state of the chart. By using these APIs and callbacks, you can update the chart, even after it is rendered.

Environment Setup

Option-1:

You can use the following link for online C3 playground. This will allow you to quickly try C3 using a web browser without installing anything.
http://jsfiddle.net/7kYJu/4742/

Option-2:

This is the one, I will be using in this post. I will setup a project on my local machine. I am using Visual studio code for development. Following are the steps:

• Starter Project. See post about Basic Front-end Dev. Environment Setup for instructions.
• npm i c3 (to install c3 via npm, or see the getting started link for other options).
• npm i d3 (we also need d3, as c3 depends on it).
• Update index.html page for the required references of JavaScript and CSS (see next image).
• If you clone the code repository of this demo, all the is already setup for you.

Index.html

Here is the head section of index.html, this contains links to style sheets and JavaScript files for bootstrap and jQuery:

following picture shows, body section for the page. We have a div for chart which we will be using for charts rendering. We also have some script references for C3.js and also one for our application i.e. app.js.

You can now run the application using npm start command and open a web browser and visit to http://localhost:3000:

Generate a Pie Chart

Ok, lets start simple and create a pie chart.

We did a survey and ask our customers if the like our app or not. They survey results came in and now we want to show the results in nice visualization. We want to show how many users like the app, how many dislike the app and how many even did not prefer to answer. In this case, using a pie-chart is really useful.

In app.js update the code as follows:

we are using generate function from c3, we provide it a target-div (chart) which we already have in index.html. then data object contains information about our survey result and we define the type of chart ‘pie’. This is c3 style and we have to provide the data in this format. the size property contains width and height of chart.

and here is the output of this code:

Generating a Line Chart

Line-charts are more convenient for time-line visualization In this case, we want to see user’s feedback over the last 12 months.

This type of chart is useful to show how data changes over time.

Here is the JavaScript code (in app.js file) which generates the chart and bind it to a div on index.html:

You can see, that this code is a little bit more than pie-chart example. We still have bindto attribute, data attribute now contains more data and types. axis attribute allows us to customize y-axis in this example. Following the output of chart generated by this code.

We can further customize it e,g by changing the type attribute as shown below:

and now the visualization will be as shown below (we have now both the bar and line types):

Now, lets take one step further and consider that we We want to show month values instead of numbers on the x-axis of our survey result data. We can achieve this by changing our code slightly as shown below:

Notice the marked lines for updated code and here is the output of the changes and you can see that now chart is showing Month names instead of numbers in the x-axis:

CSS Customization

Customizing Line Chart (size of line):

We will use CSS for this customization.

Add the following style to site.css. here we are targeting the line type on our chart and with this simple style, we are able to customize the size of line.

Customizing size and color of x and y-axis

Here is the example, how can you change the color of x and y-axis:

Summary

This was a basic introduction of C3.js charting library. We learn that it is based on D3 and it simplifies a lot effort required to build visualizations. There are a lot of chart types which you can use in your web applications and you can learn more about those on official website at this link.

Related Links

• Source-Code Repository
• https://hexquote.com/basic-front-end-dev-environment-setup/

My Recent Books