A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.

Setting up the heat map series

Heat maps require the modules/heatmap.js file to be loaded.

The heat map series is defined by setting the type to heatmap. A heat map has an X and Y axis like any cartesian series. The point definitions however, take three values, x, y as well as value, which serves as the value for color coding the point. These values can also be given as an array of three numbers.

The color axis

Heat maps borrow a central concept from Highcharts Maps, the color axis. See the docs article on color axis for details


Heat maps have an interpolation feature, which allows for displaying seamlessly transitioning data points. Check out the featured demo here.


See the featured demos at Heat map and Large heatmap. The latter demonstrates how a HTML5 canvas can be plugged in to optimize rendering times.

See heatmap in the Highcharts Maps docs.