O'Reilly logo

Highcharts Essentials by Bilal Shahid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a heat map

Heat maps were added in Highcharts in Version 4. A heat map displays data in a graphical format using colors and color ranges. Each value is contained in a matrix and is assigned a mid-tone color among extreme colors based on its value. This creates a visual representation of values in the map.

The data points are given in the form of an array that contains three elements. The first two elements are zero-index-based position coordinates in the matrix, and the third element is the actual value of the data point.

Note

Be sure to include the highcharts-4.x.x/js/modules/heatmap.js file before you continue with the example.

In the following example, we will plot the monthly climate data for Toronto with the help of a heat map by utilizing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required