Chartist

Chartist.js is a simple responsive charting library built with SVG. Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website.

Step 1

Include Styles for the chart in head

<link rel="stylesheet" href="assets/vendor/chartist/chartist.min.css">

Step 2

Include the chartist javascript library

<script type="text/javascript" src="assets/vendor/chartist/chartist.min.js"></script>

Step 3

Add the markup

 <div id="chartist-01"></div>

Step 4

Initialize with chart with data

 new Chartist.Line('#chartist-01', {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [
                [5, 9, 7, 8, 5, 3, 5, 4]
            ]
        }, {
            low: 0,
            showArea: true,
            height: 300
        });