RadzenChart not displaying all columns

Radzen.Blazor Components
1

I can't get the RadzenChart to display all 5 Columns in my data points. Sometimes the second column is missing, sometimes the second and fourth, sometimes the third and fourth, it's random; but theres always at least one column missing. The code is below and here's a video showing the problem.

<RadzenChart >
    <RadzenColumnSeries Data="@GetData()" CategoryProperty="Stars" ValueProperty="Frequency" Title="Frequency" ></RadzenColumnSeries>
    <RadzenCategoryAxis Min="0" Max="5" Step="1"  ></RadzenCategoryAxis>
    <RadzenValueAxis Step="1" ></RadzenValueAxis>
    <RadzenGridLines Visible="true"></RadzenGridLines>
    <RadzenLegend Visible="false"></RadzenLegend>
</RadzenChart>

@code {
    [Parameter] public IEnumerable<int>? Ratings { get; set; }
    private DataItem[] GetData()
    {
        var result = new DataItem[5];
        for (int i = 1; i <= 5; i++)
        {
            var data = new DataItem();
            data.Stars = i;
            if (Ratings != null)
            {
                data.Frequency = Ratings.Count(x => x == i);
            }
            else
            {
                data.Frequency = 0;
            }
            result[i-1] = data;
        }
        return result;
    }
    public class DataItem
    {
        public int Stars { get; set; }
        public int Frequency { get; set; }
    }
}
2

Hi @ConnorHallman,

Try converting the category property to a string.

3

The problem persists.

4

I figured it out. The line that is causes the problem is

    <RadzenValueAxis Step="1"></RadzenValueAxis>

Do you know why this would be the case? The problem occurs whether the category property is a string or int.

5

Can you prepare a standalone example that we can test with? The provided code depends on a parameter.

6

Yes, here. In this example, column 4 does not show up for me.

<RadzenChart>
    <RadzenColumnSeries Data="@Data" CategoryProperty="Stars" ValueProperty="Frequency" />
    <RadzenValueAxis Step="1"></RadzenValueAxis>
    <RadzenCategoryAxis Min="0" Max="5" Step="1"></RadzenCategoryAxis>
    <RadzenGridLines Visible="true"></RadzenGridLines>
    <RadzenLegend Visible="false"></RadzenLegend>
</RadzenChart>
@code {
    class DataItem
    {
        public string Stars { get; set; }
        public int Frequency { get; set; }
    }

    private DataItem[] Data => new DataItem[]
    {
        new DataItem()
        {
            Stars = "1",
            Frequency = 5
        },
        new DataItem()
        {
            Stars = "2",
            Frequency = 3
        },
        new DataItem()
        {
            Stars = "3",
            Frequency = 4
        },
        new DataItem()
        {
            Stars = "4",
            Frequency = 2
        },
        new DataItem()
        {
            Stars = "5",
            Frequency = 7
        },
    };

}
7

It doesn't show because the value axis starts at 2 which happens to be the value of the fourth column. Try setting the Min property of <RadzenValueAxis /> to 0 ant it will show. We will look for a way to mitigate the problem.

8

Just tested with the chart market leader (Highcharts) and it behaves in a similar way - if a value is the same as the automatically calculated minimum value of the Y axis it isn't displayed. Settting the Min value is the recommended solution.

<RadzenChart>
    <RadzenColumnSeries Data="@Data" CategoryProperty="Stars" ValueProperty="Frequency" />
    <RadzenValueAxis Min="0"></RadzenValueAxis>
    <RadzenCategoryAxis Min="0" Max="5" Step="1"></RadzenCategoryAxis>
    <RadzenGridLines Visible="true"></RadzenGridLines>
    <RadzenLegend Visible="false"></RadzenLegend>
</RadzenChart>

image
image1090×596 3.52 KB