starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Radzen Blazor Chart column series does not display some data #1369

New Issue
Closed
opened 2026-01-29 17:52:43 +00:00 by claunia · 5 comments
claunia commented 2026-01-29 17:52:43 +00:00
Owner
Copy Link

Originally created by @MikeWilliams-UK on GitHub (Aug 28, 2024).

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
image

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
image

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

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
        }
    };
}
Originally created by @MikeWilliams-UK on GitHub (Aug 28, 2024). [RadzenChart misses first and last bars.txt](https://github.com/user-attachments/files/16778384/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** ![image](https://github.com/user-attachments/assets/2edcfb1b-ecd7-466e-b498-37e635c08b77) **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 ![image](https://github.com/user-attachments/assets/8627d4e6-3517-44e3-8e9b-6e4252156ea5) If I reduce the number of bars to six I eventually get this ![image](https://github.com/user-attachments/assets/0f23c02f-cc6f-492b-8b50-56b9a5dfc3a7) 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 } }; } ```
claunia commented 2026-01-29 17:52:43 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Aug 28, 2024):

Replace the code with the attached file

I don't see any file attached.

@akorchev commented on GitHub (Aug 28, 2024): > Replace the code with the attached file I don't see any file attached.
claunia commented 2026-01-29 17:52:43 +00:00
Author
Owner
Copy Link

@MikeWilliams-UK commented on GitHub (Aug 28, 2024):

Sorry I will attach the file

@MikeWilliams-UK commented on GitHub (Aug 28, 2024): Sorry I will attach the file
claunia commented 2026-01-29 17:52:44 +00:00
Author
Owner
Copy Link

@MikeWilliams-UK commented on GitHub (Aug 28, 2024):

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

@MikeWilliams-UK commented on GitHub (Aug 28, 2024): Code added at end as attaching file did not seem to work.
claunia commented 2026-01-29 17:52:44 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Aug 28, 2024):

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>
image
@akorchev commented on GitHub (Aug 28, 2024): 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> ``` <img width="1123" alt="image" src="https://github.com/user-attachments/assets/bdf9ad15-a94f-4868-9994-481f2ac0f57b">
claunia commented 2026-01-29 17:52:44 +00:00
Author
Owner
Copy Link

@MikeWilliams-UK commented on GitHub (Aug 28, 2024):

Many thanks for your quick reply @akorchev

@MikeWilliams-UK commented on GitHub (Aug 28, 2024): Many thanks for your quick reply @akorchev
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1369
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?