HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Chart.js is an free JavaScript library for making HTML-based charts.It is one of the simplest visualization libraries for JavaScript, and comes with the following built-in chart types
Chart.js is easy to use.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
The canvas element must have a unique id.
That's all!
var myChart = new Chart("myChart", {
type: "scatter",
data: {},
options: {}
});
var myChart = new Chart("myChart", {
type: "line",
data: {},
options: {}
});
var myChart = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});
new Chart("myPlot11", { type: 'scatter', data: { datasets: [{ pointRadius:4, backgroundColor:"rgba(0,0,255,1)", data:[ {x:50, y:7}, {x:60, y:8}, {x:70, y:8}, {x:80, y:9}, {x:90, y:9}, {x:100, y:9}, {x:110, y:10}, {x:120, y:11}, {x:130, y:14}, {x:140, y:14}, {x:150, y:15} ] }] }, options: { legend: {display: false}, scales: { xAxes: [{ticks: {min: 40, max:160}}], yAxes: [{ticks: {min: 6, max:16}}], } } });
var xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
},
options:{...}
});
new Chart("myPlot12", { type: 'line', data: { labels: [50,60,70,80,90,100,110,120,130,140,150], datasets: [{ fill:false, lineTension: 0, backgroundColor:"rgba(0,0,0,1)", borderColor: "rgba(0,0,0,0.2)", data: [7,8,8,9,9,9,10,11,14,14,15] }] }, options: { legend: {display: false}, scales: { yAxes: [{ticks: {min: 6, max:16}}], } } });
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
backgroundColor: "rgba(0,0,0,1.0)",
borderColor: "rgba(0,0,0,0.1)",
data: yValues
}]
},
options:{...}
});
If you set the borderColor to zero, you can scatter plot the line graph:
borderColor: "rgba(0,0,0,0)",
var xValues = [100,200,300,400,500,600,700,800,900,1000]; new Chart("myChart13", { type: "line", data: { labels: xValues, datasets: [{ data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478], borderColor: "red", fill: false }, { data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000], borderColor: "green", fill: false }, { data: [300,700,2000,5000,6000,4000,2000,1000,200,100], borderColor: "blue", fill: false }] }, options: { legend: {display: false} } });
var xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
borderColor: "red",
fill: false
},{
data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
borderColor: "green",
fill: false
},{
data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
borderColor: "blue",
fill: false
}]
},
options: {
legend: {display: false}
}
});
var xValues = []; var yValues = []; generateData("x * 2 + 7", 0, 10, 0.5); new Chart("myFunc1", { type: "line", data: { labels: xValues, datasets: [{ fill: false, pointRadius: 1, borderColor: "rgba(255,0,0,0.5)", data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "y = x * 2 + 7", fontSize: 16 } } }); function generateData(value, i1, i2, step = 1) { for (let x = i1; x <= i2; x += step) { yValues.push(eval(value)); xValues.push(x); } }
var xValues = [];
var yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
pointRadius: 1,
borderColor: "rgba(255,0,0,0.5)",
data: yValues
}]
},
options: {...}
});
function generateData(value, i1, i2, step = 1) {
for (let x = i1; x <= i2; x += step) {
yValues.push(eval(value));
xValues.push(x);
}
}
var xValues = []; var yValues = []; generateData("Math.sin(x)", 0, 10, 0.5); new Chart("myFunc2", { type: "line", data: { labels: xValues, datasets: [{ fill: false, pointRadius: 2, borderColor: "rgba(0,0,255,0.5)", data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "y = x * 2 + 7", fontSize: 16 } } }); function generateData(value, i1, i2, step = 1) { for (let x = i1; x <= i2; x += step) { yValues.push(eval(value)); xValues.push(x); } }
Same as Linear Graph. Just change the generateData parameter(s):
generateData("Math.sin(x)", 0, 10, 0.5);
var chart13 = new Chart("myPlot13", { type: 'bar', data: { labels: ["Italy","France","Spain","USA","Argentina"], datasets: [{ backgroundColor:["red", "green","blue","orange","brown"], data: [55, 49, 44, 24, 15] }] }, options: { legend: {display: false}, scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, title: { display: true, text: "World Wide Wine Production 2018", fontSize: 16 } } });
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {...}
});
Color Shades:
var barColors = [
"rgba(0,0,255,1.0)",
"rgba(0,0,255,0.8)",
"rgba(0,0,255,0.6)",
"rgba(0,0,255,0.4)",
"rgba(0,0,255,0.2)",
];
Just change type from "bar" to "horizontalBar":
type: "horizontalBar",
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; var yValues = [55, 49, 44, 24, 15]; var barColors = [ "#b91d47", "#00aba9", "#2b5797", "#e8c3b9", "#1e7145" ]; var chart = new Chart("myPlot14", { type: "pie", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { title: { display: true, text: "World Wide Wine Production 2018" } } });
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});
var ctx = document.getElementById("myPlot15").getContext("2d"); var xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; var yValues = [55, 49, 44, 24, 15]; var barColors = [ "#b91d47", "#00aba9", "#2b5797", "#e8c3b9", "#1e7145" ]; var chart = new Chart(ctx, { type: "doughnut", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { title: { display: true, text: "World Wide Wine Production 2018" } } });