Chartist JS
Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.
1. Required Vendor file
// Vendors js
<script src="chartist.min.js"></script>
// Vendors Css
<link type="text/css" rel="stylesheet" href="chartist.min.css">
2. Required Template Specific File
<link type="text/css" rel="stylesheet" href="chart-chartist.css">
3. Binding to existing DOM element
<div class="line-area-chart ct-golden-section"></div>
4. Basic usage may look something like this
// Initialization
new Chartist.Line('.line-area-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true
});
5. Customization
As per your requirement you can customize chartist by customizing below file.
<link type="text/css" rel="stylesheet" href="chartist-variable.css">
Refer more chart configuration options from here
Refer following links for detailed documentation, configuration options, methods and examples: