Heatmap Charts

Heatmaps display data as colored cells in a grid, useful for visualizing patterns across two dimensions.

Basic Heatmap

page.ApexChart(chart => {
    chart.Title.Text("Activity Heatmap");

    chart.AddHeatmap("Mon", new[] { ("09:00", 12d), ("12:00", 42d), ("15:00", 31d) })
         .AddHeatmap("Tue", new[] { ("09:00", 18d), ("12:00", 55d), ("15:00", 27d) })
         .AddHeatmap("Wed", new[] { ("09:00", 24d), ("12:00", 63d), ("15:00", 48d) });

    chart.PlotOptions(o => o.HeatmapOptions(h => h.RadiusValue(2)))
         .DataLabels(d => d.Enable(false))
         .Colors(RGBColor.Blue);
});

Styling Options

• Rounded cells: chart.PlotOptions(o => o.HeatmapOptions(h => h.RadiusValue(2)))
• Palette: chart.Colors(...)
• Labels: chart.DataLabels(d => d.Enable(false))
• Categories: chart.XAxis(x => x.SetCategories(...))

Color Scale

chart.PlotOptions(o => o.HeatmapOptions(h => h
    .RadiusValue(2)
    .ColorScaleOptions(cs => cs
        .AddRange(0, 20, "#00A100", "Low")
        .AddRange(21, 50, "#FFB200", "Medium")
        .AddRange(51, 100, "#FF0000", "High"))));