Implementing Syncfusion HeatMap Chart component for ASP.NET Core Razor Pages. Use this skill ALWAYS when the user needs to create heat maps to visualize two-dimensional data, customize cells with gradients or fixed colors, configure axes with multiple types, add legends with flexible positioning, bind array or JSON data, enable tooltips and cell selection, create bubble heat maps, or customize appearance and styling. Essential for data visualization, pattern detection, and matrix visualization use cases.
Implementing Syncfusion HeatMap Chart component for ASP.NET Core Razor Pages. Use this skill ALWAYS when the user needs to create heat maps to visualize two-dimensional data, customize cells with gradients or fixed colors, configure axes with multiple types, add legends with flexible positioning, bind array or JSON data, enable tooltips and cell selection, create bubble heat maps, or customize appearance and styling. Essential for data visualization, pattern detection, and matrix visualization use cases.
Visualize two-dimensional matrix data using color-coded cells.
Display business, scientific, operational, or analytical values in a grid layout.
Bind HeatMap data from C# collections in ASP.NET Core Razor Pages.
Keep HeatMap markup in Index.cshtml and move data preparation/configuration into Index.cshtml.cs.
Configure category, numeric, or date-time axes.
Add title, legend, tooltip, cell labels, and palette customization.
Use gradient or fixed color mapping for continuous or classified values.
Enable cell selection and handle HeatMap events.
Improve performance for larger datasets by using the correct rendering mode.
Component Overview
The Syncfusion ASP.NET Core HeatMap Chart is a data visualization component used to represent two-dimensional data through color intensity. Each cell represents a value, and the color of that cell is calculated from the configured palette.
It is useful for:
Sales performance matrices.
Attendance and productivity reports.
Correlation matrices.
Temperature or density visualization.
Inventory status dashboards.
Sensor reading grids.
Usage or activity analysis over time.
Key Capabilities
Supports array and JSON-style data binding.
Supports category, numeric, and date-time axes.
Supports gradient and fixed palettes.
Supports cell labels, legends, and tooltips.
Supports SVG, Canvas, and Auto rendering modes.
Supports single and multiple cell selection.
Supports event customization such as cell render, tooltip render, and cell selected.
Supports Razor Pages implementation with Index.cshtml and Index.cshtml.cs.
Documentation and Navigation Guide
Getting Started
Use this section for:
Installing the required Syncfusion ASP.NET Core package.
Add the Syncfusion script manager before the closing body tag in Pages/Shared/_Layout.cshtml.
<ejs-scripts></ejs-scripts>
Data Binding and Rendering Modes
The HeatMap Chart can bind data in multiple forms:
Two-dimensional array data.
JSON table data.
JSON cell data.
Remote data.
Strongly typed C# model collections.
For Razor Pages, the recommended approach is to keep data and configuration objects in Index.cshtml.cs and bind them in Index.cshtml through @Model.
Rendering modes:
SVG: Best for small and moderate datasets.
Canvas: Best for large datasets.
Auto: Lets the component choose the suitable rendering mode.
Bubble HeatMap Visualization
Bubble HeatMap is useful when the cell should show values through bubble size, color, or both.
Common bubble options:
Bubble by size.
Bubble by color.
Bubble by sector.
Bubble by size and color.
Use bubble HeatMap when each cell needs more visual differentiation than a plain rectangular tile.
Appearance and Styling
The HeatMap appearance can be customized using:
titleSettings
cellSettings
paletteSettings
legendSettings
tooltipSettings
backgroundColor
margin
height
width
For ASP.NET Core Razor Pages, strongly typed objects should be declared in Index.cshtml.cs and passed to the Tag Helper from Index.cshtml.
Axis Configuration
The HeatMap Chart supports these axis value types:
Category
Numeric
DateTime
Use category axes when labels are names such as months, products, regions, or departments.
Use numeric axes when X and Y values are index-based or numeric ranges.
Use date-time axes when values represent dates or time intervals.
Legend and Palette System
Use legends to explain how colors map to values.
Palette types:
Gradient: Best for continuous values.
Fixed: Best for classified values or thresholds.
Legend positions:
Right
Left
Top
Bottom
Tooltips and Cell Selection
Tooltips can be enabled using showTooltip="true" on the HeatMap.
Tooltip style can be customized with tooltipSettings.
Cell selection can be enabled using:
allowSelection="true"
enableMultiSelect="true"
Use events such as cellSelected, cellClick, and tooltipRender when custom interaction logic is required.
Advanced Scenarios and Best Practices
Recommended best practices:
Keep only UI markup in Index.cshtml.
Keep data, palettes, font styles, labels, and strongly typed models in Index.cshtml.cs.
Use @Model.PropertyName for all Razor Page bindings.
Use renderingMode="Auto" for responsive performance behavior.
Use showLabel="false" for very large datasets.
Use strongly typed classes instead of anonymous objects when the data is reused.
Use dataSourceSettings when JSON-style cell mapping is required.
Keep the namespace in Index.cshtml.cs, Index.cshtml, and _ViewImports.cshtml consistent.
Use real Razor/HTML tags in .cshtml files. Do not paste encoded tags like <ejs-heatmap> into the actual Razor file.
Quick Start Example
The following example demonstrates a complete ASP.NET Core Razor Pages HeatMap Chart implementation using both Index.cshtml and Index.cshtml.cs.
This version keeps the Razor file clean and moves data generation, palette configuration, title styling, tooltip styling, and labels into the PageModel.
Replace YourApplication with your actual project namespace. For example, if your project is named AspNetCoreWebApp, use AspNetCoreWebApp.Pages.
public List<HeatMapPalette> Palette { get; set; } = new List<HeatMapPalette>
{
new HeatMapPalette { Value = 0, Color = "#C2E7EC", Label = "Very Low" },
new HeatMapPalette { Value = 25, Color = "#AED6DC", Label = "Low" },
new HeatMapPalette { Value = 50, Color = "#87C1C9", Label = "Medium" },
new HeatMapPalette { Value = 75, Color = "#4CA3AF", Label = "High" },
new HeatMapPalette { Value = 100, Color = "#1B7280", Label = "Very High" }
};
Pattern 3: Fixed Palette Categorization
Use fixed palette mapping when values represent discrete ranges, statuses, or classification levels.
Recommended usage:
Set type="Fixed" in paletteSettings.
Define the palette as List<HeatMapPalette> in Index.cshtml.cs.
Ensure the property name used in the Razor file exists in the PageModel.
Use this for risk levels, availability states, SLA status, or category-based heat maps.
Yes, the following snippet will work only if FixedPalette exists in Index.cshtml.cs and the snippet is pasted as real tags in a .cshtml file.
public List<HeatMapPalette> FixedPalette { get; set; } = new List<HeatMapPalette>
{
new HeatMapPalette { Value = 0, Color = "#DFF6DD", Label = "Low" },
new HeatMapPalette { Value = 50, Color = "#FFF4CE", Label = "Medium" },
new HeatMapPalette { Value = 80, Color = "#FDE7E9", Label = "High" }
};
If you want to use the fixed palette in the main quick start sample, replace this block:
