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

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

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.

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store