How to Minimize White Borders in SVG-Based Blazor HeatMap Charts?

This article explains how to minimize white borders in SVG Blazor HeatMaps Chart, to improve the visual clarity of SVG-based heatmaps and reduce the appearance of white borders around each cell, you can apply the CSS shape-rendering property with the value crispEdges to the group element.

This technique ensures that the edges of each rectangle are rendered sharply, minimizing anti-aliasing effects that can cause unwanted white lines between cells.

Steps to apply the enhancement

• Identify the (group) element within your SVG heatmap that contains the individual rectangle cells.
• Add a CSS rule targeting this element using its id attribute.

For example, if the group element has the ID heatmap_Container_RectGroup, apply the shape-rendering: crispEdges style to it. This instructs the browser to render the shapes with sharp edges, effectively reducing anti-aliasing and minimizing the appearance of white borders between cells.

Ensure that the ID used in your CSS selector exactly matches the ID of the SVG group element so the style is applied correctly.

<style>

  #heatmap_Container_RectGroup {

       shape-rendering: crispEdges;

   }

</style> 

Output

Sample

View Sample on Blazor Playground

Conclusion

I hope you enjoyed learning about how to minimize white borders in SVG Blazor HeatMaps Chart.

You can refer to our Blazor HeatMap Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor HeatMap Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor HeatMap Chart and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!