Radzen Blazor Chart column series does not display some data

[MikeWilliams-UK]

RadzenChart misses first and last bars.txt Describe the bug We are trying to display 11 bars using the RadzenChart with 11 sets of RadzenColumnSeries each of which has a single data point in.

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://blazor.radzen.com/column-chart'
2. Click on 'Edit Source'
3. Replace the code with that below
4. Click on 'Run'

Alternatively link your repo with a sample project that can be run.

Expected behavior All 11 bars are shown and aligned with the tick marks

Screenshots

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Chrome]
• Version [Version 128.0.6613.85 (Official Build) (64-bit)]

Additional context If you click on the show data labels you can see that the labels for the missing bars are being rendered at positions outside the graph

If I reduce the number of bars to six I eventually get this

Code

@using System.Globalization

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
            <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
            <RadzenLabel Text="Show Data Labels" Component="dataLabels" />
        </RadzenStack>
    </RadzenCard>
    <RadzenRow>
        <RadzenColumn Size="12">
            <RadzenChart>
                <RadzenColumnSeries Data="@revenue2010" CategoryProperty="Quarter" Title="2010" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2011" CategoryProperty="Quarter" Title="2011" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2012" CategoryProperty="Quarter" Title="2012" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2013" CategoryProperty="Quarter" Title="2013" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2014" CategoryProperty="Quarter" Title="2014" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2015" CategoryProperty="Quarter" Title="2015" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2016" CategoryProperty="Quarter" Title="2016" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2017" CategoryProperty="Quarter" Title="2017" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2018" CategoryProperty="Quarter" Title="2018" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2019" CategoryProperty="Quarter" Title="2019" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnSeries Data="@revenue2020" CategoryProperty="Quarter" Title="2020" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenValueAxis Formatter="@FormatAsUSD">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
                <RadzenLegend Visible="false" />
            </RadzenChart>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>

@code {
    bool showDataLabels = false;

    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

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

    DataItem[] revenue2010 = new DataItem[] {
        new DataItem
        {
            Quarter = "2010",
            Revenue = 201000
        }
    };

    DataItem[] revenue2011 = new DataItem[] {
        new DataItem
        {
            Quarter = "2011",
            Revenue = 201100
        }
    };

    DataItem[] revenue2012 = new DataItem[] {
        new DataItem
        {
            Quarter = "2012",
            Revenue = 201200
        }
    };

    DataItem[] revenue2013 = new DataItem[] {
        new DataItem
        {
            Quarter = "2013",
            Revenue = 201300
        }
    };

    DataItem[] revenue2014 = new DataItem[] {
        new DataItem
        {
            Quarter = "2014",
            Revenue = 201400
        }
    };

    DataItem[] revenue2015 = new DataItem[] {
        new DataItem
        {
            Quarter = "2015",
            Revenue = 201500
        }
    };

    DataItem[] revenue2016 = new DataItem[] {
        new DataItem
        {
            Quarter = "2016",
            Revenue = 201600
        }
    };

    DataItem[] revenue2017 = new DataItem[] {
        new DataItem
        {
            Quarter = "2017",
            Revenue = 201700
        }
    };

    DataItem[] revenue2018 = new DataItem[] {
        new DataItem
        {
            Quarter = "2018",
            Revenue = 201800
        }
    };

    DataItem[] revenue2019 = new DataItem[] {
        new DataItem
        {
            Quarter = "2019",
            Revenue = 201900
        }
    };

    DataItem[] revenue2020 = new DataItem[] {
        new DataItem
        {
            Quarter = "2020",
            Revenue = 202000
        }
    };
}

[akorchev]

Replace the code with the attached file

I don't see any file attached.

[MikeWilliams-UK]

Sorry I will attach the file

[MikeWilliams-UK]

Code added at end as attaching file did not seem to work.

[akorchev]

Indeed such configuration won't work with RadzenChart as you expect it - the category axis gets confused by the different category values in the different series.

I suggest using a single column series instead similar to our demo. If you want every column to have to have different color use the Fills attribute of RadzenColumnSeries:

  <RadzenColumnSeries Data="@revenue2024" Fills="@(new [] {"red", "green", "blue", "orange"})" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>

[MikeWilliams-UK]

Many thanks for your quick reply @akorchev