Diverging Stacked Bar Chart #1639

New Issue

claunia · 2026-01-29T17:56:35Z

claunia commented

2026-01-29 17:56:35 +00:00

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.

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 }, }; } ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1639