Syncfusion Blazor Heatmap Chart

Implementing Syncfusion Blazor HeatMap Chart

NuGet: Syncfusion.Blazor.HeatMap + Syncfusion.Blazor.Themes Namespace: Syncfusion.Blazor.HeatMap

A comprehensive guide for implementing the Syncfusion Blazor HeatMap Chart component to visualize multi-dimensional data using color-coded cells in a matrix layout.

When to Use This Skill

Use this skill when you need to:

• Visualize matrix data with color gradients representing values
• Display correlation matrices or comparison data across two dimensions
• Create thermal or density visualizations showing data intensity
• Show tabular data where cell colors represent magnitudes or categories
• Implement bubble HeatMaps combining size and color to represent multiple data dimensions
• Build data dashboards requiring intuitive grid-based visualizations
• Display time-series data with category or datetime axes
• Visualize large datasets with interactive tooltips and legends
• Create accessible data visualizations with WCAG-compliant features

Component Overview

The Syncfusion Blazor HeatMap Chart component (SfHeatMap) is a powerful data visualization tool that displays multi-dimensional data in a matrix of cells, where each cell's color represents its value. It supports:

• Multiple data binding modes: Array (2D), JSON/Table, and Cell-based
• Flexible axis types: Category, Numeric, and DateTime with multi-level labels
• Two visualization modes: Rectangle cells and Bubble HeatMaps
• Rich customization: Palettes (gradient/fixed), legends, tooltips, titles, and labels
• Interactive features: Cell selection, events, and dynamic rendering
• Accessibility: WCAG compliance, keyboard navigation, and screen reader support
• Advanced features: Content Security Policy support, responsive sizing, performance optimization

Documentation and Navigation Guide

Getting Started & Installation

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• Creating Blazor WebAssembly app (Visual Studio, VS Code, .NET CLI)
• Installing Syncfusion.Blazor.HeatMap NuGet package
• Registering Syncfusion Blazor service
• Adding stylesheets and script resources
• Import namespaces
• First HeatMap component implementation
• Basic data source configuration
• Running and testing the application

Data Binding & Working with Data

📄 Read: references/working-with-data.md

• Data source types overview (Array, JSON/Table, Cell)
• Array data binding with 2D and multi-dimensional arrays
• JSON/Table data binding with adaptor configuration
• Cell data binding for individual cell customization
• Field mapping for x-axis and y-axis
• Data transformation patterns
• Handling empty cells and null values
• Performance considerations for large datasets

Axis Configuration

📄 Read: references/axis.md

• Axis types: Category, Numeric, and DateTime
• Category axis with custom labels
• Numeric axis with range settings (min, max, interval)
• DateTime axis with formatting and interval types
• Axis label customization (rotation, alignment, style)
• Axis label templates
• Multi-level labels for hierarchical data
• Axis inversions and opposed positioning
• Axis title configuration

Appearance & Customization

📄 Read: references/appearance.md

• Cell customizations (borders, highlighting, tile types)
• Margin configuration for spacing
• Title settings (text, alignment, text style)
• Data label configuration (visibility, format, templates)
• Border configuration (width, radius, color)
• Background and container styling
• Text style customization (size, color, font family, weight)
• Template support for data labels
• Responsive design considerations

Color Palettes

📄 Read: references/palette.md

• Palette types: Fixed and Gradient
• Fixed palette with color mapping and value ranges
• Gradient palette with color progression
• Custom color schemes
• Color for empty and null cells
• Built-in palette presets
• Color accessibility considerations
• Color gradient modes (Table, Row, Column)

Legend Configuration

📄 Read: references/legend.md

• Legend visibility and positioning
• Legend types (Gradient, List)
• Legend customization (width, height, alignment)
• Smart legend with toggle cell visibility
• Show percentage in legend
• Legend text style customization
• Legend title configuration
• Segment configuration
• Template support for legend items

Tooltips

📄 Read: references/tooltip.md

• Enabling and configuring tooltips
• Tooltip content customization
• Tooltip templates for array data
• Tooltip templates for JSON data
• Tooltip text style customization
• Border and fill customization
• Animation settings
• Conditional tooltip display

Events & Interactivity

📄 Read: references/events.md

• Component lifecycle events (Load, Loaded)
• CellClick event with event arguments
• CellDoubleClick event
• CellRender event for custom cell rendering
• TooltipRender event for dynamic tooltip content
• LegendRender event for legend customization
• AxisLabelRender event for custom axis labels
• Event handling patterns and best practices
• Performance considerations with events

Bubble HeatMap Variant

📄 Read: references/bubble-heatmap.md

• Bubble HeatMap overview and use cases
• Enabling bubble type (TileType.Bubble)
• Bubble size configuration based on values
• Bubble size types (Absolute, Percentage)
• Bubble color mapping
• Combining bubble size and color for multi-dimensional data
• Data requirements for bubble HeatMaps
• Best practices for bubble visualizations

Advanced Features

📄 Read: references/advanced-features.md

• Dimensions and sizing (width, height, responsive sizing)
• Cell selection modes (Cell, Column, Row)
• Selection customization
• Content Security Policy (CSP) compliance
• Accessibility features (WCAG, WAI-ARIA, keyboard navigation)
• Screen reader support
• Performance optimization for large datasets
• Virtualization strategies
• Server-side rendering considerations

API Reference

📄 Read: references/api-reference.md

• SfHeatMap<TValue> main component
• Core settings classes (Cell, Title, Palette, Legend, Tooltip)
• Axis classes (HeatMapXAxis, HeatMapYAxis)
• Multi-level label configuration
• Bubble configuration classes
• Styling classes (borders, text styles, margins)
• Event argument classes
• Enumerations (CellType, PaletteType, AdaptorType, etc.)
• Complete property and method reference

Quick Start Example

Here's a minimal example to get started with the HeatMap Chart component:

@page "/heatmap"
@using Syncfusion.Blazor.HeatMap

<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();
    }
}

Prerequisites: 1. Install Syncfusion.Blazor.HeatMap NuGet package 2. Register Syncfusion service: builder.Services.AddSyncfusionBlazor(); 3. Add theme stylesheet and script reference in index.html 4. Add namespace: @using Syncfusion.Blazor.HeatMap

Common Patterns

Pattern 1: JSON Data with Custom Axes

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@JsonData">
    <HeatMapDataSourceSettings IsJsonData="true" 
                               AdaptorType="AdaptorType.Table" 
                               XDataMapping="ProductName"
                               YDataMapping="Year" 
                               ValueMapping="Value">
    </HeatMapDataSourceSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
</SfHeatMap>

@code {
    private object[] JsonData = new object[]
    {
        new { ProductName = "Laptop", Year = "2022", Value = 150 },
        new { ProductName = "Desktop", Year = "2022", Value = 80 },
        // ... more data
    };
    
    private string[] XAxisLabels = new string[] { "Laptop", "Desktop", "Tablet", "Phone" };
    private string[] YAxisLabels = new string[] { "2022", "2023", "2024" };
}

Pattern 2: Gradient Palette with Custom Colors

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="#C2E7EC" Value="0"></HeatMapPalette>
            <HeatMapPalette Color="#AEDFE6" Value="25"></HeatMapPalette>
            <HeatMapPalette Color="#7FCDC4" Value="50"></HeatMapPalette>
            <HeatMapPalette Color="#6EB5D0" Value="75"></HeatMapPalette>
            <HeatMapPalette Color="#2D6CA2" Value="100"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</SfHeatMap>

Pattern 3: Bubble HeatMap with Size and Color

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@BubbleData">
    <HeatMapCellSettings TileType="CellType.Bubble" 
                         BubbleType="BubbleType.SizeAndColor">
        <HeatMapBubbleSize Minimum="10" Maximum="30"></HeatMapBubbleSize>
    </HeatMapCellSettings>
    <HeatMapDataSourceSettings IsJsonData="true" 
                               AdaptorType="AdaptorType.Cell"
                               XDataMapping="XAxis"
                               YDataMapping="YAxis"
                               ValueMapping="Value">
        <HeatMapBubbleDataMapping Size="Size" Color="Value"></HeatMapBubbleDataMapping>
    </HeatMapDataSourceSettings>
</SfHeatMap>

Pattern 4: Interactive HeatMap with Events

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapEvents CellClicked="@OnCellClick"
                   TooltipRendering="@OnTooltipRender">
    </HeatMapEvents>
    <HeatMapTooltipSettings>
        <Template>
            @{
                var data = context as TooltipEventArgs;
                <div>@data.XLabel - @data.YLabel: @data.Value</div>
            }
        </Template>
    </HeatMapTooltipSettings>
</SfHeatMap>

