How to remove the gap between the cells in the Blazor HeatMap?

In the Blazor HeatMap, the visible gap between the rectangles represents the spacing between individual cells. This can be customized by using CSS style to the SVG element at the application level. This section will show you how to remove the entire gap between the cells in the HeatMap.

You can change the gap between cells in the HeatMap component by using the Width property in the HeatMapCellBorder tag. In some cases, even setting the Width value to zero might not entirely remove the gap between cells. However, applying the shape-rendering CSS style to crispEdges directly to the SVG element of HeatMap component helps in eliminating the gap.

The below code example demonstrates how to remove the gap between the cells in the Blazor HeatMap:

Index.razor

@using Syncfusion.Blazor.HeatMap;

<SfHeatMap ID="heatmap" DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
        <HeatMapCellBorder Width="0" Color="White"></HeatMapCellBorder>
    </HeatMapCellSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39}
        };
        return dataSource;
    }
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
   
    public class CellRect
    {
        public double width { get; set; }
        public double height { get; set; }
        public double x { get; set; }
        public double y { get; set; }
    }
}

<style>
    svg {
        shape-rendering :crispEdges;
    }
</style>

The following screenshot illustrates the output of the above code snippet.

Screenshot before applying CSS style to the SVG element:

Screenshot after applying CSS style to the SVG element:

View the sample in GitHub

Conclusion

I hope you enjoyed learning how to remove the gap between the cells in the Blazor HeatMap.

You can refer to our Blazor HeatMap feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor HeatMap example to understand how to create and visualize data.

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

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