c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.
1. Initialize the plugin by referencing the necessary files:
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
2. The component will bind to any existing DOM element.
<div id="chart"></div>
3. Basic usage may look something like this.
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({
...
});
});
Refer following links for detailed documentation, configuration options, methods and examples: