We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Blazor HeatMap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering.


Dealing with large data

Though the Blazor HeatMap Chart can render data points using both SVG and canvas modes, it uses canvas rendering mode when displaying large volumes of data for best initial load performance and optimized memory usage.


Bubble HeatMap Chart

The Blazor bubble HeatMap Chart or matrix bubble chart visualizes data using variations in bubble attributes such as size, color, and sector.

Bubble HeatMap Chart in Blazor HeatMap Chart


Calendar HeatMap

The Blazor calendar HeatMap visualizes time series data, with each data point representing a value bound to a specific time.


Axis

Populate data in the Blazor HeatMap Chart using different axis types: numeric, category, and date-time.

Numeric axis

Use a numeric axis to represent numeric data in a HeatMap.

Date-time axis

Use a date-time axis to represent time series data in a HeatMap. Similarly, display dates and times as axis labels with different formats.

Category axis

Use a category axis to represent non-numerical data in a HeatMap and display text labels instead of numbers.


Customizable axis

The Blazor HeatMap Chart allows you to customize the axis elements to make an axis more readable.

Blazor HeatMap Chart with inversed origin or inversed axes

Inverse axis

Achieve RTL layout by reversing the axis labels. This swaps the higher and lower ranges of an axis.

Blazor HeatMap Chart with axes displayed in opposed positions

Opposite position

Arrange the axes smartly by moving them to positions opposite to their default positions.

Axis intervals displayed in Blazor HeatMap Chart

Axis intervals

Set axis labels with regular intervals, hiding adjacent labels across all types of axes.

Label rotation of the Blazor HeatMap Chart axes

Axis label rotation

Rotate axis labels clockwise or counterclockwise to any desired angle.

Axis label formatting in Blazor HeatMap Chart

Axis label formatting

Customize the axis label text using the available formatting options.


HeatMap cell customization

Customize the default appearance of a cell or data point using the available formatting options.

Data labels in Blazor HeatMap Chart

Data label

Toggle visibility or format the data labels to display custom text along with the cell values.

Blazor HeatMap Chart cell with customized borders

Border

Change the borders and cell spacing by customizing the border settings.


Palette

Customize the default color settings of the HeatMap cells with gradient or solid custom colors.


Cell color range customization

Color ranges allow a color to be applied to specific ranges in heatmap cells.

Blazor HeatMap Chart with cell color range customization.


Legend

Display additional information about data points in the Blazor HeatMap Chart using a legend.

Blazor HeatMap Chart with a gradient legend and a list-type legend

Types

Choose between a gradient pointer and a list-type legend for improving data points’ readability.

Legend placement in Blazor HeatMap Chart

Positioning

Place the legend anywhere in the chart area to make it fit best on a page.

Legend paging enabled in Blazor HeatMap Chart

Paging

This component enables paging when the legend items exceed the legend bounds. Then, each legend item can be viewed by navigating between the pages.

Legend title customization in Blazor HeatMap Chart.

Legend Title

A legend title provides information about the HeatMap legend.


Empty points

Handle missed or undefined data values with empty data points.

Blazor HeatMap Chart with empty data points


Tooltip

Display tooltips with additional information on mouse hover over data points .

Cell tooltip enabled in Blazor HeatMap Chart


Blazor HeatMap Chart Code Example

Easily get started with the Blazor HeatMap Chart using a few simple lines of C# code example as demonstrated below. Also explore our Blazor HeatMap Chart Example that shows you how to render and configure the HeatMap Chart in Blazor.

@using Syncfusion.Blazor

@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()
    {
      HeatMapData = GetDefaultData();
    }

Other supported frameworks

HeatMap Chart is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different HeatMap Chart platforms from the links below,




Blazor Components – 70+ UI and DataViz Components

Frequently Asked Questions

  • Display simple or large matrix data graphically with color variations in SVG or canvas.
  • Analyze data patterns of the subject quickly with multiple views such as rectangle, bubble, calendar, and sector heatmaps.
  • One of the best Blazor HeatMap chart components in the market that offers feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Extensive demos, documentation and videos to learn quickly and get started with Blazor HeatMap Chart.

We do not sell the Blazor HeatMap Chart separately. It is only available for purchase as part of the Syncfusion Blazor suite, which contains over 70 native Blazor components, including the HeatMap Chart. A single developer license for the Syncfusion Essential Studio for Blazor suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our Blazor HeatMap Chart demo here.

No, our 70+ Blazor components, including HeatMap Chart, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their HeatMap Chart alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 70+ Blazor components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Read independent,
authenticated reviews
on G2

Download Now

What do our customers say about us?

double quotes

Syncfusion controls contain almost everything a developer could ask for, saving us time and money. All backed up by unmatched support. Syncfusion controls are a developer's dream come true.
Kevin Kerr

Kevin Kerr

Kirk-Rudy

double quotes

I would highly recommend using Essential Studio and have found that the Syncfusion support team is one of the fastest I have worked with.
Georg Kukula

Georg Kukula

G&W Software Entwicklung GmbH

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile