Syncfusion.Blazor.HeatMap 34.2.7

Syncfusion® Blazor HeatMap Component

A comprehensive Blazor HeatMap Xomponent for visualizing two-dimensional data with color-coded cells. Display matrix-based data with gradient or solid color variations, interactive tooltips, legends, and custom styling using SVG or canvas rendering.

Using this package with an AI coding agent

Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:

Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Key Features

• Matrix Data Visualization - Render large two‑dimensional datasets using color‑coded cells for quick pattern and trend recognition.
• Flexible Color Mapping - Apply gradient or solid color palettes, customize color ranges, and define palette‑based thresholds for meaningful data representation.
• Rich Cell Interaction - Enable cell hover effects, selection behaviors, and custom event handling to create highly interactive data exploration experiences.
• Legends & Tooltips - Use built‑in legends for data range interpretation and tooltips for detailed value insights when hovering over HeatMap cells.
• Multiple Rendering Modes - Render using SVG or Canvas, ensuring optimal visual quality and performance depending on dataset size and device capabilities.
• Advanced Axis Support - Supports numeric, category, and date‑time axes with customization options like rotation, intervals, opposed position, and inversed axis layout.
• Specialized HeatMap Types - Includes Bubble HeatMap (size‑based markers), Calendar HeatMap (time‑series visualization), and sector‑based HeatMaps for richer data expression.
• Data Binding Options - Bind data from arrays, JSON, cell‑based data collections, or table formats using powerful adaptor support.
• Full Customization - Customize cell shape, labels, gridlines, palettes, axis styles, and overall layout to match your application’s design requirements.
• Responsive & High‑Performance Rendering - Designed for large datasets with optimized memory usage and smooth rendering across desktops, tablets, and mobile devices.
• Accessibility & Localization - Includes ARIA attributes, keyboard navigation, and right‑to‑left (RTL) support, along with cultural formatting for global applications.
• Blazor Server & WebAssembly Support - Fully compatible with Blazor Server and Blazor WebAssembly project types.

System Requirements

• .NET 8.0 or later (Blazor Web App, Blazor Server, Blazor WebAssembly and Blazor Hybrid)
• See full requirements: System Requirements.

Installation

Install the HeatMap package, which provides the scripts referenced below:

dotnet add package Syncfusion.Blazor.HeatMap

Add script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
• For Blazor WebAssembly App: add these to wwwroot/index.html.

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the HeatMap component in a Razor page:

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39}
        };
        return dataSource;
    }
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• API Reference
• Live Demos

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a valid license for production use. Syncfusion® licensed software is subject to the terms and conditions of the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET