We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add upfront text to a group of cells


I am using Heatmap component to visualize some data at my page and I want to add some information about that data.
I have a Heatmap chart that I want to look like this. 

MicrosoftTeams-image (4).png

What I am trying to do is that I want to add a text on the cell group of the same color like it is shown at the picture above. I was thinking that one way of doing this is to get the position  of the first and the last cell of the group and then with the x and y values I could place the text in the middle of the group.

So is there a way I could implement this or another way that you think is better ?

Thanks in advance!

5 Replies

IR Indumathi Ravi Syncfusion Team November 21, 2022 02:07 PM

Hi Amanda,

We don’t have support to render the text inside the cell on the HeatMap component. However, we will analyze the feasibility of this requirement and update you with further details on November 23, 2022.


Indumathi R.

IR Indumathi Ravi Syncfusion Team November 22, 2022 02:51 PM

Hi Amanda,

The HeatMap component do not support rendering the text inside a single cell. However, we have considered your requirement as an improvement and added it to our features request list. However, we will include this implementation in any of our upcoming releases. Meanwhile, please find the feedback link below to keep track of this feature.


AM Amanda November 25, 2022 07:40 AM

Hello again,

I am trying to implement this with Javascript. Specifically what I am trying to do is to get the position of a specific rect element of the svg heatmap component with the getBoundingClientRect function.

This is the javascript function that I made to implement this

function getElementPosition(id) {
var element = document.getElementById(id);
var rect = element.getBoundingClientRect();
return rect;

So at the getElementPosition function I add the specific rect ID as the parameter and then I am getting its position. After that I use the Top and Left value of the position to place the label on that specific rect element.

The label that I am trying to add is an html element and I set its position as relative


<div style="position:fixed;z-index:10;top:rect.Top;left:rect.Left; display:inline-block;width:fit-content;">

Unfortunatelly this isn't working and the label is not placed on the correct rect element of the heatmap.

So I would like to ask you how can I place a label on a specific rect element by using its position on the viewport?

Or how can I implement this with the way that I am suggesting?

Thanks in advance

IR Indumathi Ravi Syncfusion Team November 28, 2022 10:01 AM

Hi Amanda,


We can achieve your requirement using a workaround. We must calculate the position of the specified cell considering the bounds of the SVG element of HeatMap component. Using the calculated value, we can place the text in the specified cell location. Please find the code snippet below.


Code Snippet:


<div id="labelText" style="@label">

    Upfront Text



<SfHeatMap ID="cellOpacity" @ref=@Heatmap DataSource="@HeatMapData">




public string label = "position:absolute;z-index:10;top:120px;left:850px; display:inline-block;width:fit-content;";


protected override async Task OnAfterRenderAsync(bool firstRender)


            if(!firstRender && !IsInitialRendeirng)


CellRect svgRect = await jsRuntime.InvokeAsync<CellRect>("getSVGElementRect");

                CellRect cellRect = await jsRuntime.InvokeAsync<CellRect>("getCellElementRect");

                CellRect labelTextRect = await jsRuntime.InvokeAsync<CellRect>("getLabelTextRect");

                label = "position:absolute;z-index:10;top:" + (Convert.ToDouble(Convert.ToDouble(svgRect.top) +  

               Convert.ToDouble(cellRect.top))) + "px;left:" + (Convert.ToDouble(Convert.ToDouble(svgRect.left) +

               Convert.ToDouble(cellRect.left))) + "px; display:inline-block;width:fit-content;";

                IsInitialRendeirng = true;






      function getSVGElementRect() {

            heatMapCellRect = document.getElementById("cellOpacity_svg").getBoundingClientRect();

            return { width: heatMapCellRect.width, height: heatMapCellRect.height, top: heatMapCellRect.Top, left:  

                          heatMapCellRect.Left };


        function getCellElementRect() {

            cellRect = document.getElementById("cellOpacity_HeatMapRect_450").getBoundingClientRect();

            return { width: cellRect.width, height: cellRect.height, top: cellRect.top, left: cellRect.left };


       function getLabelTextRect() {

            labelRect = document.getElementById("labelText").getBoundingClientRect();

            return { width: labelRect.width, height: labelRect.height,  top: labelRect.top , left: labelRect.left};




You can find the sample from the below link.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap-743645878



Please let us know if the above solution meet your requirement.

AM Amanda replied to Indumathi Ravi November 29, 2022 05:19 AM


First of all thanks for your reply.I tried the solution that you posted and I want to suggest another way that this could be implemented. I adjusted your project in order to show the way that I am trying to do this.

So the way that I am trying to implement this is by getting the position both of the parent which in our case is the heatmap's svg and the selected rect element of the heatmap. 

 function getElemementRelativePosition(parentId, childId) {
            var parentPos = document.getElementById(parentId).getBoundingClientRect();
            var childPos = document.getElementById(childId).getBoundingClientRect();
            var relativePos = {};

            relativePos.top = childPos.top - parentPos.top;
            relativePos.right = childPos.right - parentPos.right;
            relativePos.bottom = childPos.bottom - parentPos.bottom;
            relativePos.left = childPos.left - parentPos.left ;

            return relativePos;

After that I calculate the position that the label will be placed.

The problem that I have with my solution is that  the div element of the label has its placeholder sticked at its initial position and so my label is placed a little higher than the postion that I want.


So how can I edit the style of the label or what can I do in order to achieve the correct position of the label using my idea ?

Thanks in advance!

Attachment: HeatMap_480ceaa9.zip

Live Chat Icon For mobile
Up arrow icon