New to Telerik UI for Blazor? Download Free 30-day trial

Chart - Heatmap Chart

  • Heatmap-chart.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming


Telerik UI for Blazor Chart is a data visualization component which allows you to output graphical representation of your data. It is useful when you would like to utilize modern browser technologies such as SVG or Canvas for interactive data visualizations. The chart supports various numerical, categorical and axis-free types. The current demo focuses on the Heatmap Chart.

The Blazor Heatmap Chart shows the data in a grid-like structure using colors to indicate the relative value of data points in two dimensions. The Chart cells are associated with an X-axis and a Y-axis where the relative value of data points is indicated with colors ranging from white to a completely filled-in black and everything in-between as a gradient. The bigger the value the darker the color.

The Blazor Heatmap Chart allows you to customize the color of the markers in several ways. The Color parameter controls the general color palette for the markers of the Heatmap. The ColorField property, on another hand, will let you set specific colors for each marker. Additionally, the Heatmap Chart supports configuration for its markers’ type – you can choose between two options – Rect or RoundedRect.

Besides series customization, the Blazor Chart exposes multiple nested tags that allow you configure the rest of the chart elements – Category Axis, Legend, Plot Area, Tooltip. Check the Chart API Reference for a full list of properties, methods and events.

This demo showcases a Blazor Heatmap Chart that visualizes the Github contributions for the last 12 weeks. The Y-axis represents the weeks and the Y-axis days if the week. The Heatmap markers are lighter or darker depending on the contributions count for the specific day. The Heatmap Chart uses the default color palette.

This Blazor Charts and Graphs Heatmap Chart example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.