Chart JS

Developer features allow extending and enhancing Chart.js in many different ways.
Read the official ChartJs Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<script src="chart.min.js"></script>

    
2. Binding to existing DOM element.

<canvas id="myChart" class="chartjs" data-height="400"></canvas>

    
3. Basic usage looks something like this:

// Wrap charts with div of height according to their data-height
var chartWrapper = $('.chartjs')
if (chartWrapper.length) {
  chartWrapper.each(function () {
    $(this).wrap($('<div style="height:' + this.getAttribute('data-height') + 'px"></div>'));
  });
}

// Initialization
var chart = $("#myChart");

// 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(chart, config);

    

Refer here for more chart configuration options.

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