HeatMap Chart / Data Binding / JSON Row

Blazor HeatMap Chart Example - JSON Row Data Binding

Loading Syncfusion Blazor Server Demos…

This sample visualizes the overall Olympic medals won by countries in all summer Olympic events from 2000 to 2016, using JSON-formatted row data.

JSON Data Binding - This example demonstrates how to bind JSON data and configure the Heatmap using data adaptor support. You can bind JSON data with information for each row using:

  • The IsJsonData property to enable JSON data mode
  • The AdaptorType property to specify the appropriate data adaptor type for row-based data

Row Data Mapping - For row JSON data, the row header is mapped using the XDataMapping property, which identifies each row's label or identifier in the JSON structure.

Data Organization - This row-based approach is ideal when your data is organized with records as rows and properties as columns, making it intuitive for datasets structured around entities or categories.

Interactive Features - The tooltip is enabled in this example. Hover the mouse over a data point or tap on touch-enabled devices to view medal counts by country and Olympic year.

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