Support for duplicate Category names without overwriting data

Radzen.Blazor Components
1

image
image2003×987 73.3 KB

For the line series, I need to show for a cross year data series for example for 2 years.

If I need them as one continuous line, then the Category is using the X axis label as identifier as I can see. The issue with this is that if the labels are the same ( for example over 2 years then I have 2 of each month data ) then I see that the data shown is only for the last year, presumably because the latest entry is overwriting the other.

If I want to show it in one series, then I need to make the labels unique, but then this makes an issue with the spacing, as well as repetitive text that clutters the UI.

image
image1164×459 19.8 KB

Is there a way to address this that is not detailed in the Line series example?

Or otherwise is there a plan to modify this to allow cross year data to be shown like this? By having a different way to identify the category in the backend and not rely on the actual user facing label?

Or perhaps having some form of option to have the common label text shown as a segment spawning across the months

2

Hi @iustin94

Give this a try. It’s a modification of the existing example. Points to note -

  • The axis have a unique value of month year, i.e. Jan23, Feb23….Jan24, Feb24
  • Retitle the series as 2023 / 2024
  • Check the FormatAsMonthOnly function and Formatter setter. This just formats the axis values as the first three characters
@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" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox>
                <RadzenLabel Text="Smooth" Component="smooth" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
                <RadzenLabel Text="Show Data Labels" Component="dataLabels" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@showMarkers" Name="markers"></RadzenCheckBox>
                <RadzenLabel Text="Show Markers" Component="markers" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@sharedTooltip" Name="sharedToltip"></RadzenCheckBox>
                <RadzenLabel Text="Shared Tooltip" Component="sharedTooltip" />
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>

   <RadzenChart>
        <RadzenChartTooltipOptions Shared="@sharedTooltip" />
        <RadzenLineSeries Smooth="@smooth" Data="@revenueData" CategoryProperty="Date" Title="2023 / 2024" LineType="LineType.Dashed" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Square" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" />
        </RadzenLineSeries>
        <RadzenCategoryAxis Formatter="@FormatAsMonthOnly" Padding="20" />
        <RadzenValueAxis Formatter="@FormatAsUSD">
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Revenue in USD" />
        </RadzenValueAxis>
    </RadzenChart>
</RadzenStack>

@code {
    bool smooth = false;
    bool sharedTooltip = true;
    bool showDataLabels = false;
    bool showMarkers = true;

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

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

    string FormatAsMonthOnly(object value)
    {
        if(value!=null)
        {
            return value.ToString().Substring(0,3);
        }
        else
        {
            return "";
        }
    }

    DataItem[] revenueData = new DataItem[] {
        new DataItem
        {
            Date = "Jan23",
            Revenue = 234000
        },
        new DataItem
        {
            Date = "Feb23",
            Revenue = 269000
        },
        new DataItem
        {
            Date = "Mar23",
            Revenue = 233000
        },
        new DataItem
        {
            Date = "Apr23",
            Revenue = 244000
        },
        new DataItem
        {
            Date = "May23",
            Revenue = 214000
        },
        new DataItem
        {
            Date = "Jun23",
            Revenue = 253000
        },
        new DataItem
        {
            Date = "Jul23",
            Revenue = 274000
        },
        new DataItem
        {
            Date = "Aug23",
            Revenue = 284000
        },
        new DataItem
        {
            Date = "Sept23",
            Revenue = 273000
        },
        new DataItem
        {
            Date = "Oct23",
            Revenue = 282000
        },
        new DataItem
        {
            Date = "Nov23",
            Revenue = 289000
        },
        new DataItem
        {
            Date = "Dec23",
            Revenue = 294000
        },
        new DataItem
        {
            Date = "Jan24",
            Revenue = 234000
        },
        new DataItem
        {
            Date = "Feb24",
            Revenue = 269000
        },
        new DataItem
        {
            Date = "Mar24",
            Revenue = 233000
        },
        new DataItem
        {
            Date = "Apr24",
            Revenue = 244000
        },
        new DataItem
        {
            Date = "May24",
            Revenue = 214000
        },
        new DataItem
        {
            Date = "Jun24",
            Revenue = 253000
        },
        new DataItem
        {
            Date = "Jul24",
            Revenue = 274000
        },
        new DataItem
        {
            Date = "Aug24",
            Revenue = 284000
        },
        new DataItem
        {
            Date = "Sept24",
            Revenue = 273000
        },
        new DataItem
        {
            Date = "Oct24",
            Revenue = 282000
        },
        new DataItem
        {
            Date = "Nov24",
            Revenue = 289000
        },
        new DataItem
        {
            Date = "Dec24",
            Revenue = 294000
        }
    };

    DataItem[] revenue2024 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 334000
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 369000
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 333000
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 344000
        },
        new DataItem
        {
            Date = "May",
            Revenue = 314000
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 353000
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 374000
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 384000
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 373000
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 382000
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 389000
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 394000
        }
    };
}

Regards

Paul

2 Likes
3

Great idea! Thanks :+1: