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:

Type URL
Plugin Link https://gionkunz.github.io/chartist-js/index.html
Github Page https://github.com/gionkunz/chartist-js
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/chart-chartist.html