C3.js – A D3 based reusable chart library with deeper integration with applications dynamic data

February 14, 2015

202

C3.js – A D3 based reusable chart library with deeper integration with applications dynamic data

Comfortable

C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don’t need to write D3 code any more.

Customizable

C3 gives some classes to each element when generating, so you can define a custom style by the class and it’s possible to extend the structure directly by D3.

Controllable

C3 provides a variety of APIs and callbacks to access the state of the chart. By using them, you can update the chart even if after it’s rendered.

C3.js | D3-based reusable chart library//

In this guide, we are going to show you how to get started with C3.

1. Setup

Download the latest version here:

https://github.com/masayuki0812/c3/releases/latest

Installing by Bower/Component is also available with the name c3.

Then, load the scripts and css:

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

C3 depends on D3, so please load D3 too.

2. Generate Chart

C3 generates a chart by calling generate() with the argument object, and an element including the chart will insert into the element specified as a selector in that argument as bindto.

Prepare the element to bind the chart:

<div id="chart"></div>

And, call generate() with arguments:

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

C3 supports the asynchronous module definition (AMD) API. If you use RequireJS, you can load like this:

require.config({
  baseUrl: '/js',
  paths: {
    d3: "http://d3js.org/d3.v3.min"
  }
});

require(["d3", "c3"], function(d3, c3) {
  c3.generate({
    ...
  });
});

Then, you will see the chart:

Examples:

C3.js | D3-based reusable chart library//

# Chart

Line Chart

Line chart with sequential data.

C3.js – A D3 based reusable chart library with deeper integration with applications dynamic data

Comfortable

Customizable

Controllable

Examples:

# Chart

Line Chart

Timeseries Chart

Spline Chart

Simple XY Line Chart

Multiple XY Line Chart

Line Chart with Regions

Step Chart

Area Chart

Stacked Area Chart

Bar Chart

Stacked Bar Chart

Scatter Plot

Pie Chart

Donut Chart

Gauge Chart

Combination Chart

# Axis

Category Axis

Rotated Axis

Additional Y Axis

X Axis Tick Format

X Axis Tick Count

X Axis Tick Values

X Axis Tick Culling

X Axis Tick Fitting

X Axis Timezone

Rotate X Axis Tick Text

Y Axis Tick Format

Padding for Y Axis

Range for Y Axis

Axis Label

Axis Label Position

# Data

Column Oriented Data

Row Oriented Data

JSON Data

Data from URL

Category Data

Load Data

Data Name

Data Color

Data Order

Data Label

Data Label Format

# Grid

Grid Lines

Optional X Grid Lines

Optional Y Grid Lines

# Region

Region

Region with Timeseries

# Interaction

Sub Chart

Zoom

# Legend

Hide Legend

Legend Position

Custom Legend

# Tooltip

Hide Tooltip

Tooltip Grouping

Tooltip Format

# Chart Options

Chart Size

Padding

Color Pattern

Duration of Transition

# Line Chart Options

Hide points

# Pie Chart Options

Pie Label Format

# API

Flow

Data Name