Heatmap Chart

Updated on Sep 16, 2026

The Blazor Heatmap chart shows the data in a grid-like structure that shows the magnitude of a value over two dimensions.

In this article:

• Data Binding Notes
• Heatmap Chart Specific Appearance Settings
  • Setting the Marker Type
  • Color
  • ColorField
  • Customize Chart Elements - Nested Tags Settings

This article assumes you are familiar with the chart basics and data binding.

To create a Heatmap chart:

1. add a ChartSeries to the ChartSeriesItems collection
2. set its Type property to ChartSeriesType.Heatmap
3. provide a data collection to its Data property and set the corresponding attributes:
   • XField - the field that will be displayed on the X-axis
   • YField - the field that will be displayed on the Y-axis
   • Field - the field that will be rendered in the contents of the Heatmap Chart
4. optionally, provide data for the X and Y axes Categories

A Heatmap Chart that shows commits made by developers

Example

View Source

Loading ...

Data Binding Notes

When you are data binding the Heatmap Chart you should have the following points under consideration:

• When you have set a value for the XField and YField attributes, you do not have to provide an object[] to the Categories attribute of the <ChartXAxis>, and the <ChartYAxis>.
  • If you define both X/YField and the <ChartX/YAxis> the items must match, otherwise blank data items will be rendered in the Heatmap content.

Heatmap Chart where the data for the Categories does not match the YField value. Problematic behavior. The result from the code snippet below.

Example

View Source

Loading ...

Heatmap Chart Specific Appearance Settings

Setting the Marker Type

To change the marker type you should set the Type parameter, exposed on the ChartSeriesMarkers tag (child tag of the <ChartSeries>). It takes a member of the Telerik.Blazor.Components.ChartSeriesMarkersType enum:

• Rect - the default value - specifies a rectangular form of the marker.

• RoundedRect - specifies a rectangle with rounded edges form of the marker.

Change the Type of the marker.

Example

View Source

Loading ...

Color

The Color parameter controls the general color palette for the markers of the Heatmap. The individual marker color set to the markers depends the value bound to the Field - the higher the value the darker the color.

Change the Color of the Heatmap.

Example

View Source

Loading ...

ColorField

The ColorField parameter allows you to control the color of an individual marker in the content of the Heatmap. If you do not provide a color in the field bound to the ColorField the Heatmap will render white markers.

Provide a custom color to all markers in the Heatmap.

Example

View Source

Loading ...

Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:

• CategoryAxis
• ChartArea
• Legend
• PlotArea
• SeriesItems
• Title
• Tooltip
• ValueAxis
• XAxes
• YAxes
• and others

To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the ChartSeries tag has a ChartSeriesLabels tag that exposes configuration options and more child tags.

For example, for axis-free charts you can rotate their Labels, Title, Legend and others. Example for doing so is customizing the Chart Series Labels by using the parameters in the

ChartSeriesItems > ChartSeries > ChartSeriesLabels tag and its child tags.

This approach is not limited only to the Labels - it can be used with to all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.

Hide the Labels for both X and Y axes.

Example

View Source

Loading ...

See Also

• Live Demo: Heatmap Chart