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

Heatmap cell and row css editing

Hello,

I am using the Heatmap component and I want to make some changes at its style

  • I want to know how to add cell border only at the right side of the cell
  • And how can I separate each row of the chart with a blank space like adding margin at the row

And generally how can I edit the css of the Heatmap component?

Thanks in advance! 


7 Replies 1 reply marked as answer

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

Hi Amanda,


Please find the details for your queries from the below table.

Queries

Details

I want to know how to add cell border only at the right side of the cell

We do not support to customize the border for individual cell in the HeatMap component. We have considered your requirement as an improvement and added it to our features request list. However, we will include this implementation in our 2022 Volume 4 SP release. Meanwhile, please find the feedback link below to keep track of this improvement.

 

https://www.syncfusion.com/feedback/39251

how can I separate each row of the chart with a blank space like adding margin at the row

We do not support to provide margin among the rows in the HeatMap component.

how can I edit the css of the Heatmap component?

HeatMap component is a SVG based component. We render the HeatMap cells in a single SVG element. We do not support CSS stylesheets in the HeatMap component. However, we can use the properties available in the component to customize the styles.

 

Please refer the below UG documentation for more information.

https://blazor.syncfusion.com/documentation/heatmap-chart/appearance



AM Amanda replied to Indumathi Ravi December 2, 2022 10:11 AM UTC

Hello,


I would like to ask you to add one more thing. I want to add cell border at the bottom side of the cell.


But I want to be able to do the bottom border and the right border from the CellRendering event and not using javascript. Like the way you can add background color at the cell.

Thanks in advance!



IR Indumathi Ravi Syncfusion Team December 5, 2022 02:43 PM UTC

Hi Amanda,

 

The HeatMap component is an SVG-based component. The cells in the HeatMap are rendered as a rect HTML element. The rect HTML element does not support a bottom border or right border. So we do not support the border in the specific direction in the HeatMap cell. This is an invalid request for the component.


Marked as answer

IR Indumathi Ravi Syncfusion Team February 2, 2023 11:12 AM UTC

Hi Amanda,


Sorry for the inconvenience.


We have not included the implementation in our Volume 4 SP release. However, the fix will be included in our 2023 Volume 1 release, which is expected to be available by the end of March, 2023.



IR Indumathi Ravi Syncfusion Team March 24, 2023 04:57 PM UTC

Hi Amanda,


We have implemented the requested feature and the fix is included in our Essential Studio 2023 Volume 1 Main Release v21.1.35 which is rolled out and is available for download under the following link.


Essential Studio 2023 Volume 1 Main Release v21.1.35 is available for download | Announcements Forums | Syncfusion


To change the border color of a single HeatMap cell, we can use the “BorderColor” property in the event argument of the “CellRendering” event. Please find the code snippet for the same below.


Code Snippet:

@using Syncfusion.Blazor.HeatMap;

 

<SfHeatMap >

    <HeatMapEvents CellRendering="CellRender"></HeatMapEvents>

</SfHeatMap>

 

@code{

 

    public void CellRender(HeatMapCellRenderEventArgs args)

    {

        if (args.XLabel == "0" && args.YLabel == "1")

        {

            args.BorderColor = "Violet";

        }

      

    }

}


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.



AM Amanda replied to Indumathi Ravi April 13, 2023 02:11 PM UTC

Hello


Thanks for the new feature and your support.


As I said at a previous reply I would like to make the heatmap rows look separated by adding white color only at the bottom border of the cells

So I managed to do this with the stroke, stroke-dasharray and stroke-dashoffset properties of the rect element. 


I am posting this to give you an idea of how to implement the feature of adding border color at a specific side of the cell

This feature would be really helpful

Thanks in advance!




IR Indumathi Ravi Syncfusion Team April 14, 2023 01:16 PM UTC

Hi Amanda,


Thank you so much for your suggestion, which we greatly appreciate. Meanwhile, customizing the entire border is a general requirement, but taking top, bottom, left, and right into account individually and independently is not a valid request. As a result, we kindly recommend that you use the workaround solution because we have no plans to support it.


Loader.
Live Chat Icon For mobile
Up arrow icon