Syncfusion.Blazor.HeatMap
33.2.10
Prefix Reserved
dotnet add package Syncfusion.Blazor.HeatMap --version 33.2.10
NuGet\Install-Package Syncfusion.Blazor.HeatMap -Version 33.2.10
<PackageReference Include="Syncfusion.Blazor.HeatMap" Version="33.2.10" />
<PackageVersion Include="Syncfusion.Blazor.HeatMap" Version="33.2.10" />
<PackageReference Include="Syncfusion.Blazor.HeatMap" />
paket add Syncfusion.Blazor.HeatMap --version 33.2.10
#r "nuget: Syncfusion.Blazor.HeatMap, 33.2.10"
#:package Syncfusion.Blazor.HeatMap@33.2.10
#addin nuget:?package=Syncfusion.Blazor.HeatMap&version=33.2.10
#tool nuget:?package=Syncfusion.Blazor.HeatMap&version=33.2.10
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.razororApp.razorfile. - For Blazor WebAssembly App, add these to
wwwroot/index.htmlfile.
<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
- Register the Syncfusion® Blazor services in the
Program.csfile.
using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();
- 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
- Getting Started with Blazor Web App
- Getting Started with Blazor WebAssembly App
- Feature Overview
- API Reference
- Live Demos
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
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com.
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions 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. |
-
net10.0
- Syncfusion.Blazor.Core (>= 33.2.10)
- Syncfusion.Blazor.Data (>= 33.2.10)
- Syncfusion.Blazor.DataVizCommon (>= 33.2.10)
- Syncfusion.PdfExport.Net.Core (>= 33.2.10)
-
net8.0
- Syncfusion.Blazor.Core (>= 33.2.10)
- Syncfusion.Blazor.Data (>= 33.2.10)
- Syncfusion.Blazor.DataVizCommon (>= 33.2.10)
- Syncfusion.PdfExport.Net.Core (>= 33.2.10)
-
net9.0
- Syncfusion.Blazor.Core (>= 33.2.10)
- Syncfusion.Blazor.Data (>= 33.2.10)
- Syncfusion.Blazor.DataVizCommon (>= 33.2.10)
- Syncfusion.PdfExport.Net.Core (>= 33.2.10)
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.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 |
| 32.1.24 | 284 | 1/19/2026 |