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

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"
/>

One color for every row

Each row of a heatmap is a series, and without colors each row takes a color of the palette, so a cell can only be read against the cells of its own row. Give colors one color and every row takes it, shaded by value, so the busiest cell of the whole chart is the strongest:

Every row in one color, shaded by value

<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]],
    ]"
    :options="['colors' => ['var(--color-wk-accent)']]"
    aria-label="Commit activity by hour and weekday, busiest on Thursday at 16:00"
/>

Range-colored — server CPU

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"
/>

On the sequential scale

The sequential scale colors a value from faint to strong, here the hours with the most orders. enableShades is off so each cell shows the step of its range as declared. In dark mode the scale runs outward from the dark page, so the quietest hours stay the faintest in both modes.

Orders per hour and weekday on the sequential scale

<x-wirekit-chart
    library="apexcharts"
    type="heatmap"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[
        ['label' => '09:00', 'data' => [2, 4, 3, 5, 2]],
        ['label' => '12:00', 'data' => [6, 8, 7, 9, 6]],
        ['label' => '15:00', 'data' => [4, 5, 6, 7, 11]],
        ['label' => '18:00', 'data' => [9, 12, 10, 14, 16]],
    ]"
    :options="[
        'plotOptions' => [
            'heatmap' => [
                'enableShades' => false,
                'colorScale' => [
                    'ranges' => [
                        ['from' => 0, 'to' => 4, 'color' => 'var(--color-wk-chart-seq-2)', 'name' => 'quiet'],
                        ['from' => 5, 'to' => 9, 'color' => 'var(--color-wk-chart-seq-4)', 'name' => 'busy'],
                        ['from' => 10, 'to' => 100, 'color' => 'var(--color-wk-chart-seq-6)', 'name' => 'peak'],
                    ],
                ],
            ],
        ],
    ]"
    aria-label="Orders per hour and weekday"
/>

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.