RadzenChart data does not appear properly

Hi there,
I have a RadzenChart dashboard page that is displayed after successful login.

Here is the razor page:

@page "/"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using System.Globalization
@inject IAnnualStatusViewModel AnnualStatusViewModel

<div class="px-4 py-5 my-5 text-center">
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    Order Status
                </div>
                <div class="card-body">
                    <RadzenChart @ref="myChart">
                        <RadzenColumnSeries Data="@yearlyStatus" CategoryProperty="Status" Title="2022" LineType="LineType.Dashed" ValueProperty="Count">
                            <RadzenSeriesDataLabels Visible="@showDataLabels"/>
                        </RadzenColumnSeries>
                        <RadzenColumnOptions Radius="10"/>
                        <RadzenValueAxis Formatter="@FormatAsUSD">
                            <RadzenGridLines Visible="true"/>
                            <RadzenAxisTitle Text="Quantity"/>
                        </RadzenValueAxis>
                    </RadzenChart>
                </div>
            </div>
        </div>
    </div>
</div>
@if (earnings != null)
{
    <div class="row mt-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    Earnings - Last 3 Months
                </div>
                @*<div class="card-body">
                    <div style="display: flex">
                        <PieChart Colors="@colors" Data="@earnings.CurrentMonth" />
                        <PieChart Colors="@colors" Data="@earnings.LastMonth" />
                        <PieChart Colors="@colors" Data="@earnings.PreviousMonth" />
                    </div>
                </div>*@
            </div>
        </div>
    </div>
}

@if (expenses != null)
{
    <div class="row mt-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    Expenses - Last 3 Months
                </div>
                @*<div class="card-body">
                    <div style="display: flex">
                        <PieChart Colors="@colors" Data="@expenses.CurrentMonth" />
                        <PieChart Colors="@colors" Data="@expenses.LastMonth" />
                        <PieChart Colors="@colors" Data="@expenses.PreviousMonth" />
                    </div>
                </div>*@
            </div>
        </div>
    </div>
}

@code {
    RadzenChart myChart;
    bool showDataLabels = true;
    private static int currentYear = DateTime.Today.Year;
    private ICollection<string> colors = new List<string>() { "#FBC687", "#F4F7C5", "#93ABD3" };
    private ICollection<Order> yearlyExpenses;
    private ICollection<AnnualStatusViewModel> yearlyStatus;
    private Order earnings;
    private Order expenses;

    protected override async Task OnInitializedAsync()
    {

        //earnings = await _dataService.LoadLast3MonthsEarnings();
        //expenses = await _dataService.LoadLast3MonthsExpenses();
        //yearlyExpenses = await _dataService.LoadCurrentYearExpenses();
        yearlyStatus = await AnnualStatusViewModel.ExecuteAsync();
        
        StateHasChanged();
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("N0", CultureInfo.CreateSpecificCulture("en-US"));
        
    }
}

Here is the sample data query output:

And here is the chart:

Why does the chart look like this? I kindly request your help, thank you.

Hi @Raysefo,

Try setting the Min property of RadzenValueAxis:

<RadzenValueAxis Min="0">

We will investigate if we can improve the default behavior so it doesn't lead to situations like this.

1 Like

Thank you for your support over the weekend. @korchev exemplary work ethic :slight_smile:

Same issue and that fixed it... Thanks..

Yes it did work however its also displaying an error message in the console

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

  •  Unhandled exception rendering component: Specified argument was out of the range of valid values. (Parameter 'Step must be greater than zero')*
    

System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. (Parameter 'Step must be greater than zero')

  • at Radzen.Blazor.LinearScale.Ticks(Int32 distance)*
  • at Radzen.Blazor.RadzenColumnSeries`1[[DWR.Client.Shared.DashboardCoordinatorStatusComponent.WorkRequestDateGroup, DWR.Client, Version=2023.8.14.1159, Culture=neutral, PublicKeyToken=null]].Render(ScaleBase categoryScale, ScaleBase valueScale)*
  • at Radzen.Blazor.RadzenChart.b__113_2(RenderTreeBuilder __builder2)*
  • at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)*
  • at Microsoft.AspNetCore.Components.CascadingValue`1[[Radzen.Blazor.RadzenChart, Radzen.Blazor, Version=4.15.2.0, Culture=neutral, PublicKeyToken=null]].Render(RenderTreeBuilder builder)*
  • at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)*

To get around this I added a Count > 0 check.
This resolved the issue

<div style="min-height: 200px">
    @if (DocAreaRequestByStatus.Count > 0)
    {
        <RadzenChart SeriesClick="@OnSeriesClick">
            <RadzenColumnSeries Data="@DocAreaRequestByStatus" Fill="@Fill" ValueProperty="Count" CategoryProperty="DocArea">
                <RadzenSeriesDataLabels Visible="true"/>
                <RadzenColumnOptions Radius="5"/>
                <RadzenLegend Visible="false"/>
            </RadzenColumnSeries>
            <RadzenValueAxis Min="0"/>
        </RadzenChart>
    }
</div>