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

Feb 14, 2015 | jQuery Charts / Graphs Plotting, UI/UX Designs & Layout, Utilities & Plug-ins | 0 comments

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.

c3js

 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:

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.

View details »

Timeseries Chart

Simple line chart with timeseries data.

View details »

Spline Chart

Display as Spline Chart.

View details »

Simple XY Line Chart

Simple line chart with custom x.

View details »

Multiple XY Line Chart

Multiple line chart with multiple custom x.

View details »

Line Chart with Regions

Set regions for each data with style.

View details »

Step Chart

Display as Step Chart.

View details »

Area Chart

Display as Area Chart.

View details »

Stacked Area Chart

Display as Stacked Area Chart.

View details »

Bar Chart

Display as Bar Chart.

View details »

Stacked Bar Chart

Display as Stacked Bar Chart.

View details »

Scatter Plot

Display as Scatter Plot.

View details »

Pie Chart

Display as Pie Chart.

View details »

Donut Chart

Display as Donut Chart.

View details »

Gauge Chart

Display as Gauge Chart.

View details »

Combination Chart

Display all kinda charts up in here.

View details »

# Axis

Category Axis

Show ticks as categorized by each data.

View details »

Rotated Axis

Switch x and y axis position.

View details »

Additional Y Axis

Additional y axis can be added.

View details »

X Axis Tick Format

Format x axis tick text.

View details »

X Axis Tick Count

Set the number of ticks on X Axis.

View details »

X Axis Tick Values

Set tick texts on X Axis.

View details »

X Axis Tick Culling

Set cull ticks or not on X Axis.

View details »

X Axis Tick Fitting

Set ticks position to x of data.

View details »

X Axis Timezone

Convert time to UTC.

View details »

Rotate X Axis Tick Text

Rotate x axis tick text.

View details »

Y Axis Tick Format

Format y axis tick text.

View details »

Padding for Y Axis

Set padding for y axis.

View details »

Range for Y Axis

Set range for y axis.

View details »

Axis Label

Set label for axis.

View details »

Axis Label Position

Set axis label position.

View details »

# Data

Column Oriented Data

Column-oriented data can be used as input.

View details »

Row Oriented Data

Row-oriented data can be used as input.

View details »

JSON Data

JSON can be used as input.

View details »

Data from URL

Data from URL can be used as input.

View details »

Category Data

Load data with x values on category axis.

View details »

Load Data

Load data dynamically.

View details »

Data Name

Set name for each data.

View details »

Data Color

Set color according to data.

View details »

Data Order

Define data order. This will be used for stacked bar chart.

View details »

Data Label

Show label of data.

View details »

Data Label Format

Format label of data.

View details »

# Grid

Grid Lines

Show grid lines for x and y axis.

View details »

Optional X Grid Lines

Add optional grid lines on x grid.

View details »

Optional Y Grid Lines

Add optional grid lines on y grid.

View details »

# Region

Region

Show rects on chart.

View details »

Region with Timeseries

Show rects on timeseries chart.

View details »

# Interaction

Sub Chart

Show sub chart for zoom and selection range.

View details »

Zoom

Zoom by mouse wheel event and slide by drag.

View details »

# Legend

Hide Legend

Set visibility of legend.

View details »

Legend Position

Show legend on bottom or right side.

View details »

Custom Legend

Build custom legend

View details »

# Tooltip

Hide Tooltip

Set visibility of tooltip.

View details »

Tooltip Grouping

Show tooltips as grouped or not.

View details »

Tooltip Format

Set format for title and value on tooltip.

View details »

# Chart Options

Chart Size

Set chart size in px.

View details »

Padding

Change padding for the chart.

View details »

Color Pattern

Set custom color pattern.

View details »

Duration of Transition

Set duration of transition for chart animation.

View details »

# Line Chart Options

Hide points

Hide points on line chart

View details »

# Pie Chart Options

Pie Label Format

Change label format on Pie chart

View details »

# API

Flow

Load/Unload data as flowing

View details »

Data Name

Update data names.

View details »

Data Color

Update data colors.

View details »

Axis Label

Update axis labels.

View details »

Axis Range

Update axis range.

View details »

Resize

Resize chart.

View details »

X Grid

Update custom x grids.

View details »

# Transform

To Line Chart

Transform to line chart.

View details »

To Spline Chart

Transform to spline chart.

View details »

To Bar Chart

Transform to bar chart.

View details »

To Area Chart

Transform to area chart.

View details »

To Area Spline Chart

Transform to area spline chart.

View details »

To Scatter Plot

Transform to scatter plot.

View details »

To Pie Chart

Transform to pie chart.

View details »

To Donut Chart

Transform to donut chart.

View details »

# Style

Style for Region

Set style for regions.

View details »

Style for Grid

Set style for grids.

View details »

Website: http://c3js.org/

Thanks for reading,

NabeelShahid.com

Submit a Comment

Your email address will not be published. Required fields are marked *