Skip to main content
WireKit
Copy for LLM

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.

See Also

  • Treemap for hierarchical 2D breakdowns
  • Radar for multi-dimensional comparisons on a circular layout

Design Tokens

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