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 its various configuration options:

$( '#chart_container' ).highcharts({
    chart: {
        type: 'heatmap'
    },
    title: {
        text: 'Monthy Temperature Statistics - Toronto'
    },
    subtitle: {
        text: 'Source: <a href=...