@code {
    private void OnCellClick(Syncfusion.Blazor.HeatMap.CellClickEventArgs args)
    {
        Console.WriteLine($"Cell clicked: {args.XLabel}, {args.YLabel}, Value: {args.Value}");
    }
    
    private void OnTooltipRender(Syncfusion.Blazor.HeatMap.TooltipEventArgs args)
    {
        // Customize tooltip content dynamically
    }
}

Key Properties Reference

Common Use Cases

Use Case 1: Sales Performance Dashboard

Visualize sales performance across products and time periods using a HeatMap with gradient colors to highlight high and low performers.

When to use: Monthly/quarterly sales tracking, product comparison, regional performance analysis.

Use Case 2: Correlation Matrix

Display correlation coefficients between multiple variables in a matrix format with diverging color scheme.

When to use: Statistical analysis, data science projects, feature correlation analysis.

Use Case 3: Server Resource Monitoring

Monitor server CPU, memory, or network usage across multiple servers over time periods.

When to use: DevOps dashboards, infrastructure monitoring, capacity planning.

Use Case 4: Calendar HeatMap

Show activity levels or event frequencies across days and months in a calendar-style layout.

When to use: GitHub-style contribution graphs, attendance tracking, activity logs.

Use Case 5: Bubble HeatMap for Multi-Dimensional Data

Use bubble size to represent one metric (e.g., sales volume) and color to represent another (e.g., profit margin).

When to use: Comparing two related metrics simultaneously, portfolio analysis, competitive positioning.

Related Skills

• For TreeMap visualization, see Syncfusion Blazor TreeMap
• For other data visualization components, explore the Data Visualization category

Best Practices

1. Choose appropriate palette types: Use gradient palettes for continuous data and fixed palettes for categorical data 2. Enable tooltips: Always provide tooltips for better data interpretation 3. Use meaningful axis labels: Ensure axis labels clearly describe the data dimensions 4. Optimize for large datasets: Consider data sampling or virtualization for datasets with thousands of cells 5. Test accessibility: Verify keyboard navigation and screen reader compatibility 6. Responsive sizing: Use percentage-based width for responsive layouts 7. Color accessibility: Ensure sufficient color contrast and avoid relying solely on color to convey information 8. Performance: Minimize complex event handlers and template rendering for better performance

Troubleshooting Quick Guide

For detailed troubleshooting, refer to the specific reference files for each feature area.

Advanced Features - Blazor HeatMap Chart Component

This comprehensive guide covers advanced features and configurations for the Syncfusion Blazor HeatMap Chart component, including dimensions, selection, Content Security Policy (CSP) considerations, and accessibility features.

Table of Contents

1. Dimensions and Sizing

• Size Configuration Overview
• Pixel-Based Sizing
• Percentage-Based Sizing

2. Cell Selection

• Enabling Selection
• Selection Interaction Modes
• Single Cell Selection
• Multiple Cell Selection
• Clearing Cell Selection

3. Content Security Policy (CSP)

• Features Supported Under Strict CSP
• Features Requiring CSP Relaxation
• Recommended CSP Configurations

4. Accessibility

• Accessibility Compliance Standards
• WAI-ARIA Attributes
• Screen Reader Support
• Accessibility Testing

5. Performance Optimization 6. Server-Side Rendering Considerations

---

Dimensions and Sizing

Size Configuration Overview

You can control the size of the HeatMap Chart directly using the Width and Height properties. The component supports both pixel-based and percentage-based sizing to provide flexibility for different layout requirements.

Pixel-Based Sizing

Set fixed dimensions for the HeatMap using pixel values. This approach provides precise control over the chart size regardless of the container dimensions.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData" Width="750px" Height="350px">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Best Practices for Pixel-Based Sizing:

• Use pixel values when you need consistent sizing across different screen sizes
• Ideal for fixed-layout designs or when the HeatMap is part of a dashboard with specific dimensions
• Ensure the pixel values are appropriate for your target display resolutions

Percentage-Based Sizing

By setting dimensions in percentage values, the HeatMap adapts to its container size, providing responsive behavior. For example, setting height to '50%' renders the HeatMap at half the container's height.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData" Width="75%" Height="75%">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Best Practices for Percentage-Based Sizing:

• Use percentage values for responsive layouts that adapt to different container sizes
• Ideal for flexible layouts and responsive designs
• Ensure the parent container has a defined height when using percentage-based height
• Combine with CSS media queries for optimal responsive behavior

---

Cell Selection

Enabling Selection

The Blazor HeatMap Chart supports cell selection functionality, allowing users to select single or multiple cells at runtime. Enable this feature using the AllowSelection property and capture selection events using the CellSelected event.

@using Syncfusion.Blazor.HeatMap

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

