Chart - Heatmap Chart

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.