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! 


2 Replies

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

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 05:11 AM

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!


Loader.
Live Chat Icon For mobile
Up arrow icon