Charts > Heat map

A heat map is a graphical representation of data where values in a matrix are represented as colors, with each cell's color intensity indicating the magnitude of the corresponding data point, commonly used to visualize patterns, correlations, or distributions in large datasets.

The Chart

Monthly average surface temperatures by year, Spain. Source: Our World in Data

Upload data

Playground

Style

Colors

Color range

vue

<template>
  <Heatmap :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <p>{{ tooltip?.data?.name }} :</p>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API

The heatmap is built using HTML and d3.

Data

[
  { name: "row 1", values: [10, 20, 30, 20, 10] },
  { name: "row 2", values: [50, 10, 20, 40, 30] },
  { name: "row 3", values: [5, 30, 20, 10, 50] },
];

Props

Name	Default	Description	Type
data	`[]`	The dataset	Array
categories	`[1, 2, 3, 4, 5]`	The column names	Array
colorRange	`['#BEDDE3', '#04404b']`	The min and max colors	Array
range	`null`	The min and max values (use min, 0, max for diverging scale)	Array
rotateHeaders	`false`	Whether or not to rotate the column names	Boolean
useIndexKey	`false`	Whether or not to use the index as key for rows	Boolean
scaleType	`scaleLinear`	The type of scale to use (e.g. scaleLinear, scaleDiverging)	String
showValues	`true`	Whether or not to show values on hover	Boolean
format	`(d) => d.toFixed(0)`	The format function for values	Function

Events

Name	Argument	Description
@select	`{ target, data }`	Emitted when row is clicked
@hover	`{ target, data, meta: { categories } } \| null`	Emitted when row is hovered

Dependencies

Featured in

Mobile World Capital

Charts > Heat map ​

The Chart ​

Playground ​

Style

Usage Example (with tooltip) ​

Component API ​

Data ​

Props ​

Events ​

Dependencies ​

Featured in ​