@code{
    public int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    public string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    public string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Selection Interaction Modes

The HeatMap supports multiple interaction modes for cell selection:

Users can select cells by:

• Single click: Select a single cell
• Click and drag: Select multiple cells by dragging the mouse across them
• Ctrl + Click: Add multiple individual cells to the selection (when EnableMultiSelect is true)

Single Cell Selection

To restrict selection to only one cell at a time, set the EnableMultiSelect property to false. This ensures that selecting a new cell will automatically deselect the previously selected cell.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@DataSource" AllowSelection="true" EnableMultiSelect="false">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
</SfHeatMap>

@code{
    public int YIndex = 0;
    public string[] XLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
    public string[] YLabels = new string[] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
    public double[,] DataSource = new double[,]
    {
         { 73, 39, 26, 39, 94, 0 },
         { 93, 58, 53, 38, 26, 68 },
         { 99, 28, 22, 4, 66, 90 },
         { 14, 26, 97, 69, 69, 3 },
         { 7, 46, 47, 47, 88, 6 },
         { 41, 55, 73, 23, 3, 79 },
         { 56, 69, 21, 86, 3, 33 },
         { 45, 7, 53, 81, 95, 79 },
         { 60, 77, 74, 68, 88, 51 },
         { 25, 25, 10, 12, 78, 14 },
         { 25, 56, 55, 58, 12, 82 },
         {74, 33, 88, 23, 86, 59 }
    };
}

Use Cases for Single Cell Selection:

• Drill-down scenarios where only one data point should be active
• Detail view displays based on a single selected cell
• Simplified user interactions in mobile or touch interfaces

Multiple Cell Selection

By default, the EnableMultiSelect property is set to true, allowing users to select multiple cells simultaneously. Users can:

• Click and drag to select a rectangular region of cells
• Hold the Ctrl key and click individual cells to add them to the selection
• Use touch gestures to select multiple cells on touch-enabled devices

Use Cases for Multiple Cell Selection:

• Batch operations on multiple data points
• Comparison analysis across multiple cells
• Data export or reporting features
• Complex data filtering scenarios

Clearing Cell Selection

Use the ClearSelectionAsync method to programmatically clear all selected cells. This is useful for reset functionality or when transitioning between different views.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap @ref="Heatmap" AllowSelection="true" DataSource="@dataSource">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
</SfHeatMap>

<button @onclick="ClearSelection">Clear Selection</button>

@code {
    public SfHeatMap<int[,]> Heatmap;
   
    public int[,] dataSource = new int[,]
    {
        {73, 39, 26, 39, 94, 0},
        {93, 58, 53, 38, 26, 68},
        {99, 28, 22, 4, 66, 90},
        {14, 26, 97, 69, 69, 3},
        {7, 46, 47, 47, 88, 6},
        {41, 55, 73, 23, 3, 79}
    };
       
    public string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    public string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    
    public async Task ClearSelection()
    {
        await Heatmap.ClearSelectionAsync();
    }
}

Implementation Tips:

• Call ClearSelectionAsync when switching between data sets
• Use in conjunction with filter or search operations
• Provide a visible "Clear Selection" button for better user experience
• Consider clearing selection automatically after performing batch operations

---

Content Security Policy (CSP)

Content Security Policy is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. Understanding CSP requirements is crucial for deploying secure HeatMap implementations.

Features Supported Under Strict CSP

The Syncfusion Blazor HeatMap component supports most features under strict Content Security Policy without requiring the 'unsafe-inline' directive. The following features work fully with strict CSP:

• Data Binding: Both one-dimensional and two-dimensional data sources
• Color Mapping: Palette-based, gradient, and fixed color configurations
• Axis Customization: Labels, ticks, inversed axis, opposed positioning
• Cell Rendering: All cell types and spacing configurations
• Legends: Legend display with customizable positions and styles
• Tooltips: Interactive tooltips with custom templates
• Title and Subtitle: Chart title and subtitle text
• RTL Support: Right-to-left layout support
• Accessibility Features: WAI-ARIA attributes and screen reader support
• Keyboard Navigation: Full keyboard interaction support
• Export Functionality: Image and PDF export capabilities

Features Requiring CSP Relaxation

Cell Selection (both single and multiple) requires the style-src 'unsafe-inline' directive in your Content Security Policy configuration.

Why Selection Requires 'unsafe-inline'

Cell selection applies dynamic inline styles at runtime to provide visual feedback for user interactions. These dynamic styles include:

• Selection Borders and Outlines: Visual indicators around selected cells
• Background Color Changes: Highlighting selected cells with different colors
• Opacity and Brightness Adjustments: Visual emphasis for active selections
• Focus Rings and Highlight Effects: Clear indication of currently selected cells

These visual indicators are applied in real-time during user interaction and are blocked under strict CSP policies that prohibit inline styles.

Disabling Selection for Strict CSP Compliance

If strict CSP compliance is a priority and cell selection is not required, you can:

• Set AllowSelection="false" in your HeatMap configuration
• Simply omit selection-related properties and events
• The rest of the HeatMap functionality will work fully under strict CSP

Recommended CSP Configurations

Strict CSP (Without Cell Selection)

Use this configuration for maximum security when cell selection functionality is not required:

<meta http-equiv="Content-Security-Policy"
      content="base-uri 'self';
               default-src 'self';
               connect-src 'self' https: ws: wss:;
               img-src 'self' data: https:;
               object-src 'none';
               script-src 'self';
               style-src 'self';
               font-src 'self' data:;
               upgrade-insecure-requests;">

Benefits of Strict CSP:

• Maximum protection against XSS attacks
• Compliance with strict security policies
• Suitable for high-security environments
• Full data visualization capabilities maintained

Relaxed CSP (With Cell Selection)

Use this configuration when cell selection functionality is essential for user workflows:

<meta http-equiv="Content-Security-Policy"
      content="base-uri 'self';
               default-src 'self';
               connect-src 'self' https: ws: wss:;
               img-src 'self' data: https:;
               object-src 'none';
               script-src 'self';
               style-src 'self' 'unsafe-inline';
               font-src 'self' data:;
               upgrade-insecure-requests;">

When to Use Relaxed CSP:

• Cell selection is essential for drill-down functionality
• Users need to select multiple cells for data exploration
• Interactive data analysis requires cell selection
• Export or reporting features depend on cell selection

Security Considerations:

• Only relax CSP when selection features are absolutely necessary
• Document the security trade-offs in your project
• Consider implementing additional security measures to compensate
• Regularly review and audit CSP configurations

---

Accessibility

Accessibility Compliance Standards

The Blazor HeatMap Chart component follows commonly used accessibility guidelines and standards, ensuring that the component is usable by all users, including those with disabilities.

Supported Standards:

• ADA (Americans with Disabilities Act)
• Section 508 (U.S. Federal accessibility requirements)
• WCAG 2.2 (Web Content Accessibility Guidelines 2.2)
• WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

Accessibility Compliance Table

Compatibility Legend:

• Full: All features meet the requirement
• Partial: Some features meet the requirement
• Not Applicable: The requirement does not apply to this component

WAI-ARIA Attributes

The Blazor HeatMap Chart implements WAI-ARIA patterns to ensure proper semantic structure and accessibility information for assistive technologies.

Implementation Details:

• The role=img attribute ensures screen readers understand visual content as images
• The role=region attribute helps users navigate between different sections
• aria-label attributes provide context and descriptions for all visible text elements
• Labels are dynamically generated based on data and configuration

Screen Reader Support

The Blazor HeatMap Chart provides comprehensive screen reader support, ensuring all visual information is accessible through audio descriptions.

Elements Read by Screen Readers

Screen Reader Best Practices:

• Provide descriptive titles that explain the chart's purpose
• Use clear, concise axis labels
• Ensure cell values are formatted appropriately
• Include meaningful legend labels
• Test with multiple screen readers (NVDA, JAWS, Narrator)

Example Screen Reader Flow: 1. "Sales Revenue per Employee HeatMap Chart" (Title) 2. "X-axis: Nancy, Andrew, Janet, Margaret, Steven, Michael" (X-axis labels) 3. "Y-axis: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday" (Y-axis labels) 4. "Cell: Nancy, Monday, Value: 73" (Cell information) 5. "Legend: High to Low revenue scale" (Legend information)

Accessibility Testing

Automated Testing with Axe-core

The Blazor HeatMap component's accessibility levels are validated using the axe-core software tool during automated testing. This ensures compliance with WCAG standards and identifies potential accessibility issues.

Testing Process: 1. Integrate axe-core into your testing pipeline 2. Run automated accessibility scans on HeatMap instances 3. Review and address any flagged issues 4. Verify fixes with both automated and manual testing

Manual Testing Recommendations

• Keyboard Navigation: Verify all interactive elements are keyboard accessible
• Screen Reader Testing: Test with multiple screen readers
• Color Contrast: Verify sufficient contrast ratios (minimum 4.5:1 for normal text)
• Focus Indicators: Ensure visible focus states for all interactive elements
• Zoom Testing: Test at 200% zoom to verify layout integrity
• Touch Target Size: Verify touch targets are at least 44x44 pixels

Accessibility Evaluation Sample

To evaluate the HeatMap component's accessibility, you can: 1. Test with browser accessibility tools (Chrome DevTools, Firefox Accessibility Inspector) 2. Use the axe-core NuGet package: Deque.AxeCore.Playwright 3. Refer to the official Syncfusion accessibility samples 4. Conduct user testing with individuals who use assistive technologies

---

Performance Optimization

Data Optimization

Large Dataset Handling:

• Use appropriately sized data arrays for your use case
• Consider data aggregation for very large datasets (>1000 cells)
• Implement virtual scrolling if available for extremely large HeatMaps
• Use efficient data structures (arrays over collections)

Rendering Optimization

Reduce Re-rendering:

• Implement ShouldRender() logic in parent components to control re-rendering
• Use @key directive to optimize Blazor's diff algorithm
• Avoid unnecessary state changes that trigger re-renders
• Cache computed properties in @code blocks

Cell Rendering:

• Limit cell label visibility for large datasets using ShowLabel strategically
• Use appropriate TileType (Rect vs Circle) based on data density
• Consider disabling features like selection for read-only scenarios

Legend and Tooltip Optimization

• Disable tooltips if not needed: <HeatMapTooltipSettings Enable="false">
• Minimize legend complexity for faster rendering
• Use appropriate legend position to avoid layout recalculations

Memory Management

• Properly dispose of HeatMap instances when components are destroyed
• Clear large data references when navigating away
• Monitor memory usage in browser DevTools
• Use @implements IDisposable for cleanup logic

---

Server-Side Rendering Considerations

Blazor Server vs. WebAssembly

Blazor Server Considerations:

• HeatMap rendering occurs on the server with UI updates sent via SignalR
• Be mindful of SignalR payload size with large datasets
• Consider network latency impact on interactive features
• Implement loading indicators for better user experience

Blazor WebAssembly Considerations:

• All rendering occurs in the browser, reducing server load
• Initial load time may be higher due to WASM download
• Better performance for highly interactive HeatMaps
• No server connection required after initial load

Pre-rendering Optimization

Static Rendering:

• Enable pre-rendering for faster initial page loads
• HeatMaps are rendered on the server during initial request
• Reduces perceived load time for users
• Configure in App.razor or _Host.cshtml

Pre-rendering Challenges:

• JavaScript interop not available during pre-render phase
• Avoid client-side only APIs during initialization
• Handle OnAfterRender appropriately for JS initialization

State Management

• Use appropriate state management patterns (Cascade Parameters, State Containers)
• Avoid excessive state synchronization between client and server
• Consider local storage for client-side caching in WebAssembly
• Implement efficient data refresh strategies

Connection Resilience

Blazor Server Specific:

• Implement reconnection UI for SignalR disconnections
• Handle circuit timeout scenarios gracefully
• Consider implementing auto-save for user selections
• Provide offline fallback messages

---

Summary

This guide covered the advanced features of the Syncfusion Blazor HeatMap Chart component:

1. Dimensions: Flexible sizing with pixel and percentage-based options for responsive layouts 2. Selection: Interactive cell selection with single and multiple modes, programmatic control 3. CSP Compliance: Understanding security requirements and appropriate configurations 4. Accessibility: Full WCAG 2.2 compliance, screen reader support, and WAI-ARIA implementation 5. Performance: Optimization strategies for large datasets and efficient rendering 6. Server-Side Rendering: Best practices for both Blazor Server and WebAssembly deployments

These features enable you to create accessible, secure, and performant HeatMap visualizations that meet enterprise requirements while providing excellent user experiences across all platforms and devices.

Syncfusion Blazor HeatMap - API Reference

This document provides a comprehensive reference for the Syncfusion.Blazor.HeatMap namespace, covering all major components, classes, interfaces, and enumerations.

Table of Contents

1. Main Component

• SfHeatMap<TValue>

2. Core Settings Classes

• HeatMapCellSettings
• HeatMapTitleSettings
• HeatMapPaletteSettings
• HeatMapLegendSettings
• HeatMapTooltipSettings
• HeatMapDataSourceSettings

3. Axis Configuration

• HeatMapXAxis
• HeatMapYAxis
• HeatMapAxisLabelSettings
• HeatMapMultiLevelLabels
• HeatMapMultiLevelCategories

4. Bubble Configuration

• HeatMapBubbleDataMapping
• HeatMapBubbleSize

5. Styling Classes

• HeatMapCellBorder
• HeatMapTitleTextStyle
• HeatMapAxisTextStyle
• HeatMapLegendTextStyle
• HeatMapMargin
• HeatMapFont

6. Event Arguments

• CellClickEventArgs
• CellDoubleClickEventArgs
• HeatMapCellRenderEventArgs
• TooltipEventArgs
• LegendRenderEventArgs

7. Enumerations

• CellType
• PaletteType
• AdaptorType
• LegendPosition
• Alignment
• IntervalType
• BubbleType
• ValueType
• BorderType

8. Interfaces

• IHeatMap

---

Main Component

SfHeatMap<TValue>

The main component for rendering heat map visualizations in Blazor applications.

Purpose: Provides a complete heat map control with support for data binding, customization, and interactive features.

Key Properties:

Events:

---

Core Settings Classes

HeatMapCellSettings

Configures the appearance and behavior of heat map cells.

Purpose: Provides fine-grained control over cell rendering, borders, labels, and data mapping.

Key Properties:

HeatMapTitleSettings

Configures the heat map title.

Purpose: Controls the appearance and positioning of the main heat map title.

Key Properties:

HeatMapPaletteSettings

Configures the color palette for heat map cells.

Purpose: Defines color mapping for different data values in the heat map.

Key Properties:

HeatMapLegendSettings

Configures the heat map legend.

Purpose: Controls legend appearance, position, and behavior.

Key Properties:

HeatMapTooltipSettings

Configures tooltip display for heat map cells.

Purpose: Controls tooltip appearance and content when hovering over cells.

Key Properties:

HeatMapDataSourceSettings

Configures data source mapping for the heat map.

Purpose: Defines how data from the source is mapped to heat map cells.

Key Properties:

---

Axis Configuration

HeatMapXAxis

Configures the X-axis of the heat map.

Purpose: Controls X-axis appearance, labels, and behavior.

Key Properties:

HeatMapYAxis

Configures the Y-axis of the heat map.

Purpose: Controls Y-axis appearance, labels, and behavior.

Key Properties:

HeatMapAxisLabelSettings

Configures axis label appearance and behavior.

Purpose: Provides detailed control over axis label rendering.

Key Properties:

HeatMapMultiLevelLabels

Configures multi-level labels for axes.

Purpose: Enables grouping of axis labels with hierarchical categories.

Key Properties:

HeatMapAxisMultiLevelCategories

Defines individual categories for multi-level labels.

Purpose: Specifies start, end, and text for each category in multi-level labels.

Key Properties:

---

Bubble Configuration

HeatMapBubbleDataMapping

Configures data mapping for bubble heat maps.

Purpose: Maps data fields to bubble size and color properties.

Key Properties:

HeatMapBubbleSize

Configures bubble size properties.

Purpose: Controls minimum and maximum bubble sizes in bubble heat maps.

Key Properties:

---

Styling Classes

HeatMapCellBorder

Configures cell border appearance.

Purpose: Controls border width, color, and radius for heat map cells.

Key Properties:

HeatMapTitleTextStyle

Configures title text styling.

Purpose: Controls font, size, color, and other text properties for the title.

Key Properties:

HeatMapAxisTextStyle

Configures axis label text styling.

Purpose: Controls font, size, color, and other text properties for axis labels.

Key Properties:

HeatMapLegendTextStyle

Configures legend text styling.

Purpose: Controls font, size, color, and other text properties for legend labels.

Key Properties:

HeatMapMargin

Configures margin spacing.

Purpose: Defines spacing around heat map elements.

Key Properties:

HeatMapFont

Configures general font properties.

Purpose: Provides basic font styling for various heat map elements.

Key Properties:

---

Event Arguments

CellClickEventArgs

Event arguments for cell click events.

Purpose: Provides information about the clicked cell.

Key Properties:

CellDoubleClickEventArgs

Event arguments for cell double-click events.

Purpose: Provides information about the double-clicked cell.

Key Properties:

HeatMapCellRenderEventArgs

Event arguments for cell rendering events.

Purpose: Allows customization of cells before they are rendered.

Key Properties:

TooltipEventArgs

Event arguments for tooltip rendering events.

Purpose: Allows customization of tooltip content before display.

Key Properties:

LegendRenderEventArgs

Event arguments for legend rendering events.

Purpose: Allows customization of legend items before they are rendered.

Key Properties:

---

Enumerations

CellType

Specifies the type of cell rendering.

Purpose: Determines how cells are visually represented in the heat map.

Values:

PaletteType

Specifies the palette type for color mapping.

Purpose: Determines how colors are distributed across cell values.

Values:

AdaptorType

Specifies the data adaptor type for data binding.

Purpose: Determines how data is processed from the data source.

Values:

LegendPosition

Specifies the position of the legend.

Purpose: Determines where the legend is displayed relative to the heat map.

Values:

Alignment

Specifies horizontal alignment.

Purpose: Controls alignment of text and elements.

Values:

IntervalType

Specifies interval type for date-time axes.

Purpose: Determines the unit of intervals for date-time data.

Values:

BubbleType

Specifies bubble rendering type.

Purpose: Determines how bubbles are sized and rendered.

Values:

ValueType

Specifies the value type for axis data.

Purpose: Determines how axis values are interpreted and formatted.

Values:

BorderType

Specifies border rendering type.

Purpose: Determines which borders are rendered for cells.

Values:

---

Interfaces

IHeatMap

Interface for heat map component interaction.

Purpose: Provides programmatic access to heat map methods and properties.

Key Methods:

---

Usage Notes

Component Initialization

<SfHeatMap DataSource="@HeatMapData"
           XAxis="@XAxisSettings"
           YAxis="@YAxisSettings">
    <HeatMapTitleSettings Text="Sales Analysis"></HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true"></HeatMapCellSettings>
</SfHeatMap>

Event Handling

All event callbacks follow Blazor's EventCallback pattern and can be used to customize behavior:

<SfHeatMap>
   <HeatMapEvents CellClicked="OnCellClicked" CellRendering="@OnCellRendering"></HeatMapEvents>
</SfHeatMap>

@code {
    private void OnCellClicked(CellClickEventArgs args)
    {
        // Handle cell click
    }
    
    private void OnCellRendering(HeatMapCellRenderEventArgs args)
    {
        // Customize cell appearance
    }
}

Data Binding

The heat map supports two main data adaptor types:

1. Cell Adaptor: Data in (X, Y, Value) format 2. Table Adaptor: Data in table/matrix format

Configure using HeatMapDataSourceSettings:

<HeatMapDataSourceSettings AdaptorType="AdaptorType.Cell"
                          XDataMapping="XValue"
                          YDataMapping="YValue"
                          ValueMapping="Value">
</HeatMapDataSourceSettings>

Styling and Theming

All styling classes support cascading and can be nested within their parent settings:

<HeatMapTitleSettings Text="Title">
    <HeatMapTitleTextStyle Size="18px" Color="blue" FontWeight="bold">
    </HeatMapTitleTextStyle>
</HeatMapTitleSettings>

---

Additional Resources

For complete implementation examples and detailed guides, refer to the other reference files in this documentation:

• Getting Started Guide
• Data Binding Examples
• Customization Techniques
• Performance Optimization

Appearance in Blazor HeatMap Chart Component

Table of Contents

1. Cell Customizations

• Border
• Cell Highlighting
• Tile Types

2. Margin 3. Title Settings 4. Data Labels

• Text Style
• Format
• Template
• Array Binding
• JSON Binding

5. Background Styling

---

Cell Customizations

You can customize the cell appearance by using the HeatMapCellSettings component with its properties like ShowLabel, TileType, and EnableCellHighlighting. This allows you to control various visual aspects of the heat map cells including borders, highlighting behavior, and tile types.

Border

Change the width, color, and radius of the heat map cells by using the HeatMapCellBorder tag within the HeatMapCellSettings component. The HeatMapCellBorder properties Width, Radius, and Color will be used to customize the cell borders.

Properties:

• Width: Specifies the border width
• Radius: Specifies the border radius for rounded corners
• Color: Specifies the border color

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
         <HeatMapCellBorder Width = "1" Radius = "4" Color = "White" ></HeatMapCellBorder>
    </HeatMapCellSettings>
    <HeatMapLegendSettings ShowLabel="true"></HeatMapLegendSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79},
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Cell Highlighting

