Ordering of x-axis in Stacked Column Chart

Radzen.Blazor Components
1

I'm trying to create a Stacked Column Chart, with several data series. The different series contain dates (yyyy-mmm) and count of elements.
Not all series have values for each date.
When I display the stacked chart, I notice that the x-axis is not ordered by the date values (which I expected). It seems the ordering of the x-axis is using the combination of the series, but the series x-axis data is not merged.

So I end up with dates that use the x-values of the first series as long as these dates are increasing. Then, when the next series has a lower date value, a new x-axis value is added to the x-axis at the end.

Is there a way to present the series in such a way that the x-axis date is ordered for the overall values of the x-axis of all the concerned series?

Many thanks!

2

Hi @rudolfdeschipper,

I couldn't understand your question. Can you prepare some example by editing the online demo?

3

Sure, look at the data for the 2 series. When you run this example, the x-axis values do not follow a logical sequence (I had expected the 2 sets to get merged into an ordered reduced set of sequential dates - I kept Quarter as the field, but it's months now).
I'd like to understand how I can achieve that for each series, the months get combined, and that the months are ordered sequentially.

@using System.Globalization

<RadzenRow>
    <RadzenColumn Size="12">
        <h4>Auto-size stacked column series</h4>
        <RadzenChart>
            <RadzenStackedColumnSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
                <RadzenSeriesDataLabels Visible="@showDataLabels" />
            </RadzenStackedColumnSeries>
            <RadzenStackedColumnSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue">
                <RadzenSeriesDataLabels Visible="@showDataLabels" />
            </RadzenStackedColumnSeries>
            <RadzenColumnOptions Radius="5" />
            <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Max="800000" Step="100000">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Revenue in USD" />
            </RadzenValueAxis>
        </RadzenChart>
    </RadzenColumn>

    <RadzenColumn Size="12">
        <h4>Custom size stacked column series</h4>
        <RadzenChart>
            <RadzenStackedColumnSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" />
            <RadzenStackedColumnSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" />
            <RadzenColumnOptions Radius="5" Width="20" />
            <RadzenCategoryAxis Padding="20" />
            <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Max="800000" Step="100000">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Revenue in USD" />
            </RadzenValueAxis>
        </RadzenChart>
    </RadzenColumn>
</RadzenRow>

@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[] revenue2023 = new DataItem[] {
    new DataItem
    {
        Quarter = "2024-02",
        Revenue = 234000
    },
    new DataItem
    {
        Quarter = "2024-03",
        Revenue = 284000
    },
    new DataItem
    {
        Quarter = "2024-10",
        Revenue = 274000
    },
    new DataItem
    {
        Quarter = "2024-11",
        Revenue = 294000
    },
};

DataItem[] revenue2024 = new DataItem[] {
    new DataItem
    {
        Quarter = "2024-01",
        Revenue = 254000
    },
    new DataItem
    {
        Quarter = "2024-03",
        Revenue = 354000
    },
    new DataItem
    {
        Quarter = "2024-10",
        Revenue = 394000
    },

    new DataItem
    {
        Quarter = "2024-12",
        Revenue = 394000
    },
};

}

4

I see what you mean. Indeed currently this won't work as you expect - the stacking requires all categories to have data for the corresponding series. Here is the implementation for more detail: radzen-blazor/Radzen.Blazor/RadzenStackedColumnSeries.razor.cs at master · radzenhq/radzen-blazor · GitHub