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
});