Enable or disable the cell highlighting while hovering over the heat map cells by using the EnableCellHighlighting property in the HeatMapCellSettings component. The EnableCellHighlighting property will be used to toggle cell highlighting on hover.

Property:

• EnableCellHighlighting: When set to true, cells will be highlighted on hover

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect" EnableCellHighlighting="true"></HeatMapCellSettings>
    <HeatMapLegendSettings ShowLabel="true" Position="Syncfusion.Blazor.HeatMap.LegendPosition.Right" EnableSmartLegend="true" ToggleVisibility="true"></HeatMapLegendSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
        {
            int[,] dataSource = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79}
            };
            return dataSource;
        }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Tile Types

The TileType property in HeatMapCellSettings will be used to define the shape of the heat map cells. Available options include:

• CellType.Rect: Rectangular cells (default)
• CellType.Bubble: Bubble-style cells

Example:

<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
</HeatMapCellSettings>

---

Margin

Set the margin for the heat map from its container by using the HeatMapMargin component with properties Left, Right, Top, and Bottom. This helps to create spacing around the heat map within its parent container.

Properties:

• Left: Left margin value
• Right: Right margin value
• Top: Top margin value
• Bottom: Bottom margin value

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>
    <HeatMapLegendSettings ShowLabel="true" Position="Syncfusion.Blazor.HeatMap.LegendPosition.Right" EnableSmartLegend="true" ToggleVisibility="true"></HeatMapLegendSettings>
