Chartist

Chartist

c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.

1. Initialize the plugin by referencing the necessary files:
                    
                        <link href="/path/to/chartist.min.css" rel="stylesheet" type="text/css">
                        <script src="/path/to/chartist.min.js"></script>
                    
                
2. HTML code to specify a container.
                    
                        <div class="ct-chart ct-perfect-fourth"></div>
                    
                
3. Basic usage may look something like this.
                    
                        var data = {
                            // A labels array that can contain any sort of values
                            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                            // Our series array that contains series objects or in this case series data arrays
                            series: [
                                [5, 2, 4, 2, 0]
                            ]
                        };

                        // Create a new line chart object where as first parameter we pass in a selector
                        // that is resolving to our chart container element. The Second parameter
                        // is the actual data object.
                        new Chartist.Line('.ct-chart', data);

                    
                

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://gionkunz.github.io/chartist-js/
Github Page https://github.com/gionkunz/chartist-js
Template Page https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/chartist-charts.html