---
title: Heatmap
description: Activity heatmaps with multi-series, range, and rounded variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/treemap
---

# Heatmap

Heatmaps visualize two-dimensional categorical data with color-encoded values — GitHub's contribution graph is the canonical example. ApexCharts ships heatmap support natively.

> Note: `heatmap` is an ApexCharts-specific chart type. Chart.js does not have a native equivalent; switching to `chartjs` throws `TypeNotSupportedException`.

## Basic Example — Activity heatmap

:::preview{title="Daily commit activity by weekday × hour"}
<x-wirekit-chart
    library="apexcharts"
    type="heatmap"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[
        ['label' => '08:00', 'data' => [3, 5, 4, 6, 2]],
        ['label' => '12:00', 'data' => [1, 2, 1, 3, 1]],
        ['label' => '16:00', 'data' => [8, 12, 9, 14, 7]],
        ['label' => '20:00', 'data' => [4, 6, 5, 7, 3]],
    ]"
    aria-label="Commit activity heatmap"
/>
:::

## Range-colored — server CPU

:::preview{title="CPU usage by server × hour (%)"}
<x-wirekit-chart
    library="apexcharts"
    type="heatmap"
    :labels="['00:00', '06:00', '12:00', '18:00']"
    :datasets="[
        ['label' => 'web-1', 'data' => [12, 18, 65, 42]],
        ['label' => 'web-2', 'data' => [15, 22, 78, 56]],
        ['label' => 'web-3', 'data' => [8, 14, 48, 32]],
        ['label' => 'db-1',  'data' => [42, 38, 71, 65]],
    ]"
    :options="[
        'plotOptions' => [
            'heatmap' => [
                'colorScale' => [
                    'ranges' => [
                        ['from' => 0, 'to' => 30, 'color' => 'var(--color-wk-success)', 'name' => 'low'],
                        ['from' => 31, 'to' => 70, 'color' => 'var(--color-wk-warning)', 'name' => 'medium'],
                        ['from' => 71, 'to' => 100, 'color' => 'var(--color-wk-danger)', 'name' => 'high'],
                    ],
                ],
            ],
        ],
    ]"
    aria-label="Server CPU usage heatmap"
/>
:::

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Treemap](./treemap.md) for hierarchical 2D breakdowns
- [Radar](./radar.md) for multi-dimensional comparisons on a circular layout

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.