</SfHeatMap>

@code{
     int[,] GetDefaultData()
        {
            int[,] dataSource = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79}
            };
            return dataSource;
        }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

---

Title Settings

The title is used to provide quick information about the data plotted in the heat map. Use the HeatMapTitleSettings component with properties like Text and the child component HeatMapTitleTextStyle to configure the title and its styling.

Properties:

• Text: The text content of the title
• HeatMapTitleTextStyle: Child component for customizing title text appearance

Title Text Style Properties:

• Size: Font size (e.g., "15px")
• FontWeight: Font weight (e.g., "500")
• FontStyle: Font style (e.g., "Italic", "Normal")
• FontFamily: Font family (e.g., "Segoe UI")

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
        <HeatMapTitleTextStyle Size = "15px" FontWeight = "500" FontStyle = "Italic" FontFamily = "Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>
    <HeatMapLegendSettings ShowLabel="true" Position="Syncfusion.Blazor.HeatMap.LegendPosition.Right" EnableSmartLegend="true" ToggleVisibility="true"></HeatMapLegendSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
        {
            int[,] dataSource = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79}
            };
            return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

---

Data Labels

You can toggle the visibility of data labels by using the ShowLabel property in the HeatMapCellSettings component. The ShowLabel property will be used to control the visibility of data labels. By default, the data label will be visible.

Basic Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
        {
            int[,] dataSource = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79}
            };
            return dataSource;
        }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Text Style

You can customize the font family, font size, and color of the data label by using the HeatMapCellTextStyle tag within the HeatMapCellSettings component. The HeatMapCellTextStyle properties Size, FontWeight, FontStyle, FontFamily, and Color will be used to style the data label text.

Properties:

• Size: Font size (e.g., "15px")
• FontWeight: Font weight (e.g., "500")
• FontStyle: Font style (e.g., "Italic", "Normal")
• FontFamily: Font family (e.g., "Segoe UI")
• Color: Text color

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Italic" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
        <HeatMapCellTextStyle Size="15px" FontWeight="500" FontStyle="Italic" FontFamily="Segoe UI"></HeatMapCellTextStyle>
    </HeatMapCellSettings>
    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Format

You can change the format of the data label, such as currency, decimal, percent, etc., by using the Format property in the HeatMapCellSettings component. The Format property will be used to apply custom formatting to the cell values displayed in the data labels.

Format Syntax:

• Use {value} as a placeholder for the cell value
• Add currency symbols, units, or other text around the placeholder

Example:

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect" Format="{value} $"></HeatMapCellSettings>
    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Template

Any HTML elements can be added as a template in the data labels by using the LabelTemplate property of HeatMapCellSettings in the HeatMap component. The LabelTemplate property will be used to define custom HTML content for the data labels. This allows for rich, customizable data label presentations.

The following examples show various data binding methods in the HeatMap using the LabelTemplate property.

Array Binding

The data for the corresponding cell from the data source can be received as a Dictionary<string, string> type. The XLabel, YLabel, and Value keys can be used to retrieve the x-axis label, y-axis label, and cell value from the dictionary, respectively.

Array Table Binding

The following example demonstrates how to add a data label template for array table binding.

@using Syncfusion.Blazor.HeatMap;

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Commercial Aviation Accidents and Fatalities by year 2015 - 2017">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true">
        <LabelTemplate>
            @{
                var Template = (context as Dictionary<string, string>);
                <div style="width:25px;height:22px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">@Template["Value"]</div>
            }
        </LabelTemplate>
    </HeatMapCellSettings>
    <HeatMapDataSourceSettings IsJsonData="false" AdaptorType="AdaptorType.Table"></HeatMapDataSourceSettings>
</SfHeatMap>

