Chart Gallery

/

Heatmap in Python

Heatmaps in Python

A python heatmap (also written as heat map, and sometimes called a heatmap chart or heatmap plot) maps a 2D grid of values onto a color scale so patterns, clusters, and gradients read at a glance. With xy you build an interactive heatmap in Python from a NumPy matrix: pan, zoom, and hover work by default, and the grid stays crisp as you navigate.

Jump to creating a heatmap, choosing a colormap, or adding a colorbar.

Create a Heatmap

Pass a 2D array of values to heatmap, with optional x and y coordinates for the grid edges. This is the minimal Python heatmap:

Diverging Colormap with a Fixed Domain

A signed field reads best with a diverging colormap, an explicit domain=(min, max) pinned symmetrically around zero, and an xy.colorbar() so the scale is visible:

Correlation-Matrix Heatmap

A small labeled grid turns a heatmap into a correlation matrix: pass cell coordinates for x and y, relabel the ticks with feature names, fix domain=(-1, 1), and add a colorbar with explicit ticks:

Colormaps and Value Domain

The colormap controls how values map to color — sequential maps like "viridis" suit magnitudes, while a diverging map reads better around a midpoint. Set domain to fix the value range the colors span, so separate heatmaps stay comparable instead of each rescaling to its own min and max.

Add a Colorbar Scale

A heatmap is only readable with a legend for its colors. Add an to draw a visible scale that ties each color back to a value. Use opacity to blend the grid over other marks when you overlay a heatmap on additional context.

Heatmap Options

OptionPurpose
colormapNamed color scale, e.g. "viridis", mapping values to color.
domain(min, max) value range the colors span; fixes the scale across charts.
opacityGrid opacity from 0 to 1, for overlaying on other marks.

Add to show the value-to-color scale. Pass column names with data= instead of arrays when your data is a table.

API Reference

xy.heatmap_chart

A heatmap chart composing `heatmap` marks and axis/legend children.

Props

PropTypeDescription
*childrenComponent

Marks, axes, annotations, and chart chrome.

titleOptional[str]

Title shown above the plot.

widthint | str

Chart width in pixels or a CSS size such as ``"100%"``.

heightint | str

Chart height in pixels or a CSS size such as ``"100%"``.

paddingUnion[float, Sequence[float], None]

Plot margins, as one value or a sequence of side values. Use zero for an edge-to-edge sparkline.

dataTableLike

Chart-level data used by marks that omit their own ``data``.

class_nameOptional[str]

CSS class applied to the chart container.

class_namesOptional[dict[str, str]]

CSS classes keyed by stable chart DOM slot.

styleOptional[dict[str, StyleValue]]

Inline style overrides for the chart container.

stylesOptional[dict[str, dict[str, StyleValue]]]

Inline style mappings keyed by stable chart DOM slot.

on_hoverOptional[Callable[[dict], None]]

Callback receiving hover event payloads.

on_clickOptional[Callable[[dict], None]]

Callback receiving picked-mark click payloads.

on_brushOptional[Callable[[dict], None]]

Callback receiving brush event payloads.

on_selectOptional[Callable[[Selection], None]]

Callback receiving data-space selections.

on_view_changeOptional[Callable[[dict], None]]

Callback receiving viewport change payloads.

hoverOptional[bool]

Whether pointer movement emits hover events.

clickOptional[bool]

Whether picked marks emit click events.

selectOptional[bool]

Whether shift-drag box selection is enabled.

brushOptional[bool]

Whether brush selection is enabled.

crosshairOptional[bool]

Whether plot-aligned hover guides are shown.

navigationOptional[bool]

Whether browser pan and zoom navigation is enabled.

panOptional[bool]

Whether plain-drag panning is enabled.

pan_axesOptional[tuple[str, ...]]

Declared axis IDs translated by pan gestures.

zoomOptional[bool]

Whether viewport zoom is enabled.

default_drag_actionOptional[DefaultDragAction]

Initial action performed by a plain plot drag.

zoom_axesOptional[tuple[str, ...]]

Declared axis IDs changed by zoom gestures and controls.

zoom_limitsOptional[ZoomLimits]

Minimum and maximum magnification globally or by axis.

wheel_zoomOptional[bool]

Whether wheel and trackpad zoom is available.

box_zoomOptional[bool]

Whether box zoom is available as a drag action.

zoom_buttonsOptional[bool]

Whether modebar Zoom In/Out commands are available.

double_click_resetOptional[bool]

Whether double-click restores ``reset_axes``.

reset_axesOptional[tuple[str, ...]]

Declared axis IDs restored by reset.

link_groupOptional[str]

Identifier used to synchronize charts in the browser.

link_axesOptional[tuple[str, ...]]

Axes synchronized within the link group.

FAQ

How do I make a heatmap in Python?

Pass a 2D array to xy.heatmap(z, x=x, y=y) inside xy.heatmap_chart(...) and render it. The rendered heatmap graph pans, zooms, and hovers without extra configuration.

How do I change the heatmap colors?

Set colormap on heatmap, for example colormap="viridis". Sequential maps suit magnitudes; diverging maps read better around a midpoint.

How do I add a color scale legend to a heatmap?

Add to the chart to draw a visible scale tying each color back to a value.

How do I keep two heatmaps on the same color scale?

Set the same domain=(min, max) on both so the colors span an identical value range instead of each rescaling to its own data.

Built with Reflex