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

Diverging Stacked Bar Chart #1641

New Issue
Closed
opened 2026-01-29 17:56:37 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:56:37 +00:00
Owner
Copy Link

Originally created by @MikeWilliams-UK on GitHub (Feb 25, 2025).

Describe the solution you'd like
I have some data which needs to be represented in a diverging stacked bar chart.
I would like to be able to create a diverging stacked bar chart using radzen components.

Describe alternatives you've considered
I have modified the code in the radzen stacked bar chart sample page (to that at the bottom of this feature request) to simulate my data and the stacked bars get overlapped.
https://blazor.radzen.com/stacked-bar-chart?theme=material3
You can see that the values for Q1 and Q2 which now have +ve and -ve values are overlapped.
Image

Additional context
An example of how such a chart might look can be seen here
https://observablehq.com/@d3/diverging-stacked-bar-chart/2

@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">
            <h4>Auto-size stacked bar series</h4>
            <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
                <RadzenStackedBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedBarSeries>
                <RadzenStackedBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedBarSeries>
                <RadzenValueAxis Formatter="@FormatAsUSD">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
                <RadzenBarOptions Radius="5" />
            </RadzenChart>
        </RadzenColumn>

        <RadzenColumn Size="12">
            <h4>Custom size stacked bar series</h4>
            <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
                <RadzenStackedBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" />
                <RadzenStackedBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" />
                <RadzenValueAxis Formatter="@FormatAsUSD" >
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
                <RadzenBarOptions Radius="5" Height="20" />
            </RadzenChart>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    bool showDataLabels;

    void OnSeriesClick(SeriesClickEventArgs args)
    {
        console.Log(args);
    }

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

    string FormatAsUSD(object value)
    {
        double num = (double)value / 1000;

        return num.ToString("$0K");
    }

    DataItem[] revenue2023 = new DataItem[]
    {
    new DataItem
    {
        Quarter = "Q1",
        Revenue = 234000
    },
    new DataItem
    {
        Quarter = "Q2",
        Revenue = -284000
    },
    new DataItem
    {
        Quarter = "Q3",
        Revenue = 274000
    },
    new DataItem
    {
        Quarter = "Q4",
        Revenue = 294000
    },
    };

    DataItem[] revenue2024 = new DataItem[] {
    new DataItem
    {
    Quarter = "Q1",
    Revenue = -254000
    },
    new DataItem
    {
    Quarter = "Q2",
    Revenue = 324000
    },
    new DataItem
    {
    Quarter = "Q3",
    Revenue = 354000
    },
    new DataItem
    {
    Quarter = "Q4",
    Revenue = 394000
    },

    };
}
Originally created by @MikeWilliams-UK on GitHub (Feb 25, 2025). **Describe the solution you'd like** I have some data which needs to be represented in a diverging stacked bar chart. I would like to be able to create a diverging stacked bar chart using radzen components. **Describe alternatives you've considered** I have modified the code in the radzen stacked bar chart sample page (to that at the bottom of this feature request) to simulate my data and the stacked bars get overlapped. https://blazor.radzen.com/stacked-bar-chart?theme=material3 You can see that the values for Q1 and Q2 which now have +ve and -ve values are overlapped. ![Image](https://github.com/user-attachments/assets/bc4d008b-498d-40a4-ba3a-c2cd5a4948be) **Additional context** An example of how such a chart might look can be seen here https://observablehq.com/@d3/diverging-stacked-bar-chart/2 ``` @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"> <h4>Auto-size stacked bar series</h4> <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px"> <RadzenStackedBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedBarSeries> <RadzenStackedBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedBarSeries> <RadzenValueAxis Formatter="@FormatAsUSD"> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> <RadzenBarOptions Radius="5" /> </RadzenChart> </RadzenColumn> <RadzenColumn Size="12"> <h4>Custom size stacked bar series</h4> <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px"> <RadzenStackedBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" /> <RadzenValueAxis Formatter="@FormatAsUSD" > <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> <RadzenBarOptions Radius="5" Height="20" /> </RadzenChart> </RadzenColumn> </RadzenRow> </RadzenStack> <EventConsole @ref=@console /> @code { EventConsole console; bool showDataLabels; void OnSeriesClick(SeriesClickEventArgs args) { console.Log(args); } class DataItem { public string Quarter { get; set; } public double Revenue { get; set; } } string FormatAsUSD(object value) { double num = (double)value / 1000; return num.ToString("$0K"); } DataItem[] revenue2023 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 234000 }, new DataItem { Quarter = "Q2", Revenue = -284000 }, new DataItem { Quarter = "Q3", Revenue = 274000 }, new DataItem { Quarter = "Q4", Revenue = 294000 }, }; DataItem[] revenue2024 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = -254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, }; } ```
claunia commented 2026-01-29 17:56:37 +00:00
Author
Owner
Copy Link

@MikeWilliams-UK commented on GitHub (Mar 1, 2025):

Are you in a position to say when this fix will be available as a nuget package?

@MikeWilliams-UK commented on GitHub (Mar 1, 2025): Are you in a position to say when this fix will be available as a nuget package?
claunia commented 2026-01-29 17:56:37 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Mar 2, 2025):

It will ship with the very next release - within a couple of days.

@akorchev commented on GitHub (Mar 2, 2025): It will ship with the very next release - within a couple of days.
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#1641
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?