Add Charts Using Chart JS In Java Script

In this article, we will learn about chart.js and how to implement chart.js with the use of the java script.

Chart.js is an free JavaScript library for making HTML-based charts. It is comes with the following built-in chart types:

1. Scatter Plot
2. Line Chart
3. Bar Chart
4. Pie Chart
5. Donut Chart

– First of all, we have create a html page.

– Than add the below cdn link of chart js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

– Add the below code in body of the html page.

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

1.Scatter Plot

– Now open html file and add the below script.

var xyValues = [
  {x:0, y:0},
  {x:10, y:6},
  {x:20, y:2},
  {x:70, y:5},
  {x:40, y:4},
  {x:50, y:9},
  {x:60, y:3},
  {x:30, y:8},
  {x:80, y:4},
  {x:90, y:7},
  {x:100, y:1}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "red",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 0, max:100}}],
      yAxes: [{ticks: {min: 0, max:10}}],
    }
  }
});

Output:-

2.Line Chart

– Now open html file and add the below script.

var xValues = [0,10,20,30,40,50,60,70,80,90,100];
var yValues = [0,6,2,8,4,9,3,5,4,7,1];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "red",
      borderColor: "lightred",
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:10}}],
    }
  }
});

Output:-

3.Bar Chart

– Now open html file and add the below script.

var xValues = ["a","b","c","d","e","f","g","h","i","j"];
var yValues = [4,6,3,8,3,7,5,3,6,7];
var barColors = ["red", "green","blue","orange","brown","yellow","gray","burlywood","goldenrod","blanchedalmond"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:10}}],
    }
  }
});

Output:-

4.Pie Chart

– Now open html file and add the below script.

var xValues = ["a","b","c","d","e","f","g","h"];
var yValues = [10,15,10,15,10,15,10,15];
var barColors = ["red", "green","blue","orange","brown","yellow","gray","burlywood"];

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
    }
  }
});

Output:-

5.DonutChart

– Now open html file and add the below script.

var xValues = ["a","b","c","d","e","f","g","h"];
var yValues = [10,15,10,15,10,15,10,15];
var barColors = ["red", "green","blue","orange","brown","yellow","gray","burlywood"];

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
    }
  }
});

Output:-