Hello, This article is about how we can create an Area chart using High chart in js. Area chart is also known as a mountain chart. Area charts are similar to line charts, but are commonly used to visualize volumes.
CDN for using Area chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Create a HTML file i.e, Area chart.html and use below code-
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-Brahmadescription">
Basic Area Chart example using High chart.
</p>
</figure>
Now, create a CSS file for styling of the Area chart.
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 450px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid yellow;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: pink;
}
After that, create a JS file for showing data in Area chart.
Highcharts.chart('container', {
chart: {
type: 'area'
},
accessibility: {
description: ''
},
title: {
text: 'Highest Employees Salary'
},
subtitle: {
text: 'Created By Brahma Prakash Shukla'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
},
accessibility: {
rangeDescription: 'Range: 1940 to 2017.'
}
},
yAxis: {
title: {
text: 'Salary'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Aman',
data: [
null, null, null, null, null, 2, 9, 13, 50, 170, 299, 438, 841,
1169, 1703, 2422, 3692, 5543, 7345, 12298, 18638, 22229, 25540,
28133, 29463, 31139, 31175, 31255, 29561, 27552, 26008, 25830,
26516, 27835, 28537, 27519, 25914, 25542, 24418, 24138, 24104,
23208, 22886, 23305, 23459, 23368, 23317, 23575, 23205, 22217,
21392, 19008, 13708, 11511, 10979, 10904, 11011, 10903, 10732,
10685, 10577, 10526, 10457, 10027, 8570, 8360, 7853, 5709, 5273,
5113, 5066, 4897, 4881, 4804, 4717, 4571, 4018, 3822, 3785, 3805,
3750, 3708, 3708
]
}, {
name: 'Kishan',
data: [null, null, null, null, null, null, null, null, null,
1, 5, 25, 50, 120, 150, 200, 426, 660, 863, 1048, 1627, 2492,
3346, 4259, 5242, 6144, 7091, 8400, 9490, 10671, 11736, 13279,
14600, 15878, 17286, 19235, 22165, 24281, 26169, 28258, 30665,
32146, 33486, 35130, 36825, 38582, 40159, 38107, 36538, 35078,
32980, 29154, 26734, 24403, 21339, 18179, 15942, 15442, 14368,
13188, 12188, 11152, 10114, 9076, 8038, 7000, 6643, 6286, 5929,
5527, 5215, 4858, 4750, 4650, 4600, 4500, 4490, 4300, 4350, 4330,
4310, 4495, 4477
]
}]
});
Now, your chart will look like this -
![Area chart using Highchart]()
Another example of Area Chart -
<html>
<head>
<title>Area Chart</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var chart = {
type: 'area'
};
var title = {
text: 'IT Salary Range'
};
var subtitle = {
text: 'Created By Brahma Prakash Shukla'
};
var xAxis = {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
};
var yAxis = {
title: {
text: 'Salary Range'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
};
var tooltip = {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
};
var plotOptions = {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
};
var series = [
{
name: 'Developer',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
},
{
name: 'Designer',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
},
{
name: 'Tester',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 100, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 5129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 20055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 27431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 11000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 9000, 18000, 18000, 17000, 16000]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Your Area chart will look like this -
![Area chart using Highchart]()
Hopefully, this article helps you in creating an Area chart. In other articles, I will also expalin different types of charts using highchart.
Thanks