Radzen Chart Line Series unexpected behaviour

Radzen.Blazor Components
1

I'm hoping someone can help me with some unexpected behaviour. Using the demo RadzenChart / LineChart as a template, I've made a chart that shows two years' worth of data. The trouble is that is all shows as one row, instead of stacking the years.

Each RadzenLineSeries refers to an array of DataItem objects, just like the demo - in my case, the DataItem is comprised of a string called Date, and a decimal called Consumption. Each array contains a complete year of DataItem objects, one for each month. If I don't have data for that month, the DataItem gets a zero value.

My expectation is that these years would be stacked on top of each other, but I'm not sure what I could be doing wrong. Any ideas would be greatly appreciated (or possibly there's something blindingly obvious that I'm missing?)

            <RadzenChart>
                <RadzenLineSeries Smooth="true" Data="@priorYearData" CategoryProperty="Date" Title="@priorYear.ToString()" LineType="LineType.Solid" ValueProperty="Consumption">
                    <RadzenMarkers Visible="true" MarkerType="MarkerType.Triangle"></RadzenMarkers>
                    <RadzenSeriesDataLabels Visible="true"></RadzenSeriesDataLabels>
                </RadzenLineSeries>
                <RadzenLineSeries Smooth="true" Data="@currentYearData" CategoryProperty="Date" Title="@currentYear.ToString()" LineType="LineType.Solid" ValueProperty="Consumption">
                    <RadzenMarkers Visible="true" MarkerType="MarkerType.Triangle"></RadzenMarkers>
                    <RadzenSeriesDataLabels Visible="true"></RadzenSeriesDataLabels>
                </RadzenLineSeries>

                <RadzenCategoryAxis Padding="20" Formatter="@FormatAsMonth" />
                <RadzenValueAxis Formatter="@FormatTwoDecimals">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Consumption in m3" />
                </RadzenValueAxis>

            </RadzenChart>

Helper functions:

    public DataItem[] GetMonthlyReadings(IEnumerable<MonthlyConsumptionEstimate> estimates, int year)
    {
        DataItem[] tmpItems = new DataItem[12];
        for (int i = 0; i < 12; i++)
        {
            tmpItems[i] = new DataItem
                {
                    Consumption = estimates.FirstOrDefault(o => o.Month == i+1)?.Consumption ?? 0.0m,
                    Date = new DateTime(year, i+1, 1).ToString()
                };
        }
        return tmpItems;
    }

    string FormatAsMonth(object value)
    {
        if (value != null)
        {
            return Convert.ToDateTime(value).ToString("MMM");
        }

        return string.Empty;
    }

    string FormatTwoDecimals(object value)
    {
        return ((double)value).ToString("F2");
    }
2

Hi @Thlayli,

Unfortunately I am not sure what the problem is and the provided code doesn't indicate the cause of it. Please provide a runnable reproduction.

3

I cannot provide a runnable reproduction, but the Radzen's demo version will suffice to show the problem. It was difficult to detect.

The demo version is showing a chart that appears to be showing data for two years: 2019 and 2020. However, the actual data elements all use 2019 dates, even in the 'revenue2020' array. If you were to change the dates in the 'revenue2020' array to actually use 2020 dates, you would be able to duplicate the behaviour: the LineSeries elements will not stack for the same month, but different years.

I don't know if this is a bug or not, but it's not intuitive to me, at least. It seems odd to me that I'd have to fake the actual dates in my data as a workaround for the chart to give me what I expect: a line for each year, using the correctly dated data.

Please let me know if I've missed something, or if there's another way I should be thinking about this, and thanks for helping think through the problem.

4

Hi @Thlayli,

You are right that the demo uses the same dates. We will fix that.

However stacking charts stack series values for the same category. This means that the category must be the same for two points that should stack. Otherwise RadzenChart would just treat them as different categories (as it currently does).

5

I appreciate what you're saying, and it makes sense in a way. I wonder if the demo shouldn't use strings representing dates at all, but instead use just the string of the month it represents?

Using 'fake' dates seems like a cheat somehow, and having the demo use just the string for the month might make it more obvious for new users like myself.

Thanks again for your time!

6

That's precisely what I am going to do :slight_smile: