Loading Please Wait...
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 many built-in chart types.
Chart.js provides different ways to install and use such as CDN, jsDelivr, NPM, and local downloaded files.
Visit Chart.js website to learn more.
Include CDN delivery link in with the script tag. Need to regularly check and update for CDN URL.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
Include jsDelivr delivery link in with the script tag. Need to regularly check and update for jsDelivr URL.
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
You can download and use local files.
<script src="path/to/chartjs/dist/chart.umd.js"></script>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
label: 'Series 1',
data: [10, 60, 40, 80, 30, 5, 0],
fill: true,
borderColor: '#ff5071',
backgroundColor: '#ff5071'
},
{
label: 'Series 2',
data: [5, 70, 50, 70, 40, 15, 10],
fill: true,
borderColor: '#fc8d2a',
backgroundColor: '#fc8d2a',
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
label: 'Series 1',
data: [10, 60, 40, 80, 30, 5, 0],
fill: true,
borderColor: '#ff5071',
backgroundColor: '#ff5071'
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Series 1',
data: [
{x:0, y:0, r:10},
{x:10, y:10, r:10},
{x:20, y:20, r:10},
{x:30, y:15, r:10}
],
fill: true,
borderColor: '#ff5071',
backgroundColor: '#ff5071'
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie', //or doughnut
data: {
labels: ['#04f5c6', '#fc8d2a', '#ff5071'],
datasets: [{
label: 'Series 1',
data: [100, 50, 400],
backgroundColor: [
'#04f5c6',
'#fc8d2a',
'#ff5071'
],
hoverOffset: 4
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
label: 'Series 1',
data: [10, 60, 40, 80, 30, 5, 0],
fill: false,
borderColor: '#ff5071',
backgroundColor: '#ff5071'
},
{
label: 'Series 2',
data: [5, 70, 50, 70, 40, 15, 10],
fill: false,
borderColor: '#fc8d2a',
backgroundColor: '#fc8d2a',
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['#04f5c6', '#fc8d2a', '#ff5071'],
datasets: [{
label: 'Series 1',
data: [100, 50, 400],
backgroundColor: [
'#04f5c6',
'#fc8d2a',
'#ff5071'
],
hoverOffset: 4
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'Series 1',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
},{
label: 'Series 2',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Series 1',
data: [
{x:0, y:0},
{x:10, y:10},
{x:20, y:20},
{x:30, y:15},
{x:40, y:30},
{x:50, y:25},
],
fill: true,
borderColor: '#ff5071',
backgroundColor: '#ff5071'
}]
}
});
</script>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved