Setting XValue and YValue on each cell for CellSelection event handling

I have a Heatmap consisting of a user on the Y axis, and date on X axis. The metric tracking is API calls per day. Since there is a possibility of several users having the same name, I want to track which user it is by having the user ID embedded on the value. I noticed there's an XValue and XLabel property on the CellClickEventArgs, but there is no setting when defining the data source fo


1 Reply

IR Indumathi Ravi Syncfusion Team December 11, 2023 03:27 PM UTC

Hi Don,


The HeatMap component does not support differentiating the same axis label names defined in either the x-axis or the y-axis. The value of the data bound to the HeatMap cell will not be returned in the event arguments of the "CellClicked" event. Only the x-axis label, y-axis label, and the value bound to the HeatMap cell will be available in the event arguments of the "CellClicked" event. Even if we provide an extra field in the data source for JSON type data, the extra field will not be available in the event.


To overcome this scenario, you can use the "Labels" property to provide a different label name to handle the same label names in the x-axis property. To specify the unique names, please see the code snippet below.


Code Snippet:

<SfHeatMap DataSource="@HeatMapData">

     <HeatMapEvents CellClicked="@CellClicked" />

     //..

    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapYAxis>

    //..

</SfHeatMap>

@code{

string[] YAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", " Nancy Stephen", "Robert" };

}


You can find the sample for demonstration from the below link.

https://blazorplayground.syncfusion.com/LjBgsrCseIzRbiod


If we have misunderstood your scenario, please provide us with more information about your requirements. It will be helpful for us to analyze and assist you further.


Loader.
Up arrow icon