Highcharts is a feature-rich library in Javascript used for interactive and responsive web visualization using various kinds of charts.
Introduction
Highcharts is a powerful JavaScript charting library for creating interactive, responsive web visualizations. It supports various chart types like line, bar, and pie, making it ideal for business dashboards and analytics. With seamless integration into frameworks like React and Angular, real-time data updates, and export options, Highcharts simplifies data representation. This blog covers its key features, setup, and how it enhances data-driven decision-making.
Installation & Setup
To include Highcharts in your project, you can either install it with ‘npm’ as a package or you can load it from the CDN.
Using npm
npm install highcharts --saveThis will install Highcharts as a Node module and save it as a dependency in your package.json.
Loading from the CDN
Include the javascript files in the ‘head’ section of your HTML webpage as shown below.
<script src="https://code.highcharts.com/highcharts.js"></script>This will load Highcharts from the Content Delivery Network of the official Highcharts server.
Setting up the environment for your first chart using Highcharts
- Create a HTML file in your code editor and initialize the webpage using the boilerplate template code.
- After initializing the webpage, in the ‘head’ section of the code, include the Highcharts library using CDN as described in the installation part.
After the above steps, your code will look like the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
</body>
</html>Now in the body section, give a heading according to your choice and create a ‘div’ with an ID as follows:
<body>
<h1>HighCharts</h1>
<div id="container"></div>
</body>For this specific ‘div’, add the following JavaScript code to the ‘body’ section:
<script>
document.addEventListener('DOMContentLoaded', () => {
})
</script>Now, follow the following steps to get your first chart on the webpage.
- Go to the Demo section on the Highcharts website and select a graph from the various graphs available of various types that you want to include in your webpage.
- Now, click on the ‘Code’ option available on top of the graph and copy the JavaScript code provided.
Above steps are shown step by step in the following images.
Paste the code you copied from the website in the previous JavaScript code you made for the specific ‘div’ in which you wanted your chart.
Your final code will now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<h1>HighCharts</h1>
<div id="container"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
Highcharts.chart("container", {
title: {
text: "U.S Solar Employment Growth",
align: "left",
},
subtitle: {
text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
align: "left",
},
yAxis: {
title: {
text: "Number of Employees",
},
},
xAxis: {
accessibility: {
rangeDescription: "Range: 2010 to 2022",
},
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointStart: 2010,
},
},
series: [
{
name: "Installation & Developers",
data: [
43934, 48656, 65165, 81827, 112143, 142383, 171533, 165174,
155157, 161454, 154610, 168960, 171558,
],
},
{
name: "Manufacturing",
data: [
24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726,
34243, 31050, 33099, 33473,
],
},
{
name: "Sales & Distribution",
data: [
11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243,
29213, 25663, 28978, 30618,
],
},
{
name: "Operations & Maintenance",
data: [
null,
null,
null,
null,
null,
null,
null,
null,
11164,
11218,
10077,
12530,
16585,
],
},
{
name: "Other",
data: [
21908, 5548, 8105, 11248, 8989, 11816, 18274, 17300, 13053,
11906, 10073, 11471, 11648,
],
},
],
responsive: {
rules: [
{
condition: {
maxWidth: 500,
},
chartOptions: {
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom",
},
},
},
],
},
});
});
</script>
</body>
</html>
If you want to insert your own data, then you can easily find the rows where data is entered and edit it to your own data.
Your webpage will now look something like this:
And this is how you make interactive charts very easily using the Highcharts library.
Key Features & Explanation
- Variety of Chart types
Highcharts allows numerous types of charts, including line, bar, pie, scatter plot, and stock and candlestick charts, which represent financial charts. These enable the users to visualize different data in a more effective manner.
- Interactive and Responsive Design
Highcharts supports interactive features like hover tooltips, zooming, panning, and drilldowns. The charts are automatically responsive to various screen sizes, providing the best user experience on all the devices like desktops, tablets and smartphones.
- Data Integration and Real-Time Updates
Highcharts has smooth integration with most data sources such as JSON, APIs, and external files such as CSV or XML. It is also capable of dynamic updates, thus making it ideal for real-time usage such as tracking stock markets and IoT data visualization.
- Customization and Theming
With integrated theming and detailed styling capabilities, Highcharts grants complete control of chart look and feel. The user can alter colors, font, and layouts or use default themes like dark mode and grid-light.
- Exporting and Accessibility
The charts can be exported in various formats such as PNG, JPEG, PDF, and CSV. Highcharts also provides accessibility through ARIA support, keyboard navigation, and high-contrast mode for visually impaired users.
- Extensibility and Framework Support
Highcharts works seamlessly with frameworks like React, Angular, and Vue. It also supports additional modules for advanced chart types such as Gantt charts, heatmaps, and 3D visualizations.
Code Examples
We have already created our first chart using Highchart, and by just using the JavaScript of the chart, we can create any chart on our webpage. Here we will see some examples of different kinds of chart which we can make, by changing the content of the function ‘Highcharts.chart()’.
Line Chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: ' +
'<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
'target="_blank">Wikipedia.com</a>'
},
xAxis: {
categories: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Reggane',
data: [
16.0, 18.2, 23.1, 27.9, 32.2, 36.4, 39.8, 38.4, 35.5, 29.2,
22.0, 17.8
]
}, {
name: 'Tallinn',
data: [
-2.9, -3.6, -0.6, 4.8, 10.2, 14.5, 17.6, 16.5, 12.0, 6.5,
2.0, -0.9
]
}]
});
Area Chart
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
useHTML: true,
text: 'Countries/regions with highest Gt CO<sub>2</sub>-emissions'
},
subtitle: {
text: 'Source: ' +
'<a href="https://energiogklima.no/klimavakten/land-med-hoyest-utslipp/"' +
'target="_blank">Energi og Klima</a>'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.category}, {point.y:,' +
'.1f} billions, {point.percentage:.1f}%.'
}
},
yAxis: {
labels: {
format: '{value}%'
},
title: {
enabled: false
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>' +
': <b>{point.percentage:.1f}%</b> ({point.y:,.1f} billion Gt)<br/>',
split: true
},
plotOptions: {
series: {
pointStart: 1990,
label: {
style: {
fontSize: '1.4em',
opacity: 0.4
}
}
},
area: {
stacking: 'percent',
marker: {
enabled: false
}
}
},
series: [{
name: 'China',
data: [
2.5, 2.6, 2.7, 2.9, 3.1, 3.4, 3.5, 3.5, 3.4, 3.6, 3.6, 3.7,
4.1, 4.8, 5.2, 5.9, 6.5, 7, 7.5, 7.9, 8.6, 9.5, 9.8, 10, 10,
9.9, 9.8, 10, 10.4, 10.7, 10.9, 11.3, 11.4, 11.9
]
}, {
name: 'USA',
data: [
5.1, 5.1, 5.2, 5.3, 5.4, 5.4, 5.6, 5.7, 5.7, 5.8, 6, 5.9, 5.9,
6, 6.1, 6.1, 6.1, 6.1, 5.9, 5.5, 5.7, 5.5, 5.3, 5.5, 5.5, 5.4,
5.3, 5.2, 5.4, 5.3, 4.7, 5, 5.1, 4.9
]
}, {
name: 'EU',
data: [
3.9, 3.8, 3.7, 3.6, 3.6, 3.6, 3.7, 3.7, 3.6, 3.6, 3.6, 3.7, 3.7,
3.7, 3.8, 3.7, 3.7, 3.7, 3.6, 3.3, 3.4, 3.3, 3.3, 3.2, 3, 3.1,
3.1, 3.1, 3, 2.9, 2.6, 2.8, 2.8, 2.6
]
}, {
name: 'India',
data: [
0.6, 0.6, 0.7, 0.7, 0.7, 0.8, 0.8, 0.9, 0.9, 1, 1, 1, 1, 1.1,
1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2, 2.1, 2.2, 2.4,
2.4, 2.6, 2.6, 2.4, 2.7, 2.8, 3.1
]
}]
});
Basic Bar Chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Corn vs wheat estimated production for 2023'
},
subtitle: {
text:
'Source: <a target="_blank" ' +
'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>'
},
xAxis: {
categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
crosshair: true,
accessibility: {
description: 'Countries'
}
},
yAxis: {
min: 0,
title: {
text: '1000 metric tons (MT)'
}
},
tooltip: {
valueSuffix: ' (1000 MT)'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'Corn',
data: [387749, 280000, 129000, 64300, 54000, 34300]
},
{
name: 'Wheat',
data: [45321, 140000, 10000, 140500, 19500, 113500]
}
]
});
Scatter Plot
Highcharts.setOptions({
colors: [
'rgba(5,141,199,0.5)', 'rgba(80,180,50,0.5)', 'rgba(237,86,27,0.5)'
]
});
const series = [{
name: 'Basketball',
id: 'basketball',
marker: {
symbol: 'circle'
}
},
{
name: 'Triathlon',
id: 'triathlon',
marker: {
symbol: 'triangle'
}
},
{
name: 'Volleyball',
id: 'volleyball',
marker: {
symbol: 'square'
}
}];
async function getData() {
const response = await fetch(
'https://www.highcharts.com/samples/data/olympic2012.json'
);
return response.json();
}
getData().then(data => {
const getData = sportName => {
const temp = [];
data.forEach(elm => {
if (elm.sport === sportName && elm.weight > 0 && elm.height > 0) {
temp.push([elm.height, elm.weight]);
}
});
return temp;
};
series.forEach(s => {
s.data = getData(s.id);
});
Highcharts.chart('container', {
chart: {
type: 'scatter',
zooming: {
type: 'xy'
}
},
title: {
text: 'Olympics athletes by height and weight'
},
subtitle: {
text:
'Source: <a href="https://www.theguardian.com/sport/datablog/2012/aug/07/olympics-2012-athletes-age-weight-height">The Guardian</a>'
},
xAxis: {
title: {
text: 'Height'
},
labels: {
format: '{value} m'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight'
},
labels: {
format: '{value} kg'
}
},
legend: {
enabled: true
},
plotOptions: {
scatter: {
marker: {
radius: 2.5,
symbol: 'circle',
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
jitter: {
x: 0.005
}
}
},
tooltip: {
pointFormat: 'Height: {point.x} m <br/> Weight: {point.y} kg'
},
series
});
}
);
There are various other type of charts available on Highcharts which are very useful. You should definitely check it out.
Use Cases
Business Dashbords: Used for tracking financial performance and operational efficiency.
Financial Reports: Helps in visualizing the stock market trends, real-time prices and comparison with previous data.
Scientific Data: Helps in visualization of research findings, climate trends, and statistical analysis.
E-commerce Analysis: Keeps track of the sales trends, customer behaviour, and conversion rates for making better policies.
Social Media Analytics: Visualizes user engagement, content performance, and marketing campaign effectiveness.
Education & E-Learning: It is often used in tracking the progress of the student, to make the students visualize the complex concepts, etc.
Conclusion
In conclusion, Highcharts is a feature-rich JavaScript charting library used to create interactive, customizable charts. It is easy to use, has different types of charts, and suits dashboards, reports, and real-time charts. It’s well-documented and community-backed, making it easy to represent data, allowing for better insights and decision-making. Use Highcharts to make raw data exciting, professional-grade visualizations easily.