Markers cannot be dynamically turned off for Radzen Line Chart #1029

Open
opened 2026-01-29 17:47:59 +00:00 by claunia · 2 comments
Owner

Originally created by @isak1080 on GitHub (Oct 31, 2023).

Describe the bug
I have a radzen line chart with multiple line series. Some of these have markers and some don't. I also have buttons in the UI that show/hide these lines at the user's will.

As long as I don't use markers I don't have a problem, but as soon as one of the series have markers the rendering of the charts gets "weird". I'm not 100% sure what happens, but it seems that it applies markers to all line series (even though they don't have them - I've debugged and verified I don't output marker in the razor).

To Reproduce
I was able to modify the sample over at https://blazor.radzen.com/line-chart to show what I think is the same issue.
Here is the full sample, just paste it to the demo page: radzen-markers-bug.razor.txt

It adds a checkbox:

<RadzenCheckBox @bind-Value=@showMarkers2019 Name="markers"></RadzenCheckBox>
<RadzenLabel Text="Show 2019 Markers" For="markers" />

and uses the boolean to show/hide the markers:

<RadzenLineSeries Smooth="@smooth" Data="@revenue2019" CategoryProperty="Date" Title="2019" LineType="LineType.Dashed" ValueProperty="Revenue">                    
    @if (showMarkers2019)
    {
        <RadzenMarkers MarkerType="MarkerType.Square" />
    }
    <RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>

If the value of showMarkers2019 is false at start, checking the checkbox will trigger a refresh and markers will appear. They won't go away by unchecking. If the value starts true, the markers appear but cannot be turned off.

Expected behavior
Markers appear and disappear with the toggle of the checkbox

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Edge, [e.g. chrome, safari]
  • Version: All I've tried in the last 6 months
Originally created by @isak1080 on GitHub (Oct 31, 2023). **Describe the bug** I have a radzen line chart with multiple line series. Some of these have markers and some don't. I also have buttons in the UI that show/hide these lines at the user's will. As long as I don't use markers I don't have a problem, but as soon as one of the series have markers the rendering of the charts gets "weird". I'm not 100% sure what happens, but it seems that it applies markers to all line series (even though they don't have them - I've debugged and verified I don't output marker in the razor). **To Reproduce** I was able to modify the sample over at https://blazor.radzen.com/line-chart to show what I think is the same issue. Here is the full sample, just paste it to the demo page: [radzen-markers-bug.razor.txt](https://github.com/radzenhq/radzen-blazor/files/13214459/radzen-markers-bug.razor.txt) It adds a checkbox: ``` <RadzenCheckBox @bind-Value=@showMarkers2019 Name="markers"></RadzenCheckBox> <RadzenLabel Text="Show 2019 Markers" For="markers" /> ``` and uses the boolean to show/hide the markers: ``` <RadzenLineSeries Smooth="@smooth" Data="@revenue2019" CategoryProperty="Date" Title="2019" LineType="LineType.Dashed" ValueProperty="Revenue"> @if (showMarkers2019) { <RadzenMarkers MarkerType="MarkerType.Square" /> } <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenLineSeries> ``` If the value of `showMarkers2019` is false at start, checking the checkbox will trigger a refresh and markers will appear. They won't go away by unchecking. If the value starts `true`, the markers appear but cannot be turned off. **Expected behavior** Markers appear and disappear with the toggle of the checkbox **Screenshots** ![image](https://github.com/radzenhq/radzen-blazor/assets/105219900/ac00d4a9-ded9-4d9c-8b5c-a132626dac21) **Desktop (please complete the following information):** - OS: Windows 11 - Browser: Edge, [e.g. chrome, safari] - Version: All I've tried in the last 6 months
Author
Owner

@akorchev commented on GitHub (Oct 31, 2023):

Hi @isak1080,

Indeed this won't work at the moment. You can try setting the MarkerType to None instead:

<RadzenMarkers MarkerType="@(showMarkers2019  ? MarkerType.Square : MarkerType.None)" />
@akorchev commented on GitHub (Oct 31, 2023): Hi @isak1080, Indeed this won't work at the moment. You can try setting the MarkerType to None instead: ``` <RadzenMarkers MarkerType="@(showMarkers2019 ? MarkerType.Square : MarkerType.None)" /> ```
Author
Owner

@isak1080 commented on GitHub (Oct 31, 2023):

Thanks. This does indeed work around the problem for now.

The only problem is that it will bloat the output by producing tons of empty <g class="rz-marker"> tags in the SVG. Once for every data point (I have hundreds of them in each line)

@isak1080 commented on GitHub (Oct 31, 2023): Thanks. This does indeed work around the problem for now. The only problem is that it will bloat the output by producing tons of empty `<g class="rz-marker">` tags in the SVG. Once for every data point (I have hundreds of them in each line)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1029