Sample Area Chart in Chart.js
How to draw an area chart in chart.js
The chart.js javascript charting library is the most popular js based charting library based on Github stars and number of downloads. It is a highly customizable charting library that can be used to create several types of charts including line charts, bar charts, bubble charts, pie charts, mixed charts and area charts as well as several others. The high level of customization using plugins in chart.js makes it a very useful tool for manipulating and visualizing large datasets with ease.
In this post, we are going to discuss how to create an area chart with the help of chart.js.
An area chart is a visual representation of data that utilizes lines and filled area to present information. Whether you are showcasing trends, or variations over a specific prior, the area charts can prove highly helpful to present such visualizations. Such charts are used a lot by businesses and business intelligence professionals dealing with large volumes of data which needs to be presented in visual format. Area charts can be used to easily understand complex trends and data relationships as well as fluctuations.
It is generally easy to draw an area chart using chart.js library. However, we will first need to install chart.js to start working.
Install Chart.js
Installing chart.js is possible in two main ways. You can either install it using the cdn script or npm on your server. If you do not want to run terminal commands, you can add the cdn script to the head of your website and otherwise you can install the library easily with the help of npm.
To Install using the cdn link, add the following script to your website head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
To install using npm, ssh to your server and run the following command:
npm install chart.js
Draw an area chart using chart.js
While creating charts using chart.js, we first draw a canvas to hold the chart.
<div> <canvas id="myChart"></canvas> </div>
Now that the canvas is ready, we can draw the rest of the chart. We will draw an area chart with the help of two datasets. To create the area chart, we will first have to draw the line chart and in the current case, two line charts. Here are our two datasets:
data: { datasets: [{
type: 'line',
label: 'Dataset 1',
data: [10, 30, 45, 48, 65],
}, {
type: 'line',
label: 'Dataset 2',
data: [70, 62, 42, 18, 10],
}],
The two datasets represent two different trends in the same year over the first five months of the year. However, these two datasets will draw the two line charts only. We are trying to draw area charts that include line and fill color. So, we will set the property fill to true for each of these two datasets and then set a distinct background color for each of the two datasets.This will help us generate the area chart visualizing the two data trends.
Our entire script with the appropriate customizations will look like the following:
<div> <canvas id="myChart"></canvas> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
new Chart(ctx,
{
data: { datasets: [{
type: 'line',
label: 'Dataset 1',
data: [10, 30, 45, 48, 65],
fill: true,
backgroundColor: "pink",
}, {
type: 'line',
label: 'Dataset 2',
data: [70, 62, 42, 18, 10],
fill: true,
backgroundColor: "lightseagreen",
}],
labels: ['January', 'February', 'March', 'April', 'May'],
},
options: { interactions: {mode: 'index'}, responsive: 'true', plugins: {
legend: {position: 'bottom'},
},
scales: {
y: [{
beginAtZero: false,
}
]
}
}
}
);
</script>
As you can see, we have set the fill property for each of the two datasets to true and assigned a distinct backgroundColor for each one. The chart we finally were trying to draw looks like the following:
.png)