# Heatmap chart in Figma

> A matrix where colour carries the value

A heatmap encodes a two-dimensional table as a colour grid, which turns a wall of numbers into a pattern. It is excellent for spotting where the hot spots are and poor for reading any individual figure, so it works best with the numbers printed in the cells.

## Available in 4 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Highcharts | 4 |
| D3 · Nivo | 1 |
| ApexCharts | 2 |
| ECharts | 11 |

18 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The heatmap chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- Any row-by-column matrix: hour by weekday, feature by segment, correlation matrices.
- You want the pattern first and the numbers second.

## Use something else when

- Exact values are the point — use a table.
- The scale spans orders of magnitude; almost every cell will look the same.

## The data it needs

A matrix: first column is the row label, remaining headers are the columns.

|   | Mon | Tue | Wed |
| --- | --- | --- | --- |
| 09:00 | 4 | 9 | 6 |
| 12:00 | 18 | 22 | 17 |
| 17:00 | 11 | 8 | 14 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types