Hey everyone, in today's article you will learn How to use ChartJS in HTML in just less than 5 minutes. In this article, I have shared all the steps to use and How to Change the values in ChartJS. So first watch the video on How our chartJS will look on the browser. And then see the code with full explanations.
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using ChartJS</title>
<!-- Linking CSS File -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="charts">
<canvas id="chart1"></canvas>
</div>
<div class="charts">
<canvas id="chart2"></canvas>
</div>
</div>
<!-- Linking CharJS CDN and Script File -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: space-around;
min-height: 100vh;
}
.charts {
background-color: rgb(26, 24, 24);
padding: 10px;
border-radius: 10px;
border: 1px solid rgb(121, 120, 120);
box-shadow: 9px 5px 23px #837b7b;
}
JavaScript
script.js
const barChart = document.getElementById('chart1');
const doughnutChart = document.getElementById('chart2');
new Chart(barChart, {
type: 'bar',
data: {
labels: ['HTML', 'CSS', 'JavaScript', 'Bootstrap', 'NodeJS', 'ExpressJS', 'MySQL'],
datasets: [{
label: 'Skills by Percentage',
data: [90, 70, 70, 50, 80, 70, 90],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
new Chart(doughnutChart, {
type: 'doughnut',
data: {
labels: ['HTML', 'CSS', 'JavaScript', 'Bootstrap', 'NodeJS', 'ExpressJS', 'MySQL'],
datasets: [{
label: '# of Votes',
data: [90, 70, 70, 50, 80, 70, 90],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
