Tilemaps

Tilemaps are maps where each area is represented by tiles of equal shape. Highcharts Maps supports four different tilemap types: Circlemap, Diamondmap, Honeycomb, and Squaremap, each with a different tile shape.

For more detailed samples and documentation check the API.

Honeycomb maps

Honeycomb maps use offset hexagonal tiles in a honeycomb pattern. This is the default tilemap type.

Click here to check the code.

Circlemaps

Circlemaps use offset circular tiles.

Click here to check the code.

Diamondmaps

Diamondmaps use offset rhombus tiles in a diamond weave pattern.

Click here to check the code.

Squaremaps

Square tilemaps are just Heatmap series with slightly different default values. Heatmaps are covered in detail in our Heatmap series article.

How to create a tilemap

Tilemaps require the following module modules/tilemap.js with Highcharts Maps only. Add also this module modules/heatmap.js in case of using Highcharts.

Use the series.tileShape option to switch between the different tile shapes. Currently, four shapes are supported “circle”, “diamond”, “hexagon”and “square”. The default shape is “hexagon”.

Data structure

The data structure is the same for all tilemap types. x and y properties set the position of the tile on the grid, and value sets the value of the tile for use with a colorAxis. For more options see the series document. Note that for hexagon, circle and diamond tile shapes, the grid is offset with coordinates as follows:

Click here to check the code.

Tips

1. The orientation of tilemaps can be inverted by using the chart.inverted option. For more control over offset tile positioning, also see the xAxis.reversed and yAxis.reversed options.

Click here to check the code.

2. The spacing between points in tilemaps can be controlled with the series.pointPadding option. Point padding can also be set per point.

Click here to check the code.