Ability to create custom RadzenChart Overlays / Extend Chart Series #1721

New Issue

claunia · 2026-01-29T17:57:44Z

claunia commented

2026-01-29 17:57:44 +00:00

Originally created by @Quasmo on GitHub (Apr 17, 2025).

Enhancement 1 - Different styling / custom clip path

I am trying to create a graph where different sections of the same graph line appear with different styling.

@* Term Pricing *@
<RadzenLineSeries Smooth="true" Data="@unitDetails.UnitResponseFinalTermPremiums" CategoryProperty="Term" LineType="LineType.Solid" ValueProperty="FinalPrice" TooltipTemplate="TooltipFragment" Stroke="var(--rz-base-700)" >
    <ChildContent>
        <RadzenMarkers MarkerType="MarkerType.Square" Visible="true" />
    </ChildContent>
</RadzenLineSeries>

@* Unit Occupied Graph *@
@if (dateVacantMonth >= CurrentMonth)
{
    <RadzenLineSeries Smooth="true" Data="@unitDetails.UnitResponseFinalTermPremiums.Where(x => CurrentMonth.AddMonths(x.Term - 1) <= unitDetails.DateVacant)" CategoryProperty="Term" LineType="LineType.Dashed" ValueProperty="FinalPrice" Stroke="var(--rz-base-300)" TooltipTemplate="TooltipFragment">
        <ChildContent>
            <RadzenSeriesAnnotation Visible="true" Data="@unitDetails.UnitResponseFinalTermPremiums.Where(x => CurrentMonth.AddMonths(x.Term - 1) == dateVacantMonth).FirstOrDefault()" OffsetY="-20" Text="Move Out" />
            <RadzenMarkers MarkerType="MarkerType.Square" Visible="true" />
        </ChildContent>
    </RadzenLineSeries>
}

While this does work to some degree, because of the spline generation of the graph, the graph lines do not exactly match between the last two points. I understand that this is because the spline generation does not have the future datapoint to curve the line. This is more apparent in the following image.

To solve this, I wanted to extend the RadzenLineSeries class, and create a custom clip path. Unfortunately, because the Chart.Series object is set as internal, I am unable to get the index of the series to generate the css selector. Maybe this could be part of the solution for allowing null variables as part of the graph, using the clip path to hide portions of the line segments.

Enhancement - point value given category value. I would like to Create a Custom Annotation for overlay. I would like to place a point along a graph without affecting the data. This is similar to the issue here: Custom vertical Value lines in Radzen Charts
The issue is that I given the X or Y of a category, I cannot easily get the interpolated line segment coordinate that corresponds with the data.
It would be great if there was a series method that given the value of 'y' it returns 'x' on a series (or vise versa). This would be a more complex version of the GetTooltipPosition method.

If I want to mark a date in time on the graph and add an annotation, I would need to place the marker along the line, but not create a line segment. Additionally, I feel like this functionality would also be useful for a marker to "follow" a line segment as a mouse moves across the chart.

Enhancement - DisplayToolTipFor method. I would like the ability to display a tooltip on the chart without the need for user interaction. I believe this helps the user understand that tooltips are available. I would expect to include the data, and the series. Currently Implemented with the following code in a derived class, not the cleanest.

public async Task ShowToolTipItem(IChartSeries series, object obj)
{
    if (IsJSRuntimeAvailable)
    {
        var ttpos = series.GetTooltipPosition(obj);
        await MouseMove(ttpos.X + MarginLeft, ttpos.Y + MarginTop);
    }
}

Originally created by @Quasmo on GitHub (Apr 17, 2025). 1. Enhancement 1 - Different styling / custom clip path I am trying to create a graph where different sections of the same graph line appear with different styling. ![Image](https://github.com/user-attachments/assets/e4b3d103-101e-44e4-a260-457277c3560d) ``` @* Term Pricing *@ <RadzenLineSeries Smooth="true" Data="@unitDetails.UnitResponseFinalTermPremiums" CategoryProperty="Term" LineType="LineType.Solid" ValueProperty="FinalPrice" TooltipTemplate="TooltipFragment" Stroke="var(--rz-base-700)" > <ChildContent> <RadzenMarkers MarkerType="MarkerType.Square" Visible="true" /> </ChildContent> </RadzenLineSeries> @* Unit Occupied Graph *@ @if (dateVacantMonth >= CurrentMonth) { <RadzenLineSeries Smooth="true" Data="@unitDetails.UnitResponseFinalTermPremiums.Where(x => CurrentMonth.AddMonths(x.Term - 1) <= unitDetails.DateVacant)" CategoryProperty="Term" LineType="LineType.Dashed" ValueProperty="FinalPrice" Stroke="var(--rz-base-300)" TooltipTemplate="TooltipFragment"> <ChildContent> <RadzenSeriesAnnotation Visible="true" Data="@unitDetails.UnitResponseFinalTermPremiums.Where(x => CurrentMonth.AddMonths(x.Term - 1) == dateVacantMonth).FirstOrDefault()" OffsetY="-20" Text="Move Out" /> <RadzenMarkers MarkerType="MarkerType.Square" Visible="true" /> </ChildContent> </RadzenLineSeries> } ``` While this does work to some degree, because of the spline generation of the graph, the graph lines do not exactly match between the last two points. I understand that this is because the spline generation does not have the future datapoint to curve the line. This is more apparent in the following image. ![Image](https://github.com/user-attachments/assets/493b84fe-e533-444f-9855-890f318dc6dc) To solve this, I wanted to extend the RadzenLineSeries class, and create a custom clip path. Unfortunately, because the Chart.Series object is set as internal, I am unable to get the index of the series to generate the css selector. Maybe this could be part of the solution for allowing null variables as part of the graph, using the clip path to hide portions of the line segments. 2. Enhancement - point value given category value. I would like to Create a Custom Annotation for overlay. I would like to place a point along a graph without affecting the data. This is similar to the issue here: [Custom vertical Value lines in Radzen Charts](https://github.com/radzenhq/radzen-blazor/issues/668) The issue is that I given the X or Y of a category, I cannot easily get the interpolated line segment coordinate that corresponds with the data. It would be great if there was a series method that given the value of 'y' it returns 'x' on a series (or vise versa). This would be a more complex version of the GetTooltipPosition method. If I want to mark a date in time on the graph and add an annotation, I would need to place the marker along the line, but not create a line segment. Additionally, I feel like this functionality would also be useful for a marker to "follow" a line segment as a mouse moves across the chart. 3. Enhancement - DisplayToolTipFor method. I would like the ability to display a tooltip on the chart without the need for user interaction. I believe this helps the user understand that tooltips are available. I would expect to include the data, and the series. Currently Implemented with the following code in a derived class, not the cleanest. ``` public async Task ShowToolTipItem(IChartSeries series, object obj) { if (IsJSRuntimeAvailable) { var ttpos = series.GetTooltipPosition(obj); await MouseMove(ttpos.X + MarginLeft, ttpos.Y + MarginTop); } } ```

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#1721