Progress Telerik UI for Blazor

Blazor Heatmap

  • Use the Blazor HeatMap Chart to visualize multiple values as color. Take advantage of the built-in tooltip and different customization options to change its shapes and colors.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor Heatmap Chart is used to display values as color in two dimensions. It allows visualization of multiple values, often recorded on a daily basis, such as temperatures, sales, orders, etc. The component features color scales, category binding, tooltips, shape customization and more. 


    Telerik UI for Blazor Heatmap Overview
  • Shapes

    The HeatMap Chart allows you to visualize data values in different shapes, such as rectangles and rounded rectangles. 

    Visit the Blazor HeatMap Shapes demo 

  • Color Scales

    The HeatMap uses colors to visualize the values across the chart. The colors vary depending on the value, for example, the bigger the value—the denser the color. This makes it easier for users to immediately spot high and low data points on the chart. 
  • Tooltip

    Dealing with a lot of values can be overwhelming. That is why the Blazor HeatMap Chart comes with a built-in tooltip, allowing you to focus on only one value at a time upon hovering over it. The tooltip displays additional information, and its color corresponds to the value color on the chart. 
    Telerik UI for Blazor Heatmap tooltip
  • Theming

    Style the HeatMap chart using the three built-in themes and variety of swatches including Default (Main Dark, Nordic, Purple), Material (Arctic, Lime Dark, Nova) and Bootstrap (Urban, Vintage etc.). You can easily customize the available themes with a few lines of CSS or create a new one with the Progress SASS ThemeBuilder application
    Telerik UI for Blazor Heatmap Theming

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.