Building Charts Using C3.js

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, and 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 a 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: