Radzen Donut Chart

Radzen.Blazor Components
1

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!

image
image1443×371 28.3 KB

Broken with 69,99786376953125 and Fixed with 69.99786376953125

image
image1221×784 30.9 KB

2

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.

3

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.

image
image1683×753 126 KB

And fixed

image
image1689×786 135 KB

4

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.

5

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">
                    <TitleTemplate>
                        <div class="rz-donut-content">
                            <div class="text-danger fs-2">@_hospitalErrorsByCategory?.Sum(s => s.ErrorCount)</div> 
                        </div>
                    </TitleTemplate>
                </RadzenDonutSeries>
            </RadzenChart>
        </RadzenCard>
    </div>

Data:

List<HospitalError> _hospitalErrorsByCategory;

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

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

7

Sure, there you go.

image
image754×355 15.1 KB

8

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

2 Likes