”;
Highcharts – Overview
Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.
Features of Highcharts Library
Let us now discuss a few important features of the Highcharts Library.
-
Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS.
-
Multitouch Support − Supports multitouch on touch screen based platforms like android and iOS.Ideal for iPhone/iPad and android based smart phones/ tablets.
-
Free to Use − Open source and is free to use for non-commercial purpose.
-
Lightweight − highcharts.js core library with size nearly 35KB, is an extremely lightweight library.
-
Simple Configurations − Uses json to define various configurations of the charts and very easy to learn and use.
-
Dynamic − Allows to modify chart even after chart generation.
-
Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.
-
Configurable tooltips − Tooltip comes when a user hovers over any point on a chart. Highcharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically.
-
DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories.
-
Export − Export chart to PDF/ PNG/ JPG / SVG format by enabling export feature.
-
Print − Print chart using web page.
-
Zoomablity − Supports zooming chart to view data more precisely.
-
External data − Supports loading data dynamically from server. Provides control over data using callback functions.
-
Text Rotation − Supports rotation of labels in any direction.
Supported Chart Types
Highcharts library provides the following types of charts −
Sr.No. | Chart Type & Description |
---|---|
1 |
Line Charts Used to draw line/spline based charts. |
2 |
Area Charts Used to draw area wise charts. |
3 |
Pie Charts Used to draw pie charts. |
4 |
Scatter Charts Used to draw scattered charts. |
5 |
Bubble Charts Used to draw bubble based charts. |
6 |
Dynamic Charts Used to draw dynamic charts where user can modify charts. |
7 |
Combinations Used to draw combinations of variety of charts. |
8 |
3D Charts Used to draw 3D charts. |
9 |
Angular Gauges Used to draw speedometer type charts. |
10 |
Heat Maps Used to draw heat maps. |
11 |
Tree Maps Used to draw tree maps. |
In our subsequent chapters, we will discuss each type of above mentioned charts in details with examples.
Licence
Highcharts is open source and is free to use for non-commercial purpose. In order to use Highcharts in commercial projects, follow the link − License and Pricing
Highcharts – Environment Setup
In this chapter, we will discuss how to set up the Highcharts library to be used in web application development.
Highcharts requires jQuery as a dependency. First, we will install the jQuery library and then the Highcharts library.
Install jQuery
There are two ways to use jQuery.
-
Download − Download it locally from jQuery.com and use it.
-
CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, Google host. This means using CDN moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it will not have to be re-downloaded.
Using Downloaded jQuery
Include the jQuery JavaScript file in the HTML page using the following script −
<head> <script src = "/jquery/jquery.min.js"></script> </head>
Using CDN
We are using the CDN versions of the jQuery library throughout this tutorial.
Include the jQuery JavaScript file in the HTML page using the following script −
<head> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> </head>
Install Highcharts
The following are the two ways to use Highcharts.
-
Download − Download it locally from highcharts.com and use it.
-
CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, the Highcharts host – Code.Highcharts.Com.
Using Downloaded Highcharts
Include the Highcharts JavaScript file in the HTML page using the following script −
<head> <script src = "/highcharts/highcharts.js"></script> </head>
Using CDN
We are using the CDN versions of the Highcharts library throughout this tutorial.
Include the Highcharts JavaScript file in the HTML page using the following script −
<head> <script src = "https://code.highcharts.com/highcharts.js"></script> </head>
Highcharts – Configuration Syntax
In this chapter, we will showcase the configuration required to draw a chart using the Highcharts API.
Step 1: Create HTML Page
Create an HTML page with the jQuery and Highcharts javascript libraries.
HighchartsTestHarness.htm
<html> <head> <title>Highcharts Tutorial</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() { }); </script> </body> </html>
Here the container div is used to contain the chart drawn using Highcharts library.
Step 2: Create Configurations
Highcharts library uses very simple configurations using json syntax.
$(''#container'').highcharts(json);
Here json represents the json data and configuration which the Highcharts library uses to draw a chart within the container div using the highcharts() method. Now, we will configure the various parameters to create the required json string.
title
Configure the title of the chart.
var title = { text: ''Monthly Average Temperature'' };
subtitle
Configure the subtitle of the chart.
var subtitle = { text: ''Source: WorldClimate.com'' };
xAxis
Configure the ticker to be displayed on the X-Axis.
var xAxis = { categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'' ,''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec''] };
yAxis
Configure the title, plot lines to be displayed on the Y-Axis.
var yAxis = { title: { text: ''Temperature (xB0C)'' }, plotLines: [{ value: 0, width: 1, color: ''#808080'' }] };
tooltip
Configure the tooltip. Put suffix to be added after value (y-axis).
var tooltip = { valueSuffix: ''xB0C'' }
legend
Configure the legend to be displayed on the right side of the chart along with other properties.
var legend = { layout: ''vertical'', align: ''right'', verticalAlign: ''middle'', borderWidth: 0 };
series
Configure the data to be displayed on the chart. Series is an array where each element of this array represents a single line on the chart.
var series = [ { name: ''Tokyo'', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: ''New York'', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: ''Berlin'', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: ''London'', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ];
Step 3: Build the json data
Combine all the configurations.
var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series;
Step 4: Draw the chart
$(''#container'').highcharts(json);
Example
Consider the following example to further understand the Configuration Syntax −
highcharts_configuration.htm
<html> <head> <title>Highcharts Tutorial</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 title = { text: ''Monthly Average Temperature'' }; var subtitle = { text: ''Source: WorldClimate.com'' }; var xAxis = { categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec''] }; var yAxis = { title: { text: ''Temperature (xB0C)'' }, plotLines: [{ value: 0, width: 1, color: ''#808080'' }] }; var tooltip = { valueSuffix: ''xB0C'' } var legend = { layout: ''vertical'', align: ''right'', verticalAlign: ''middle'', borderWidth: 0 }; var series = [{ name: ''Tokyo'', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: ''New York'', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: ''Berlin'', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: ''London'', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; $(''#container'').highcharts(json); }); </script> </body> </html>
Result
Verify the result.
Highcharts – Line Charts
Line charts are used to draw line/spline based charts. In this section, we will discuss the different types of line and spline based charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Basic line
Basic line chart. |
2 | With data labels
Chart with data labels. |
3 | Ajax loaded data, clickable points
Chart drawn after retrieving data from server. |
4 | Time series, zoomable
Chart with time series. |
5 | Spline with inverted axes
Spline chart having inverted axes. |
6 | Spline with symbols
Spline chart using symbols for heat/rain. |
7 | Spline with plot bands
Spline chart with plot bands. |
8 | Time data with irregular intervals
Chart of a large set of time based data. |
9 | Logarithmic axis
Chart depicting the logarithmic axis. |
Highcharts – Area Charts
Area charts are used to draw area based charts. In this section, we will discuss the different types of area based charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Basic Area
Basic area chart. |
2 | Area with negative values
Area chart having negative values. |
3 | Stacked area
Chart having areas stacked over one another. |
4 | Percentage area
Chart with data in percentage terms. |
5 | Area with missing points
Chart with missing points in the data. |
6 | Inverted axes
Area using inverted axes. |
7 | Area-spline
Area chart using spline. |
8 | Area range
Area chart using ranges. |
9 | Area range and line
Area chart using range and line. |
Highcharts – Bar Charts
Bar charts are used to draw area based charts. In this section, we will discuss the different types of bar based charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Basic Bar
Basic bar chart. |
2 | Stacked Bar
Bar chart having bar stacked over one another. |
3 | Negative Stacked area
Bar chart with negative stack. |
Highcharts – Column Charts
Column charts are used to draw column based charts. In this section, we will discuss the different types of column based charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Basic Column
Basic column chart. |
2 | Column with negative values
Column chart having negative values. |
3 | Stacked column
Chart having column stacked over one another. |
4 | Stacked and Grouped column
Chart with column in stacked and grouped form. |
5 | Column with stacked percentage
Chart with stacked percentage. |
6 | Column with rotated labels
Column Chart with rotated labels in columns. |
7 | Column with drilldown
Column Chart with drill down capability. |
8 | Column with fixed placement
Column Chart with fixed placement. |
9 | Data defined in HTML table
Column Chart using Data defined in HTML table. |
10 | Column Range
Column Chart using ranges. |
Highcharts – Pie Charts
Pie charts are used to draw pie based charts. In this section, we will discuss the different types of pie based charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Basic Pie
Basic pie chart. |
2 | Pie with Legends
Pie chart with Legends. |
3 | Donut Chart
Donut Chart. |
4 | Semi circle Donut
Semi circle Donut chart. |
5 | Pie with drill down
Pie chart with drill down capability. |
6 | Pie chart with gradient
Pie chart with gradient fill. |
7 | Pie chart with monochrome
Pie chart with monochrome fill. |
Highcharts – Scatter Charts
Scatter charts are used to draw scatter based charts. In this section, we will discuss the different types of scatter based chart(s).
Sr.No. | Chart Type & Description |
---|---|
1 | Scatter Chart
Scatter Chart. |
Highcharts – Bubble Charts
Bubble charts are used to draw bubble based charts. In this section, we will discuss the different types of bubble based chart(s).
Sr.No. | Chart Type & Description |
---|---|
1 | Bubbles Chart
Bubbles Chart. |
2 | 3D Bubbles Chart
3D Bubbles Chart. |
Highcharts – Dynamic Charts
Dynamic charts are used to draw data based charts where data can change after rendering of chart. In this section, we will discuss the different types of dynamic chart.
Sr.No. | Chart Type & Description |
---|---|
1 | Spline updating each second
Spline Chart updating each second. |
2 | Click to add a point
Chart with point addition capability. |
Highcharts – Combinations
Combination charts are used to draw mixed charts; for example, bar chart with pie chart. In this section, we will discuss the different types of combinations charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Column, Line and Pie
Chart with Column, Line and Pie. |
2 | Dual Axes, Line and Column
Chart with Dual Axes, Line and Column. |
3 | Multiple Axes
Chart having Multiple Axes. |
4 | Scatter with regression line
Scatter chart with regression line. |
Highcharts – 3D Charts
3D charts are used to draw 3-dimensional charts. In this section, we will discuss the different types of 3D charts.
Sr.No. | Chart Type & Description |
---|---|
1 | 3D Column
3D Column Chart. |
2 | 3D Column with null
3D Column Chart with null and 0 values. |
3 | 3D Column with stacking
3D Column Chart with stacking and grouping. |
4 | 3D Pie
3D Pie Chart. |
5 | 3D Donut
3D Donut Chart. |
Highcharts – Angular Gauges
Angular Gauges charts are used to draw meter/gauge type charts. In this section, we will discuss the different types of Angular Gauges charts.
Sr.No. | Chart Type & Description |
---|---|
1 | Angular Gauge
Angular Gauge Chart. |
2 | Solid Gauge
Solid Gauge Chart. |
3 | Clock
Clock. |
4 | Gauge with dual axes
Gauge Chart with dual axes. |
5 | VU Meter
VU Meter Chart. |
Highcharts – Heat Maps
Heat Map charts are used to draw heat map type charts. In this section, we will discuss the different types of Heat Maps.
Sr.No. | Chart Type & Description |
---|---|
1 | Heat Map
Heat Map. |
2 | Large Heat Map
Large Heat Map. |
Highcharts – Tree Maps
Tree Map charts are used to draw tree map type charts. In this section, we will discuss the different types of Tree Maps.
Sr.No. | Chart Type & Description |
---|---|
1 | Tree Map
Tree Map with color axis. |
2 | Tree Map with Levels
Tree Map with Levels. |
3 | Large Tree Map
Large Tree Map. |
”;