Create Heatmap

Everything you need to know to create the chart you want.

Overview

Heatmaps visualise two categorical dimensions with colour intensity representing the magnitude of a metric. They’re ideal for spotting patterns, hotspots, or anomalies in dense data.

When to use it

• Analysing performance across two axes (e.g., day of week × hour of day).

• Highlighting utilisation levels, error rates, or engagement.

• Communicating correlations in matrix form.

Avoid heatmaps when precise values matter more than pattern recognition; a table or bar chart may be clearer.

Data requirements

• Categories for rows and columns.

• Numeric value for each cell; missing values default to null (shown as blanks).

• Larger datasets benefit from consistent ordering (e.g., chronological).

Style options available

Group	Control	Input type	Options	Description
Colors	Color palette	palette	—	Palette applied to series; sets the default colours for the chart.
General → Heatmap	Border for cells	number	—	Colour of the borders around individual heatmap cells.
General → Heatmap	Border color	color	—	Stroke colour drawn around each bar, column, or slice.
General → Data labels	Show data labels	boolean	—	Shows numeric labels directly on data points.
General → Data labels	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
General → Data labels	Font name	text	—	Font family used for titles, labels, or legend text.
General → Data labels	Font style	text	—	Font weight or style (e.g., bold, italic).
General → Data labels	Font size	number	—	Font size in pixels for the selected text element.
General → Data labels	Font color	color	—	Colour of the text shown for this element.
Axes → X Axis	Show X Axis	boolean	—	Shows or hides the X axis line, ticks, and labels.
Axes → X Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → X Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → X Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → X Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → X Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → X Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → X Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → X Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → X Axis	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
Axes → X Axis	Show every n'th label	number	—	Skips labels so only every nth label is drawn.
Axes → X Axis	Rotation of labels	number	—	Rotation angle applied to axis or data labels in degrees.
Axes → X Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → X Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Y Axis	Show Y Axis	boolean	—	Shows or hides the Y axis line, ticks, and labels.
Axes → Y Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → Y Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → Y Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → Y Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → Y Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → Y Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → Y Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → Y Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → Y Axis	Labels alignment	select	left, center, right	Horizontal alignment of axis labels relative to the tick mark.
Axes → Y Axis	X offset	number	—	Horizontal offset applied to axis labels.
Axes → Y Axis	Y offset	number	—	Vertical offset applied to axis labels.
Axes → Y Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → Y Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Common	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Common	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Common	Font size	number	—	Font size in pixels for the selected text element.
Axes → Common	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Axes titles	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Axes titles	Font size	number	—	Font size in pixels for the selected text element.
Axes → Axes titles	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	X Axis margin	number	—	Extra padding around the X axis labels for titles.
Axes → Axes titles	Y Axis margin	number	—	Extra padding around the Y axis labels for titles.
Legend → Main	Show legend	boolean	—	Shows or hides the legend box.
Legend → Main	Horizontal align	select	left, center, right	Horizontal alignment for the legend box (left, centre, right).
Legend → Main	Vertical align	select	top, middle, bottom	Vertical alignment for the legend box (top, middle, bottom).
Legend → Main	Layout	select	horizontal, vertical, proximate	Orientation of the legend items (horizontal row, vertical column, or proximate).
Legend → Additional	Margin for legend	number	—	Outer margin around the legend box.
Legend → Additional	Margin top for items	number	—	Top padding inside the legend between items.
Legend → Additional	Margin bottom for items	number	—	Bottom padding inside the legend between items.
Legend → Additional	Distance between items	number	—	Horizontal spacing between legend entries.
Legend → Style	Font name	text	—	Font family used for titles, labels, or legend text.
Legend → Style	Font style	text	—	Font weight or style (e.g., bold, italic).
Legend → Style	Font size	number	—	Font size in pixels for the selected text element.
Legend → Style	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart title	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart title	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart title	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Margin bottom	number	—	Extra space below chart titles or subtitles in pixels.
Title → Chart subtitle	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart subtitle	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart subtitle	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart subtitle	Font color	color	—	Colour of the text shown for this element.

Have problems or want to improve this chart type?

Ping us via [email protected].