syncfusion-blazor-heatmap-chart

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](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:

```razor
@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 Pat