Hello,
I am using the Heatmap component and I want to make some changes at its style
And generally how can I edit the css of the Heatmap component?
Thanks in advance!
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.
|
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 |
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!
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.
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.
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.
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.
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!
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.