# 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:-

## Subscribe

Select Categories