Syncfusion.Blazor.HeatMap 33.2.12

Prefix Reserved
dotnet add package Syncfusion.Blazor.HeatMap --version 33.2.12
                    
NuGet\Install-Package Syncfusion.Blazor.HeatMap -Version 33.2.12
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Syncfusion.Blazor.HeatMap" Version="33.2.12" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Syncfusion.Blazor.HeatMap" Version="33.2.12" />
                    
Directory.Packages.props
<PackageReference Include="Syncfusion.Blazor.HeatMap" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Syncfusion.Blazor.HeatMap --version 33.2.12
                    
#r "nuget: Syncfusion.Blazor.HeatMap, 33.2.12"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Syncfusion.Blazor.HeatMap@33.2.12
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Syncfusion.Blazor.HeatMap&version=33.2.12
                    
Install as a Cake Addin
#tool nuget:?package=Syncfusion.Blazor.HeatMap&version=33.2.12
                    
Install as a Cake Tool

Syncfusion® Blazor HeatMap Component

A comprehensive Blazor HeatMap component 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.

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.

Add stylesheet and script references

  • For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
  • For Blazor WebAssembly App, add these to wwwroot/index.html file.
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

  1. Register the Syncfusion® Blazor services in the Program.cs file.
using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();
  1. Add Blazor HeatMap component to your 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

Support

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.

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

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Syncfusion.Blazor.HeatMap:

Package Downloads
Jakar.Extensions.Blazor.Syncfusion

Extensions to aid in development.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
33.2.12 0 6/9/2026
33.2.10 199 6/2/2026
33.2.8 223 5/26/2026
33.2.7 222 5/19/2026
33.2.6 364 5/12/2026
33.2.5 1,199 5/4/2026
33.2.4 586 4/27/2026
33.2.3 1,049 4/21/2026
33.1.49 1,937 4/13/2026
33.1.47 245 4/6/2026
33.1.46 202 3/30/2026
33.1.45 235 3/23/2026
33.1.44 786 3/16/2026
32.2.9 4,510 3/9/2026
32.2.8 258 3/2/2026
32.2.7 1,054 2/23/2026
32.2.5 2,938 2/16/2026
32.2.4 559 2/10/2026
32.2.3 1,322 2/5/2026
32.1.25 247 1/26/2026
Loading failed