Atmos
Search…
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
1
<link rel="stylesheet" href="assets/vendor/chartist/chartist.min.css">
Copied!

Step 2

Include the chartist javascript library
1
<script type="text/javascript" src="assets/vendor/chartist/chartist.min.js"></script>
Copied!

Step 3

Add the markup
1
<div id="chartist-01"></div>
Copied!

Step 4

Initialize with chart with data
1
new Chartist.Line('#chartist-01', {
2
labels: [1, 2, 3, 4, 5, 6, 7, 8],
3
series: [
4
[5, 9, 7, 8, 5, 3, 5, 4]
5
]
6
}, {
7
low: 0,
8
showArea: true,
9
height: 300
10
});
Copied!
Last modified 2yr ago
Copy link