Chartist

Chartist

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:
Markup
<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.
Markup
<div class="ct-chart ct-perfect-fourth"></div>
3. Basic usage may look something like this.
JavaScript
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);