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/chartist.min.css" rel="stylesheet" type="text/css">
<script src="/path/to/chartist.min.js"></script>
2. HTML code to specify a container.
<div class="ct-chart ct-perfect-fourth"></div>
3. Basic usage may look something like this.
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
series: [
[5, 2, 4, 2, 0]
]
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data);
Refer following links for detailed documentation, configuration options, methods and examples: