Welcome, developers! Are you eager to add interactive and visually appealing charts to your website? Look no further! In this comprehensive tutorial, we will guide you step-by-step on how to create stunning charts for your HTML and CSS website using the powerful Chart.js library. So, without further ado, let’s dive in and captivate your website visitors with engaging data visualizations.
Section 1: Introduction to Chart.js
To begin with, let’s get acquainted with Chart.js, a popular JavaScript library that simplifies the process of creating beautiful and interactive charts. Moreover, Chart.js enhances your website by presenting complex data in a clear and understandable format. Whether you’re a novice or an experienced developer, Chart.js empowers you to create stunning charts with ease.
Section 2: Setting Up the Project | HTML CSS Chart.js
Now that you’re ready to embark on this exciting journey, let’s set up the necessary files and structure for your charts. Pay close attention to the following steps:
- Firstly, create a new folder on your computer to neatly organize your project files. This will ensure a streamlined development process.
- Inside this dedicated folder, create two essential files: “index.html” and “styles.css”. These files will serve as the foundation of your chart creation process.
- Open the “index.html” file in your preferred text editor and establish the basic HTML structure. This will provide a solid starting point for your chart implementation.
- To ensure proper styling and presentation, link your “styles.css” file to the HTML file using the <link> tag. This will facilitate the seamless integration of your charts with the overall design of your website.
Section 3: Creating a Bar Chart
Now that the groundwork is laid, let’s focus on creating a visually appealing bar chart using Chart.js. Follow these steps to bring your data to life:
- Begin by adding a <canvas> element with a unique ID that will serve as the container for your bar chart. This canvas will provide the canvas on which your chart will be rendered.
- Next, integrate the Chart.js library into your project by adding the necessary script tag in your HTML file. This step is crucial to leverage the powerful functionalities of Chart.js.
- Create a new JavaScript file named “chart.js” to house the code for your bar chart, including the chart data and options. This separation of concerns ensures a modular and organized approach.
- Now comes the exciting part! Utilize the power of Chart.js to render your bar chart on the canvas and customize it to meet your specific requirements. This is where you can truly unleash your creativity and make your chart visually stunning.
Section 4: Creating a Doughnut Chart
With the bar chart mastered, it’s time to explore the creation of an attention-grabbing doughnut chart using Chart.js. Follow these steps to expand your charting repertoire:
- Add another <canvas> element with a unique ID to act as the container for your doughnut chart. This additional canvas will enable the creation of your doughnut chart.
- Create a separate JavaScript file called “chart2.js” dedicated to the code for your doughnut chart. This separation of logic allows for better code organization and maintainability.
- Define the necessary data and options specific to your doughnut chart. This step ensures that your doughnut chart accurately represents the data you want to convey.
- Leverage the capabilities of Chart.js to generate the mesmerizing doughnut chart and make any desired adjustments.
Section 5: Conclusion and Next Steps
Congratulations on successfully learning how to create captivating charts for your HTML and CSS website using Chart.js! By diligently following the step-by-step instructions outlined in this tutorial, you have acquired the knowledge and tools to present your data in an engaging and visually appealing manner.
To further expand your skills, we encourage you to explore additional chart types offered by Chart.js, such as line charts, pie charts, and more. Additionally, feel free to experiment with various customization options to align the charts seamlessly with your website’s aesthetics and branding.
Happy coding! Enjoy the exhilarating process of creating stunning charts that effectively communicate your data to your website visitors.
Video Tutorial
Source codes
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>charts</title>
</head>
<body>
<div class="container">
<div class="chart">
<canvas id="barchart" width="300" height="300"></canvas>
</div>
<div class="chart">
<canvas id="doughnut" width="300" height="300"></canvas>v
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
<script src="chart1.js"></script>
<script src="chart2.js"></script>
</body>
</html>
styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #d4bdde;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 200px;
}
.chart {
padding: 2rem;
border: 1px solid #f49131;
border-radius: 1rem;
background: #251c35;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
}
chart1.js
const ctx = document.getElementById('barchart').getContext('2d');
const barchart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Safari', 'Chrome', 'Firefox', 'CriOS', 'Opera', 'Others'],
datasets: [{
label: 'Pageviews by Browsers',
data: [2, 19, 13, 25, 2, 13],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
chart2.js
const ctx2 = document.getElementById('doughnut').getContext('2d');
const doughnut = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['Safari', 'Chrome', 'Firefox', 'CriOS', 'Opera', 'Others'],
datasets: [{
label: '# of Votes',
data: [12, 19, 10, 5, 8, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Don’t forget to Subscribe to our YouTube Channel for more.
