Charts - C3 Charts

Plugin Information

A D3-based reusable chart library

Plugin Name: C3 CHARTS
Author: Masayuki Tanaka
License: MIT licensed
Website: http://c3js.org/
Git Branch: masayuki0812/c3
Dependencies:
<link href="vendor/plugins/c3charts/c3.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/c3charts/d3.min.js"></script>
<script src="vendor/plugins/c3charts/c3.min.js"></script>

Basic Area Chart

Copy 

<div id="area-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Area Chart
var areaChart = c3.generate({
    bindto: '#area-chart',
    color: {
      pattern: Colors,
    },
    padding: {
    left: 30,
      right: 15,
      top: 0,
      bottom: 0,
   },
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    }
});

Basic Line Chart

Copy 

<div id="line-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Line Chart
var lineChart = c3.generate({
  bindto: '#line-chart',
  color: {
    pattern: Colors,
  },
  point: {
    r: 3
  },
  padding: {
    left: 30,
    right: 30,
    top: 0,
    bottom: 0,
  },
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    axes: {
      data1: 'y',
      data2: 'y2',
    }
  },
  axis: {
    x: {
      label: 'X Label'
    },
    y: {
      label: {
        text: 'Y Axis Label',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      label: {
        text: 'Y2 Axis Label',
        position: 'outer-middle'
      }
    }
  }
});

Basic Bar Chart

Copy 

<div id="bar-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Bar Chart
var barChart = c3.generate({
    bindto: '#bar-chart',
    color: {
      pattern: Colors,
    },
    padding: {
    left: 30,
      right: 15,
      top: 0,
      bottom: 0,
   },
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
    }
});

Basic Step Chart

Copy 

<div id="step-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Step Chart
var stepChart = c3.generate({
    bindto: '#step-chart',
    color: {
      pattern: Colors,
    },
    padding: {
      left: 30,
      right: 15,
      top: 0,
      bottom: 0,
   },
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 100],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'step',
            data2: 'area-step'
        }
    }
});

Basic Donut Chart

Copy 

<div id="donut-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Donut Chart
var donutChart = c3.generate({
    bindto: '#donut-chart',
    color: {
      pattern: Colors,
    },
    data: {
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type : 'donut',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    donut: {
        title: "Iris Petal Width"
    }
});

Basic Pie Chart

Copy 

<div id="pie-chart" style="height: 250px; width: 100%;"></div>
Copy 

// Pie Chart
var pieChart = c3.generate({
    bindto: '#pie-chart',
    color: {
      pattern: Colors,
    },
    data: {
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    }
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://c3js.org/reference.html
Advanced Examples: http://c3js.org/examples.html
Return to Top