@code {
    public double[,] GetDefaultData()
    {
        double[,] dataSource = new double[,]
        {
            {4, 39, 3, 8, 1, 3 },
            {4, 28, 5, 92, 5, 73 },
            {4, 45, 5, 152, 0, 44 }
        };
        return dataSource;
    }
    public string[] XAxisLabels = new string[] { "2015", "2016", "2017" };
    public string[] YAxisLabels = new string[] { "Jan-Feb", "Mar-Apr", "May-Jun", "Jul-Aug", "Sep-Oct", "Nov-Dec" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Array Cell Binding

The following example demonstrates how to add a data label template for array cell binding.

@using Syncfusion.Blazor.HeatMap;

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Commercial Aviation Accidents and Fatalities by year 2015 - 2017">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
    <HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
    <HeatMapCellSettings>
        <LabelTemplate>
            @{
                var Template = (context as Dictionary<string, string>);
                <div style="width:25px;height:22px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">@Template["Value"]</div>
            }
        </LabelTemplate>
    </HeatMapCellSettings>
    <HeatMapDataSourceSettings IsJsonData="false" AdaptorType="AdaptorType.Cell"></HeatMapDataSourceSettings>
</SfHeatMap>

@code {
    public double[,] GetDefaultData()
    {
        double[,] dataSource = new double[,]
            {
                {0, 0, 4, 39}, {0, 1, 3, 8}, {0, 2, 1, 3}, {0, 3, 1, 10}, {0, 4, 4, 4}, {0, 5, 2, 15},
                {1, 0, 4, 28}, {1, 1, 5, 92}, {1, 2, 5, 73}, {1, 3, 3, 1}, {1, 4, 3, 4}, {1, 5, 4, 126},
                {2, 0, 4, 45}, {2, 1, 5, 152}, {2, 2, 0, 44}, {2, 3, 4, 54}, {2, 4, 5, 243}, {2, 5, 2, 45}
            };
        return dataSource;
    }
    public string[] XAxisLabels = new string[] { "2015", "2016", "2017" };
    public string[] YAxisLabels = new string[] { "Jan-Feb", "Mar-Apr", "May-Jun", "Jul-Aug", "Sep-Oct", "Nov-Dec" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

JSON Binding

The value from the data source for the corresponding cell can be displayed in the HeatMap cell as data label template content by including the desired field name from the class object, set in the DataSource property, in the template content.

JSON Table Binding

The following example demonstrates how to add a data label template for JSON table binding.

@using Syncfusion.Blazor.HeatMap;

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Commercial Aviation Accidents and Fatalities by year 2015 - 2017">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapDataSourceSettings IsJsonData="true" AdaptorType="AdaptorType.Table" XDataMapping="Year"></HeatMapDataSourceSettings>
    <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
    <HeatMapCellSettings>
        <LabelTemplate>
            @{
                var content = (context as RegionalData);
                if (content != null)
                {
                    <div><img style='width:20px;height:20px;' src='@content.Image' /> </div>
                }
            }
        </LabelTemplate>
    </HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="#C06C84"></HeatMapPalette>
            <HeatMapPalette Color="#6C5B7B"></HeatMapPalette>
            <HeatMapPalette Color="#355C7D"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</SfHeatMap>

@code
{
    public string[] XLabels = new string[] { "2015", "2016", "2017" };
    public string[] YLabels = new string[] { "Jan_2015", "Feb_2015", "Mar_2016", "Apr_2016", "May_2017" };
    public class RegionalData
    {
        public string? Year { get; set; }
        public string? Image { get; set; }
        public int? Jan_2015 { get; set; }
        public int? Feb_2015 { get; set; }
        public int? Mar_2016 { get; set; }
        public int? Apr_2016 { get; set; }
        public int? May_2017 { get; set; }
    }
    public RegionalData[] HeatMapData = new RegionalData[]{
        new RegionalData {Year = "2017", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/football.png", Jan_2015 = 93,Feb_2015 = 101,Mar_2016 = 112,Apr_2016 = 103,May_2017 = 121 },
        new RegionalData {Year = "2017", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/football.png", Jan_2015 = 28,Feb_2015 = 30,Mar_2016 = 49,Apr_2016 = 65,May_2017 = 67 },
        new RegionalData {Year = "2017", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/football.png", Jan_2015 = 58,Feb_2015 = 63,Mar_2016 = 100,Apr_2016 = 91,May_2017 = 70 },
        new RegionalData {Year = "2016", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/golf-ball.png",Jan_2015 = 89,Feb_2015 = 90,Mar_2016 = 60,Apr_2016 = 69,May_2017 = 55 },
        new RegionalData {Year = "2016", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/golf-ball.png",Jan_2015 = 56,Feb_2015 = 49,Mar_2016 = 41,Apr_2016 = 44,May_2017 = 42 },
        new RegionalData {Year = "2016", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/golf-ball.png",Jan_2015 = 18,Feb_2015 = 37,Mar_2016 = 25,Apr_2016 = 38,May_2017 = 41 },
        new RegionalData {Year = "2015", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/basketball.png",Jan_2015 = 38,Feb_2015 = 33,Mar_2016 = 43,Apr_2016 = 35,May_2017 = 42 },
        new RegionalData {Year = "2015", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/basketball.png",Jan_2015 = 28,Feb_2015 = 30,Mar_2016 = 32,Apr_2016 = 30,May_2017 = 21 },
        new RegionalData {Year = "2015", Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/circular-gauge/basketball.png",Jan_2015 = 34,Feb_2015 = 32,Mar_2016 = 27,Apr_2016 = 28,May_2017 = 28 }
    };
}

JSON Cell Binding

The following example demonstrates how to add a data label template for JSON cell binding.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Commercial Aviation Accidents and Fatalities by year 2015 - 2017">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapDataSourceSettings IsJsonData="true" AdaptorType="AdaptorType.Cell" XDataMapping="Year" YDataMapping="Months" ValueMapping="Fatalities"></HeatMapDataSourceSettings>
    <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
    <HeatMapCellSettings>
        <LabelTemplate>
            @{
                var content = (context as SampleData);
                if(content != null)
                {
                    <div>Accidents - @content.Accidents</div>
                }
            }
        </LabelTemplate>
    </HeatMapCellSettings>
</SfHeatMap>

@code {
    public string[] XLabels = new string[] { "2015", "2016", "2017" };
    public string[] YLabels = new string[] { "Jan-Feb", "Mar-Apr", "May-Jun", "Jul-Aug", "Sep-Oct", "Nov-Dec" };
    public class SampleData
    {
        public string Year { get; set; }
        public string Months { get; set; }
        public int? Accidents { get; set; }
        public int? Fatalities { get; set; }
    }
    public SampleData[] HeatMapData = new SampleData[] {
        new SampleData  { Year= "2017", Months= "Jan-Feb", Accidents= 4,  Fatalities = 39 },
        new SampleData  { Year= "2017", Months= "Mar-Apr", Accidents= 3,  Fatalities = 8 },
        new SampleData  { Year= "2017", Months= "May-Jun", Accidents= 1,  Fatalities = 3 },
        new SampleData  { Year= "2017", Months= "Jul-Aug", Accidents= 1,  Fatalities = 10 },
        new SampleData  { Year= "2017", Months= "Sep-Oct", Accidents= 4,  Fatalities = 4 },
        new SampleData  { Year= "2017", Months= "Nov-Dec", Accidents= 2,  Fatalities = 15 },
        new SampleData  { Year= "2016", Months= "Jan-Feb", Accidents= 4,  Fatalities = 28 },
        new SampleData  { Year= "2016", Months= "Mar-Apr", Accidents= 5,  Fatalities = 92 },
        new SampleData  { Year= "2016", Months= "May-Jun", Accidents= 5,  Fatalities = 73 },
        new SampleData  { Year= "2016", Months= "Jul-Aug", Accidents= 3,  Fatalities = 1 },
        new SampleData  { Year= "2016", Months= "Sep-Oct", Accidents= 3,  Fatalities = 4 },
        new SampleData  { Year= "2016", Months= "Nov-Dec", Accidents= 4,  Fatalities = 126 },
        new SampleData  { Year= "2015", Months= "Jan-Feb", Accidents= 4,  Fatalities = 45 },
        new SampleData  { Year= "2015", Months= "Mar-Apr", Accidents= 5,  Fatalities = 152 },
        new SampleData  { Year= "2015", Months= "May-Jun", Accidents= 0,  Fatalities = 0 },
        new SampleData  { Year= "2015", Months= "Jul-Aug", Accidents= 4,  Fatalities = 54 },
        new SampleData  { Year= "2015", Months= "Sep-Oct", Accidents= 5,  Fatalities = 243 },
        new SampleData  { Year= "2015", Months= "Nov-Dec", Accidents= 2,  Fatalities = 45 }
        
    };
}

---

Background Styling

The HeatMap component supports background styling through the HeatMapPaletteSettings component with properties like Type and child HeatMapPalette components, along with cell styling options. You can control the background appearance using the palette settings and cell styling options.

Using Palette Settings

The HeatMapPaletteSettings component allows you to define gradient or fixed color palettes that serve as the background colors for cells based on their values.

Example with Gradient Palette:

<HeatMapPaletteSettings Type="PaletteType.Gradient">
    <HeatMapPalettes>
        <HeatMapPalette Color="#C06C84"></HeatMapPalette>
        <HeatMapPalette Color="#6C5B7B"></HeatMapPalette>
        <HeatMapPalette Color="#355C7D"></HeatMapPalette>
    </HeatMapPalettes>
</HeatMapPaletteSettings>

Cell Background with Borders

Combining border settings with background colors creates distinct visual separation:

<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
    <HeatMapCellBorder Width="1" Radius="4" Color="White"></HeatMapCellBorder>
</HeatMapCellSettings>

The white border color provides a clear contrast against the colored cell backgrounds, making the heat map more readable.

---

Summary

The Blazor HeatMap Chart component provides comprehensive appearance customization options:

• Cell Customizations: Control borders, highlighting, and tile types
• Margins: Add spacing around the heat map
• Title Settings: Display and style informative titles
• Data Labels: Show, format, and template cell values
• Background Styling: Use palettes and borders for visual impact

These features allow you to create professional, readable, and visually appealing heat map visualizations that effectively communicate your data insights.

Axis Configuration in Blazor HeatMap Chart

Table of Contents

1. Overview 2. Axis Types

• Category Axis
• Numeric Axis
• Date-Time Axis

3. Inversed Axis 4. Opposed Axis 5. Axis Labels Customization

• Customizing the Text Style
• Providing Line Breaks
• Customizing Axis Labels When Intersecting
• Rotating Axis Labels
• Label Formatting

6. Axis Intervals 7. Axis Label Increment 8. Multilevel Labels

Overview

Heat map consists of two axes namely, X-axis and Y-axis that display the row headers and column headers to plot the data points respectively. You can define the type, format, and other customizing options for both axes in the heat map.

Axis Types

There are three different axis types available in the heat map, which define the data type of the axis labels. You can define the axis type by using the ValueType property in both HeatMapXAxis and HeatMapYAxis components.

Category Axis

Category axis type is used to represent the string values in axis labels using the ValueType property set to Syncfusion.Blazor.HeatMap.ValueType.Category.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Numeric Axis

Numeric axis type is used to represent the numeric values in axis labels using the ValueType property set to Syncfusion.Blazor.HeatMap.ValueType.Numeric.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Numeric"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Numeric"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Date-Time Axis

Date-time axis type is used to represent the date-time values in axis labels with a specific format using the ValueType property set to Syncfusion.Blazor.HeatMap.ValueType.DateTime. In date-time axis, you can define the start and end date/time using the Minimum and Maximum properties, and configure the interval mode using the IntervalType property.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.DateTime" Minimum="@Minimum" Maximum="@Maximum" IntervalType="Syncfusion.Blazor.HeatMap.IntervalType.Months"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    public object Minimum = new DateTime(2007, 2, 1);
    public object Maximum = new DateTime(2007, 7, 1);
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Inversed Axis

Heat map supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by setting the IsInversed property to true in the HeatMapXAxis or HeatMapYAxis component.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category" IsInversed="true"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.DateTime" Minimum="@Minimum" Maximum="@Maximum" IntervalType="Syncfusion.Blazor.HeatMap.IntervalType.Months"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    public object Minimum = new DateTime(2007, 2, 1);
    public object Maximum = new DateTime(2007, 7, 1);
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Opposed Axis

In heat map, you can place the axis label in an opposite position of its default axis label position by setting the OpposedPosition property to true in the HeatMapXAxis or HeatMapYAxis component.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category" OpposedPosition="true"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.DateTime" Minimum="@Minimum" Maximum="@Maximum" IntervalType="Syncfusion.Blazor.HeatMap.IntervalType.Months"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    public object Minimum = new DateTime(2007, 2, 1);
    public object Maximum = new DateTime(2007, 7, 1);
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Axis Labels Customization

Customizing the Text Style

The text style of the axis labels can be customized using the HeatMapXAxisTextStyle component for x-axis and HeatMapYAxisTextStyle component for y-axis with the following properties:

• Color - Used to change the text color of the axis labels.
• FontFamily - Used to change the font family of the axis labels.
• FontStyle - Used to change the font style of the axis labels.
• FontWeight - Used to change the font weight of the axis labels.
• Size - Used to change the font size of the axis labels.
• TextAlignment - Used to position and align the axis labels. This property takes values such as Near, Center, and Far.
• TextOverflow - When the axis label exceeds the intended space, this property is used to trim or wrap it. This property takes values such as None, Trim, and Wrap.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Product wise Monthly sales revenue for a e-commerce website">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" OpposedPosition="true">
        <HeatMapXAxisTextStyle Color="Red" Size="15px" FontWeight="650" FontStyle="Normal" FontFamily="Segoe UI" TextAlignment="Syncfusion.Blazor.HeatMap.Alignment.Center" TextOverflow="Syncfusion.Blazor.HeatMap.TextOverflow.Wrap"></HeatMapXAxisTextStyle>
    </HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" MaxLabelLength="70">
        <HeatMapYAxisTextStyle Color="Red" Size="15px" FontWeight="650" FontStyle="Normal" FontFamily="Segoe UI" TextAlignment="Syncfusion.Blazor.HeatMap.Alignment.Center" TextOverflow="Syncfusion.Blazor.HeatMap.TextOverflow.Wrap"></HeatMapYAxisTextStyle>
    </HeatMapYAxis>
    <HeatMapPaletteSettings>
        <HeatMapPalettes>
            <HeatMapPalette Color="#F0C27B"></HeatMapPalette>
            <HeatMapPalette Color="#4B1248"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="false">
    </HeatMapLegendSettings>
</SfHeatMap>

@code {
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52, 32},
            {68, 52, 63, 51, 30, 51, 51},
            {60, 50, 42, 53, 66, 70, 41},
            {66, 64, 46, 40, 47, 41, 45},
            {65, 42, 58, 32, 36, 44, 49},
            {54, 46, 61, 46, 40, 39, 41},
            {48, 46, 61, 47, 49, 41, 41},
            {69, 52, 41, 44, 41, 52, 46},
            {50, 59, 44, 43, 27, 42, 26},
            {47, 49, 66, 53, 50, 34, 31},
            {61, 40, 62, 26, 34, 54, 56}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Month of Feburary 2023", "Month of March 2023", "Month of April 2023", "Month of May 2023", "Month of June 2023", "Month of July 2023", "Month of August 2023", "Month of September 2023", "Month of October 2023", "Month of November 2023", "Month of December 2023" };
    string[] YAxisLabels = new string[] { "Ace Apparels", "Alpha Apparels", "RL Garments", "RRD Garments", "RRD Apparels", "RR Garments", "SR Garments" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Providing Line Breaks

Axis labels with line breaks improve the readability of the HeatMap by splitting the text on an axis into multiple lines. The "\<br>" character is used to add line breaks to the axis labels specified in the Labels property of HeatMapXAxis or HeatMapYAxis.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" MaxLabelLength="60"></HeatMapYAxis>
</SfHeatMap>

@code {
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {1, 76},
            {19, 3}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Actual<br>Accept", "Actual<br>Reject" };
    string[] YAxisLabels = new string[] { "Actual<br>Accept", "Actual<br>Reject" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Customizing Axis Labels When Intersecting

When the axis labels intersect, the LabelIntersectAction property in HeatMapXAxis or HeatMapYAxis is used to handle the intersection. The LabelIntersectAction property can take the following values:

• None - Specifies that no action is taken when the axis labels intersect.
• Trim - Specifies to trim the axis labels when they intersect.
• Rotate45 - When the axis labels intersect, they are rotated to 45 degrees.
• MultipleRows - Specifies to show all the axis labels as multiple rows when they intersect.

The below example demonstrates to trim the axis labels by setting the LabelIntersectAction property to Syncfusion.Blazor.HeatMap.LabelIntersectAction.Trim and enabling the EnableTrim property.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Product wise Monthly sales revenue for a e-commerce website">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" OpposedPosition="true" EnableTrim="true" LabelIntersectAction="Syncfusion.Blazor.HeatMap.LabelIntersectAction.Trim">
        <HeatMapXAxisTextStyle Color="Red" Size="15px" FontWeight="650" FontStyle="Normal" FontFamily="Segoe UI" TextAlignment="Syncfusion.Blazor.HeatMap.Alignment.Center" TextOverflow="Syncfusion.Blazor.HeatMap.TextOverflow.Wrap"></HeatMapXAxisTextStyle>
    </HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" EnableTrim="true" LabelIntersectAction="Syncfusion.Blazor.HeatMap.LabelIntersectAction.Trim">
        <HeatMapYAxisTextStyle Color="Red" Size="15px" FontWeight="650" FontStyle="Normal" FontFamily="Segoe UI" TextAlignment="Syncfusion.Blazor.HeatMap.Alignment.Center" TextOverflow="Syncfusion.Blazor.HeatMap.TextOverflow.Wrap"></HeatMapYAxisTextStyle>
    </HeatMapYAxis>
    <HeatMapPaletteSettings>
        <HeatMapPalettes>
            <HeatMapPalette Color="#F0C27B"></HeatMapPalette>
            <HeatMapPalette Color="#4B1248"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="false">
    </HeatMapLegendSettings>
</SfHeatMap>

@code {
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52, 32},
            {68, 52, 63, 51, 30, 51, 51},
            {60, 50, 42, 53, 66, 70, 41},
            {66, 64, 46, 40, 47, 41, 45},
            {65, 42, 58, 32, 36, 44, 49},
            {54, 46, 61, 46, 40, 39, 41},
            {48, 46, 61, 47, 49, 41, 41},
            {69, 52, 41, 44, 41, 52, 46},
            {50, 59, 44, 43, 27, 42, 26},
            {47, 49, 66, 53, 50, 34, 31},
            {61, 40, 62, 26, 34, 54, 56}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Month of Feburary 2023", "Month of March 2023", "Month of April 2023", "Month of May 2023", "Month of June 2023", "Month of July 2023", "Month of August 2023", "Month of September 2023", "Month of October 2023", "Month of November 2023", "Month of December 2023" };
    string[] YAxisLabels = new string[] { "Ace Apparels", "Alpha Apparels", "RL Garments", "RRD Garments", "RRD Apparels", "RR Garments", "SR Garments" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Rotating Axis Labels

The axis labels can be rotated to a desired angle by using the LabelRotation property in HeatMapXAxis or HeatMapYAxis component.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Product wise Monthly sales revenue for a e-commerce website">
        <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal" FontFamily="Segoe UI"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" LabelRotation="90" OpposedPosition="true">
    </HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" LabelRotation="45">
    </HeatMapYAxis>
    <HeatMapPaletteSettings>
        <HeatMapPalettes>
            <HeatMapPalette Color="#F0C27B"></HeatMapPalette>
            <HeatMapPalette Color="#4B1248"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="false">
    </HeatMapLegendSettings>
</SfHeatMap>

@code {
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52, 32},
            {68, 52, 63, 51, 30, 51, 51},
            {60, 50, 42, 53, 66, 70, 41},
            {66, 64, 46, 40, 47, 41, 45},
            {65, 42, 58, 32, 36, 44, 49},
            {54, 46, 61, 46, 40, 39, 41},
            {48, 46, 61, 47, 49, 41, 41},
            {69, 52, 41, 44, 41, 52, 46},
            {50, 59, 44, 43, 27, 42, 26},
            {47, 49, 66, 53, 50, 34, 31},
            {61, 40, 62, 26, 34, 54, 56}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Month of Feburary 2023", "Month of March 2023", "Month of April 2023", "Month of May 2023", "Month of June 2023", "Month of July 2023", "Month of August 2023", "Month of September 2023", "Month of October 2023", "Month of November 2023", "Month of December 2023" };
    string[] YAxisLabels = new string[] { "Ace Apparels", "Alpha Apparels", "RL Garments", "RRD Garments", "RRD Apparels", "RR Garments", "SR Garments" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Label Formatting

The HeatMap supports formatting the axis labels by using the LabelFormat property in HeatMapXAxis or HeatMapYAxis component. Using this property, you can customize the axis label by global string format ('P', 'C', etc) or customized format like '{value}°C'.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Numeric"  LabelFormat="${value}"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {73, 39, 26, 39, 94, 0},
            {93, 58, 53, 38, 26, 68},
            {99, 28, 22, 4, 66, 90},
            {14, 26, 97, 69, 69, 3},
            {7, 46, 47, 47, 88, 6},
            {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    public object Minimum = new DateTime(2007, 2, 1);
    public object Maximum = new DateTime(2007, 7, 1);
    string[] XAxisLabels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Axis Intervals

In heat map, you can define an interval between the axis labels using the Interval property in HeatMapXAxis or HeatMapYAxis component. In date-time axis, you can change the interval mode by using the IntervalType property. The date-time axis supports the following interval types.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.DateTime" Minimum="@Minimum" Interval=2 Maximum="@Maximum" IntervalType="Syncfusion.Blazor.HeatMap.IntervalType.Months"></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
        {73, 39, 26, 39, 94, 0},
        {93, 58, 53, 38, 26, 68},
        {99, 28, 22, 4, 66, 90},
        {14, 26, 97, 69, 69, 3},
        {7, 46, 47, 47, 88, 6},
        {41, 55, 73, 23, 3, 79}
            };
        return dataSource;
    }
    public object Minimum = new DateTime(2007, 2, 1);
    public object Maximum = new DateTime(2007, 7, 1);
    string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Axis Label Increment

Axis label increment in the heat map is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the Increment property in HeatMapXAxis or HeatMapYAxis component, and the default value of this property is 1.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
    </HeatMapTitleSettings>
    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Numeric" Increment=2></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Numeric" Increment=3></HeatMapYAxis>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
        {73, 39, 26, 39, 94, 0},
        {93, 58, 53, 38, 26, 68},
        {99, 28, 22, 4, 66, 90},
        {14, 26, 97, 69, 69, 3},
        {7, 46, 47, 47, 88, 6},
        {41, 55, 73, 23, 3, 79}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

Multilevel Labels

Multilevel labels are used to classify a group of axis labels as a single category, which is then displayed with a label. By using multiple HeatMapMultiLevelLabel components, you can add multiple levels on top of the axis labels.

To divide and group the axis labels, you can use multiple HeatMapAxisMultiLevelCategories components. The starting and ending indexes of the axis labels can be set using the Start and End properties. The Text property can be used to specify a name for the grouped axis labels.

The multilevel labels can be customized by using the following properties and components:

• Overflow - Used to trim or wrap the multilevel labels when the label overflows the intended space. NOTE: This property is only for x-axis.
• Alignment - Used to place and align the multilevel labels.
• MaximumTextWidth - Used to set the maximum width of the text. When the text length exceeds the maximum text width, the overflow action will be performed.
• HeatMapAxisMultiLevelLabelsTextStyle - Used to customize the font style of the multilevel labels.
• HeatMapXAxisMultiLevelLabelBorder - Used to customize the border of the multilevel labels displayed in the x-axis.
• HeatMapYAxisMultiLevelLabelBorder - Used to customize the border of the multilevel labels displayed in the y-axis.

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@DataSource">
    <HeatMapEvents TooltipRendering="@TooltipRendering" CellRendering="@CellRender"></HeatMapEvents>
    <HeatMapXAxis Labels="@XLabels">
        <HeatMapXAxisTextStyle Color="Black"></HeatMapXAxisTextStyle>
        <HeatMapAxisLabelBorder Width="1" Type="Syncfusion.Blazor.HeatMap.BorderType.Rectangle" Color="#a19d9d"></HeatMapAxisLabelBorder>
        <HeatMapMultiLevelLabels>
            <HeatMapMultiLevelLabel>
                <HeatMapXAxisMultiLevelLabelBorder Width="1" Type="Syncfusion.Blazor.HeatMap.BorderType.Rectangle" Color="#a19d9d"></HeatMapXAxisMultiLevelLabelBorder>
                <HeatMapAxisMultiLevelLabelsTextStyle Color="Black" FontWeight="Bold"></HeatMapAxisMultiLevelLabelsTextStyle>
                <HeatMapAxisMultiLevelCategories Start="0" End="2" Text="Electronics">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="3" End="4" Text="Beauty and personal care">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="5" End="7" Text="Fashion">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="8" End="10" Text="Household">
                </HeatMapAxisMultiLevelCategories>
            </HeatMapMultiLevelLabel>
        </HeatMapMultiLevelLabels>
    </HeatMapXAxis>
    <HeatMapYAxis Labels="@YLabels" IsInversed=true>
        <HeatMapAxisLabelBorder Width="0"></HeatMapAxisLabelBorder>
        <HeatMapYAxisTextStyle Color="Black"></HeatMapYAxisTextStyle>
        <HeatMapMultiLevelLabels>
            <HeatMapMultiLevelLabel>
                <HeatMapYAxisMultiLevelLabelBorder Width="1" Type="Syncfusion.Blazor.HeatMap.BorderType.Brace" Color="#a19d9d"></HeatMapYAxisMultiLevelLabelBorder>
                <HeatMapAxisMultiLevelLabelsTextStyle Color="Black" FontWeight="Bold"></HeatMapAxisMultiLevelLabelsTextStyle>
                <HeatMapAxisMultiLevelCategories Start="0" End="2" Text="Q1">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="3" End="5" Text="Q2">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="6" End="8" Text="Q3">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="9" End="11" Text="Q4">
                </HeatMapAxisMultiLevelCategories>
            </HeatMapMultiLevelLabel>
            <HeatMapMultiLevelLabel>
                <HeatMapYAxisMultiLevelLabelBorder Width="1" Type="Syncfusion.Blazor.HeatMap.BorderType.Brace" Color="#a19d9d"></HeatMapYAxisMultiLevelLabelBorder>
                <HeatMapAxisMultiLevelLabelsTextStyle Color="Black" FontWeight="Bold"></HeatMapAxisMultiLevelLabelsTextStyle>
                <HeatMapAxisMultiLevelCategories Start="0" End="5" Text="First Half Yearly">
                </HeatMapAxisMultiLevelCategories>
                <HeatMapAxisMultiLevelCategories Start="6" End="11" Text="Second Half Yearly">
                </HeatMapAxisMultiLevelCategories>
            </HeatMapMultiLevelLabel>
            <HeatMapMultiLevelLabel>
                <HeatMapYAxisMultiLevelLabelBorder Width="1" Type="Syncfusion.Blazor.HeatMap.BorderType.Brace" Color="#a19d9d"></HeatMapYAxisMultiLevelLabelBorder>
                <HeatMapAxisMultiLevelLabelsTextStyle Color="Black" FontWeight="Bold"></HeatMapAxisMultiLevelLabelsTextStyle>
                <HeatMapAxisMultiLevelCategories Start="0" End="11" Text="Yearly">
                </HeatMapAxisMultiLevelCategories>
            </HeatMapMultiLevelLabel>
        </HeatMapMultiLevelLabels>
    </HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true" Format="$ {value}K">
        <HeatMapCellBorder Width="0"></HeatMapCellBorder>
    </HeatMapCellSettings>
    <HeatMapPaletteSettings>
        <HeatMapPalettes>
            <HeatMapPalette Color="#F0ADCE"></HeatMapPalette>
            <HeatMapPalette Color="#19307B"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="false">
    </HeatMapLegendSettings>
    <HeatMapTooltipSettings Enable="true">
        <HeatMapFont Size="12px" FontWeight="500"></HeatMapFont>
    </HeatMapTooltipSettings>
</SfHeatMap>

@code{
    public string[] XLabels = new string[] { "Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel", "Kitchenware", "Furniture", "Home Decor" };
    public string[] YLabels = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
    int[,] DataSource;
    public void TooltipRendering(Syncfusion.Blazor.HeatMap.TooltipEventArgs args)
    {
        args.Content = new string[] { args.XLabel + " | " + args.YLabel + " : $ " + args.Value + "K" };
    }
    public void CellRender(HeatMapCellRenderEventArgs args)
    {
        string CellValue = (double.Parse(args.CellValue) / 10).ToString();
        args.CellValue = CellValue;
    }
    public static int[,] GetMultiLevelData()
    {
        int[,] dataSource = new int[,]
        {
                {52, 65, 67, 45, 37, 52, 32, 76, 60, 64, 82, 91},
                {68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80},
                {60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
                {66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
                {65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
                {54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
                {48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
                {69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
                {50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
                {47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
                {61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}

        };
        return dataSource;
    }

    protected override void OnInitialized()
    {
        DataSource = GetMultiLevelData();
    }
}