Basic Line Chart


  var ctx = document.getElementById('barChartjs-basic');
  var barChartBasic = new Chart(ctx, {
      type: 'bar',
      responsive: true,
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          },
      }
  });

                  

Chart Horizontal Bar


  var ctx = document.getElementById('chartjs-horizontalBar').getContext('2d');
  window.chartjsHorizontalBar = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          // Elements options apply to all of the options unless overridden in a dataset
          // In this case, we are setting the border of each horizontal bar to be 2px wide
          elements: {
              rectangle: {
                  borderWidth: 2,
              }
          },
          responsive: true,
          legend: {
              position: 'right',
          },
          title: {
              display: false,
              text: 'Chart.js Horizontal Bar Chart'
          }
      }
  });

                  

Chart Line Basic


  var ctx = document.getElementById('chartjs-lineBasic').getContext('2d');
  window.lineBasic = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              label: 'Apple',
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              data: [12, 30, 3,50, 2, 30, 18],
              fill: false,
          }, {
              label: 'Banana',
              fill: false,
              backgroundColor: [
                  'rgba(23, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(123, 233, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(23, 224, 255, 0.2)',
                  'rgba(253, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(55, 99, 132, 1)',
                  'rgba(54, 38, 235, 1)',
                  'rgba(255, 109, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 56, 255, 1)',
                  'rgba(155, 159, 64, 1)'
              ],
              data: [30, 15, 33, 16, 55, 21, 40],
          }]
      },
      options: {
          responsive: true,
          title: {
              display: false,
              text: 'Chart.js Line Chart'
          },
          tooltips: {
              mode: 'index',
              intersect: false,
          },
          hover: {
              mode: 'nearest',
              intersect: true
          },
          scales: {
              xAxes: [{
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'Month'
                  }
              }],
              yAxes: [{
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'Value'
                  }
              }]
          }
      }
  });

                  

Point Chart


  var ctx = document.getElementById('chartjs-pointChart').getContext('2d');
  window.lineBasic = new Chart(ctx, {
      type: 'line',
      responsive: true,
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              label: 'Orange',
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              fill: false,
              borderDash: [5, 5],
              pointRadius: 10,
              pointHoverRadius: 10,
              data: [12, 30, 3,50, 2, 30, 18],
          }, {
              label: 'Lichee',
              fill: false,
              backgroundColor: [
                  'rgba(23, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(123, 233, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(23, 224, 255, 0.2)',
                  'rgba(253, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(55, 99, 132, 1)',
                  'rgba(54, 38, 235, 1)',
                  'rgba(255, 109, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 56, 255, 1)',
                  'rgba(155, 159, 64, 1)'
              ],
              fill: false,
              borderDash: [5, 5],
              pointRadius: 10,
              pointHoverRadius: 10,
              data: [30, 15, 33, 16, 55, 21, 40],
          }]
      },
      options: {
          responsive: true,
          title: {
              display: false,
              text: 'Chart.js Line Chart'
          },
          tooltips: {
              mode: 'index',
              intersect: false,
          },
          hover: {
              mode: 'nearest',
              intersect: true
          },
          scales: {
              xAxes: [{
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'Month'
                  }
              }],
              yAxes: [{
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'Value'
                  }
              }]
          }
      }
  });

                  

Point Chart


  var ctx = document.getElementById('chart-area-line-boundaries').getContext('2d');
  window.lineBoundaries = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              data: [30, 15, 33, 16, 55, 21, 40],
              pointRadius: 4,
              label: 'Dataset',
              fill: true
          }]
      },
      options: Chart.helpers.merge(options, {
          title: {
              // text: 'fill: ' + boundary,   
              display: false
          },
          maintainAspectRatio: true,
          spanGaps: false,
          elements: {
              line: {
                  tension: 0.000001
              }
          },
          plugins: {
              filler: {
                  propagate: false
              }
          },
          scales: {
              xAxes: [{
                  ticks: {
                      autoSkip: false,
                      maxRotation: 0
                  }
              }]
          }
      })
  });

                  

Radar Chart


  var ctx = document.getElementById('radarChart').getContext('2d');
  window.radarChart = new Chart(ctx, {
      type: 'radar',
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              data: [30, 15, 33, 16, 55, 21, 40],
              pointRadius: 4,
              label: ['Apple, Banana, Orange'],
              fill: true
          }]
      },
      options: {
          responsive: true,
          title: {
              display: false,
              text: 'Radar Chart'
          },
          tooltips: {
              mode: 'index',
              intersect: false,
          },
          hover: {
              mode: 'nearest',
              intersect: true
          },
      }
  });

                  

chart doughnut


  var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
  };

  var config = {
          type: 'doughnut',
    data: {
      datasets: [{
        data: [
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
        ],
        backgroundColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                  ],
        label: 'Dataset 1'
      }],
      labels: [
        'Red',
        'Orange',
        'Yellow',
        'Green',
        'Blue'
      ]
    },
    options: {
              responsive: true,
              maintainAspectRatio: false,
      legend: {
                  display: false,
      },
      title: {
        display: false,
        text: 'Chart.js Doughnut Chart'
              },
      animation: {
        animateScale: true,
        animateRotate: true
      }
    }
  };

  var ctx = document.getElementById('chart-doughnut').getContext('2d');
  window.myDoughnut = new Chart(ctx, config);

                  

chart pie


  var pieconfig = {
    type: 'pie',
    data: {
      datasets: [{
        data: [
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
        ],
        backgroundColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                  ],
        label: 'Dataset 1'
      }],
      labels: [
        'Red',
        'Orange',
        'Yellow',
        'Green',
        'Blue'
      ]
    },
    options: {
              responsive: true,
              legend: {
                  display: false,
      },
    }
  };

  var ctx = document.getElementById('chart-pie').getContext('2d');
  window.pieChart = new Chart(ctx, pieconfig);

                  

chart polar


  var chartColors = window.chartColors;
  var color = Chart.helpers.color;
  var config = {
    data: {
      datasets: [{
        data: [
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
        ],
        backgroundColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                  ],
        label: 'My dataset' // for legend
      }],
      labels: [
        'Red',
        'Orange',
        'Yellow',
        'Green',
        'Blue'
      ]
    },
    options: {
      responsive: true,
      legend: {
                  display: false,
      },
      title: {
        display: false,
        text: 'Chart.js Polar Area Chart'
      },
      scale: {
        ticks: {
          beginAtZero: true
        },
        reverse: false
      },
      animation: {
        animateRotate: false,
        animateScale: true
      }
    }
  };

  window.onload = function() {
    var ctx = document.getElementById('chart-polar');
    window.myPolarArea = Chart.PolarArea(ctx, config);
  };