In this article, we will learn to implement area charts using Canvas JS plugin.
Area Charts are a great way to quickly and easily visualize things to show the average overtime on an area chart. Area charts are different from line graphs. Area charts are primarily used for the summation of quantitative data. however, the area between the line and the area chart is filled in with shading or color.
An area chart is different from a line chart by the addition of shading between lines and a baseline, like in a bar chart.
Uses of area charts:
- It represents changes in data or values over time.
- It helps in visualizing quantitative changes very effectively and quickly.
- It helps in showing irregular changes like visualization of tax rates or interest rates by using step area charts.
- It also helps in showing smooth or gradual changes by using spline area charts.
Syntax:
new CanvasJS.Chart($("#ID"), {
data: [{
type: "area",
dataPoints: [
{...},
]
}]
});Approach:
- In the HTML design, use the <div> tag for showing the area chart.
- In the script part of the code, instantiate the CanvasJS object by setting the data and other options properties of the library.
- Render the chart using the render() method of the Canvas JS plugin.
- Set other attributes or properties as needed for the styling of the chart.
- Make charts depending on the data available for code implementation.
CDN link:
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
Example 1: The following code shows a simple area chart using the Canvas JS plugin to display mobile phones sale over time.( Some given years)
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<script src=
</script>
</head>
<body>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
// Instantiate the CanvasJS object
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
title: {
text: "Number of mobile phones Sold"
},
// Setting the minimum and maximum date for the x axis
axisX: {
minimum: new Date(2014, 01, 25),
maximum: new Date(2017, 09, 15),
valueFormatString: "DD MMM YY"
},
axisY: {
title: "Mobile phone Sales number"
},
// Actual data for rendering in the chart with labels
data: [{
type: "area",
dataPoints: [
{ x: new Date(2014, 05, 01),y: 73000,
label:"Samsung"},
{ x: new Date(2015, 03, 11),y: 61100,
label:"Nokia"},
{ x: new Date(2015, 02, 15),y: 47000,
label: "Oneplus" },
{ x: new Date(2015, 03, 30),y: 59790,
label: "Oneplus" },
{ x: new Date(2016, 03, 19),y: 74888,
label: "Samsung" },
{ x: new Date(2016, 05, 22),y: 51111,
label: "Infinix" },
{ x: new Date(2016, 04, 17),y: 58000,
label: "Nokia" },
{ x: new Date(2016, 02, 25),y: 56000,
label: "Samsung" },
{ x: new Date(2017, 09, 01),y: 78300,
label: "Nokia"}
]
}]
});
// Render the chart in the above HTML div element
chart.render();
}
</script>
</body>
</html>
|
Output:
Example 2: The following code shows a simple area chart using the Canvas JS plugin displaying vertical and horizontal index data points with the highest and lowest value.
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<script src=
</script>
</head>
<body>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
// Instantiate the Canvas JS object
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Simple Chart with Index Labels"
},
data: [{
type: "area",
// x and y datapoints for rendering in the chart
// with highest and lowest data using indexLabel
dataPoints: [
{ x: 20, y: 75 },
{ x: 25, y: 85 },
{ x: 30, y: 53 },
{ x: 40, y: 65 },
{ x: 51, y: 95,
indexLabel: "Highest" },
{ x: 60, y: 68 },
{ x: 72, y: 38 },
{ x: 72, y: 54 },
{ x: 130, y: 60 },
{ x: 110, y: 36 },
{ x: 125, y: 49 },
{ x: 140, y: 20,
indexLabel: "Lowest" }
]
}]
});
//Render chart in the above HTML div element
chart.render();
}
</script>
</body>
</html>
|
Output:
Example 3: The following code demonstrates the step area chart for mobile phone sales. A Step area chart is used to show the gradual increase in mobile phone sales. Refer to the code and output.
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<script src=
</script>
</head>
<body>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
// Instantiate the canvas JS object
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
title: {
text: "Number of mobile phones Sold"
},
// Setting the minimum and maximum dates
// for x axis along with the format
axisX: {
minimum: new Date(2014, 01, 25),
maximum: new Date(2017, 09, 15),
valueFormatString: "MMM YY"
},
axisY: {
title: "Mobile phone Sales number"
},
// Actual data to render in the chart
data: [{
type: "stepArea",
dataPoints: [
{ x: new Date(2014, 05, 01),
y: 43000},
{ x: new Date(2015, 03, 11),
y: 49100},
{ x: new Date(2015, 04, 15),
y: 57000},
{ x: new Date(2015, 04, 30),
y: 78290},
{ x: new Date(2016, 05, 19),
y: 74188},
{ x: new Date(2016, 05, 22),
y: 71000},
{ x: new Date(2016, 06, 12),
y: 71520},
{ x: new Date(2016, 08, 29),
y: 66000},
{ x: new Date(2017, 03, 01),
y: 78300}
]
}]
});
// Render chart object in the HTML div element
chart.render();
}
</script>
</body>
</html>
|
Output:
Example 4: The following code displays the smooth and gradual changes in data points using the spline area chart.
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<script src=
</script>
</head>
<body>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
// Instantiate the canvas JS chart object
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
title: {
text: "Spline area chart for mobile phones Sale"
},
axisY: {
title: "Mobile phone Sales number"
},
// Actual data used to render chart
data: [{
type: "splineArea",
dataPoints: [
{ x: new Date(2000, 0),
y: 43000},
{ x: new Date(2004, 0),
y: 49100},
{ x: new Date(2008, 0),
y: 57000},
{ x: new Date(2012, 0),
y: 78290},
{ x: new Date(2016, 0),
y: 44188},
{ x: new Date(2018, 0),
y: 71000},
{ x: new Date(2022, 0),
y: 72520},
{ x: new Date(2024, 0),
y: 56000},
{ x: new Date(2026, 0),
y: 75000},
{ x: new Date(2030, 0),
y: 64300}
]
}]
});
// Render chart object in the HTML div element
chart.render();
}
</script>
</body>
</html>
|
Output:
Conclusion: Area charts are majorly used for showing changes in data trends representing the quantitative data. It represents some statistics of data over a period of time for easy comparison which helps in further analysis. It also helps in comparing two or more quantities..They are mostly used to communicate the overall trend of progress for an item, a person, or a product.