RadzenSeriesTrendLine with customized data set

Radzen.Blazor Components
1

I have a RadzenChart with a RadzenColumnSeries that shows the revenue data for the current year. Depending on the current month, all future months show "0" (e.g., as of today, December shows revenue of "0" because it is still November, and there is no December data yet).

However, I also want to use a RadzenSeriesTrendLine to show a trend line. While this generally works fine, the trend line is incorrect because it takes "0" into account for future months, and the current month only has valid data once the month is over.

Is there a way to limit the RadzenColumnSeries data items for the RadzenSeriesTrendLine? For example, instead of using all 12 data items, could I use only the first 10 for calculating the trend line?

2

Hi @JustJoe,

The trendline uses all data from the series. There currently isn't a way to make it ignore certain values.

3

Ok, thanks @korchev ! It would be great if the RadzenSeriesTrendLine would have a separate data= property so one could optionally supply a different data set to this component.

4

Hi @JustJoe

I don’t know if this will help, but I’ve created a chart based on a Stacked Column Series, where one series is a set of all months with a zero value to mimic a full year, and another series is used for the actual data (both column and trend).

Here’s the code you can paste into any code window on the Radzen Components Site to test. It may give you some ideas.

@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 column series</h4>
            <RadzenChart>
                <RadzenStackedColumnSeries Data="@fullYear" CategoryProperty="Date" Title="Full Year" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedColumnSeries>
                <RadzenColumnOptions Radius="5" />
                <RadzenLineSeries Smooth="true" Data="@revenue2024" CategoryProperty="Date" Title="Trend" ValueProperty="Revenue" RenderingOrder="1">
                    <RadzenSeriesTrendLine Stroke="var(--rz-danger-dark)" LineType="LineType.Dashed" />
                    <RadzenSeriesMedianLine Stroke="var(--rz-success-dark)" LineType="LineType.Dotted" />
                    <RadzenSeriesMeanLine Stroke="var(--rz-info-dark)" LineType="LineType.Dotted" />
                    <RadzenSeriesModeLine Stroke="var(--rz-warning-darker)" LineType="LineType.Dotted" />
                </RadzenLineSeries>
                <RadzenStackedColumnSeries Data="@revenue2024" CategoryProperty="Date" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedColumnSeries>
                <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Max="100" Step="10">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
            </RadzenChart>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>

@code {
    bool showDataLabels = false;

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

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

    DataItem[] fullYear = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 0
        },
        new DataItem
        {
            Date = "May",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 0
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 0
        },
    };

    DataItem[] revenue2024 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 90
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 20
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 30
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 80
        },
        new DataItem
        {
            Date = "May",
            Revenue = 50
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 60
        },
    };
    };
}

Regards

Paul

5

Hi Paul,

thanks a lot for that nice workaround! But let’s hope that Radzen will add an option to supply extra data series to the RadzenSeries… components which would make things much easier and could help to get real use of that statistical graphs even if the full data set is not available (yet) as it is often the case for intra-anual data.

6

I don't think we should implement this feature. It feels strange to specify a second data source for the series just for the purpose of the trendline. I also haven't seen anything like this in other charting libraries.