Example of Color and Size Attributes in Blazor HeatMap Chart Component

HeatMap Chart / Bubble Heatmap / Color and Size Attributes

This sample illustrates the number of commercial aircraft accidents and fatalities worldwide between 2012 and 2017. Each data point represents the accident count and the fatality associated with the accident; the size of the bubble represents the accident count, and the shade of the bubble represents the fatality count.

In this example, you can see how to map more than one data for each data point or cell of the bubble heatmap. The size and shade parameters of the bubble is used to represent the data source values. The legend will be displayed only for the shade parameter of the bubble. For assigned data, you can specify which data source value should be mapped to either size or shade of the bubble parameters using the HeatMapBubbleDataMapping class. The data source field should mapped to the Size and Color properties of the HeatMapBubbleDataMapping class.

The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.

More information on the bubble can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE