Chart JS

Developer features allow extending and enhancing Chart.js in many different ways.

1. Initialize the plugin by referencing the necessary files:
                    
                        <script src="chart.min.js"></script>
                    
                
2. HTML Markup.
                    
                        <div id="chart-chartjs"></div>
                    
                
3. Basic usage may look something like this.
                    
                        // Initialization
                        var ctx = $("#chart-chartjs");

                        // Chart options
                        var chartOptions = {
                            ....................
                        };
                        // Chart Data
                        var chartData = {
                            ....................
                        };
                        // Configuration
                        var config = {
                            type: 'line',
                            // Chart Options
                            options : chartOptions,
                            data : chartData
                        };
                        // Create the chart
                        var lineChart = new Chart(ctx, config);

                    
                

Refer more chart configuration options from here

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

Type URL
Plugin Link https://www.chartjs.org/
Github Page https://github.com/chartjs/Chart.js
Template Page https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/chart-chartjs.html