Syncfusion Blazor HeatMap rect attribute negative width/height error

[Lokesha.B]

Hello,

I’m encountering an issue with the Blazor HeatMap component where I get runtime  errors like:

Error: <rect> attribute width: A negative value is not valid. ("-12.54")

Error: <rect> attribute height: A negative value is not valid. ("-1.96").

Could you please help me with the fix for these error.

Bellow is the code i have used to display Heatmap, which is copied from syncfusion documentation

@page "/sampleheatmap"

@layout EmptyLayout

@using Syncfusion.Blazor.HeatMap

@using System.Globalization

@using System.IO

@using System.Text

<SfHeatMap DataSource="@HeatMapData" Width="100" Height="100">

    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">

    </HeatMapTitleSettings>

    <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>

    <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapYAxis>

</SfHeatMap>

@code {

    int[,] GetDefaultData()

    {

        int[,] dataSource = new int[,]

        {

            {73, 39, 26, 39, 94, 0},

            {93, 58, 53, 38, 26, 68},

            {99, 28, 22, 4, 66, 90},

            {14, 26, 97, 69, 69, 3},

            {7, 46, 47, 47, 88, 6},

            {41, 55, 73, 23, 3, 79}

        };

        return dataSource;

    }

    string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };

    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };

    public object HeatMapData { get; set; }

    protected override void OnInitialized()

    {

        HeatMapData = GetDefaultData();

        StateHasChanged();

    }

}

Thank you!

[Durga Gopalakrishnan]

Hi Lokesha,

Thanks for using Syncfusion products.

We have considered your reported scenario as bug and logged a defect report for the issue “Exception while specifying height and width for heatmap”. This fix will be available in our 3rd weekly patch release of October 2025. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/70546/exception-while-specifying-height-and-width-for-heatmap

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Lokesha,

We are glad to announce that our v31.2.3 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.HeatMap NuGet package.

Root Cause :

The Heat Map throws an exception when the height is specified as a percentage. This occurs because when a percentage height is applied, the Heat Map element’s bounding client rectangle always returns a height of 18px. This leads to incorrect rendering.

Fix :

If the height is specified as a percentage, set the height value to an empty string to allow the Heat Map to use its default size. Then, retrieve the element’s offset values and calculate the correct pixel height based on the percentage.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap

Sample : https://blazorplayground.syncfusion.com/BDrIWXLhzoejJVUT

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.