Radzen Donut Chart

Hi Radzen Team.

I'm having a problem using your Donut Chart component, similar to this topic. This happens when I zoom in the page or just in different resolution screens.

I looked closely to your Donut Chart and Dashboard examples and this problem somehow shows up on my end and I don't know what is causing it. As for the data, I use string for the label and int for the numeric values to populate the chart.

What I also noticed is that this is somehow related to the values used in the path of the SVG. If I also play with the width and height of the chart this problem will be hidden but since I use a custom width and height I will always get this problem.

As I show in the following screenshot, this problem is somehow related to those 69,99786376953125 values in which I believe they should be 69.99786376953125 causing the chart to break.

I don't actually know if it's my end causing the problem but we need furter investigation and your help would be fantastic!

Broken with 69,99786376953125 and Fixed with 69.99786376953125

Those values with the comma are the problem. It should be a dot instead. It seems there is some code which remains broken (renders floating point numbers with comma instead of a dot). Can you share the actual configuration? We will also need the values that you use in order to reproduce the problem and fix it.

Thank you for your extended help. This is somehow related to Blazor globalization and localization since I remembered I used different approaches there, for example, 57,33% for percentage or 10,198 for integer values.

When I set builder.Services.AddLocalization();
followed by

app.UseRequestLocalization(new RequestLocalizationOptions()
.AddSupportedCultures(new[] { "en-US", "es-CL" })
.AddSupportedUICultures(new[] { "en-US", "es-CL" }));

this problem seems to be fixed, so I actually think this is a problem at my end possibly.

For debug I will leave this screenshot here where I set InvariantGlobalization so you can get more info out of this situation and address if this is actually a bug or a problem at my end.

And fixed

The problem is indeed caused by localization - in certain cultures Blazor uses , for decimal separator (which is correct most of the time). However SVG and JavaScript need decimal separators to be . always. The Radzen components try to always use . but you seem to have discovered a case where this isn't happening. This is why I requested the data and configuration you use for the chart - pasting here the code should suffice.

It sure seems like! Of course, I will do everything I can to help.

You need anything more besides this? Please let me know.

Configuration for the chart:

    <div class="col-sm-12 col-lg-6 col-xl-4 col-xxl-4 p-2">
        <RadzenCard Style="height: 430px;">
            <RadzenChart Style="width: 100%; height: 344px;">
                <RadzenDonutSeries Data="@_hospitalErrorsByCategory" CategoryProperty="ErrorCategory" Title="Total" ValueProperty="ErrorCount">
                        <div class="rz-donut-content">
                            <div class="text-danger fs-2">@_hospitalErrorsByCategory?.Sum(s => s.ErrorCount)</div> 


List<HospitalError> _hospitalErrorsByCategory;

public class HospitalError
    public string ErrorCategory { get; set; }
    public int ErrorCount { get; set; }

Yes, I will need the actual values of the _hospitalErrorsByCategory property - the ErrorCount properties.

Sure, there you go.

Thanks! We reproduced the localization issue and will fix it with the next release.