How to get currently visible series/models in Syncfusion Blazor Chart at any given time?

[Ashish Khanal]

Hi,

I need to determine which series/models are currently visible in a Syncfusion Blazor Chart, especially after the user toggles series visibility via the legend. My requirement is to get the actual visible series at any time (e.g., for saving user selections). However, I can’t find a way to do this—SeriesList only reflects the initial state, not legend toggles. The legend click event handler also breaks default toggling behavior.

What I’ve tried:

- Using the `Visible` property on my model (`SeriesInfo.IsVisible`)—this only reflects the initial state, not legend toggles.

- Handling `OnLegendClick` to try to track visibility, but this breaks the default legend toggling (series can’t be toggled off again).

- Searching the chart API for a way to get the actual visible series/models after legend interaction, but found nothing.

What I need:

A reliable way to get the list of currently visible series/models at any time, reflecting the user’s legend toggles. This is needed for saving user selections and for other business logic.

Minimal Repro (runnable):

Check out the code to see what I've tried so far and failed. 

https://blazorplayground.syncfusion.com/rDBIiBiRmNVlhffR

Questions:

- Is there a built-in way to get the current visible series/models from the chart component?

- If not, what’s the recommended approach to track this in a Blazor/Syncfusion Chart?

This seems like a trivial feature, but I haven’t found a solution even after handful of attempts. 

Help would be greatly appreciated!

[Ashish Khanal]

Repro code (for future reference):

@using System.Collections.Generic

@using Syncfusion.Blazor.Charts

@using Syncfusion.Blazor.Buttons

<PageTitle>Syncfusion Series Visibility Repro</PageTitle>

<SfChart @ref="ChartRef">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartEvents OnLegendClick="OnChartLegendClick" />

    <ChartSeriesCollection>

        @foreach (var series in SeriesList)

        {

            <ChartSeries DataSource="@series.Data"

                         XName="Category"

                         YName="Value"

                         Name="@series.Name"

                         Fill="@series.Color"

                         Visible="@series.IsVisible"

                         Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" />

        }

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" />

</SfChart>

<div style="margin-top: 1rem;">

    <SfButton OnClick="SubmitAllSelectedModels">Submit All Selected Models</SfButton>

    <div style="margin-top: 0.5rem;">

        <ul>

            @foreach (var name in VisibleModelsToShowForTest)

            {

                <li>@name</li>

            }

        </ul>

        <div style="color: #b00; font-size: 0.95em;">

            <b>Note:</b> This list does <u>not</u> update when you toggle series in the legend.

        </div>

    </div>

    <div style="margin-top: 1rem; color: #b00;">

        <b>Legend Click Handler:</b> When you use <code>OnChartLegendClick</code>, legend toggling breaks completely.

    </div>

</div>

@code {

    // --- Data Models ---

    public class SeriesInfo

    {

        public string Name { get; set; }

        public string Color { get; set; }

        public bool IsVisible { get; set; }

        public List<DataPoint> Data { get; set; }

    }

    public class DataPoint

    {

        public string Category { get; set; }

        public double Value { get; set; }

    }

    // --- All possible models and their data ---

    private List<(string Name, string Color, List<DataPoint> Data)> AllModelsData = new()

    {

        ("Alpha", "#4472c4", new List<DataPoint> {

            new DataPoint { Category = "08/05-AM", Value = 10 },

            new DataPoint { Category = "08/05-PM", Value = 20 },

            new DataPoint { Category = "08/06-PM", Value = 30 }

        }),

        ("Beta", "#ed7d31", new List<DataPoint> {

            new DataPoint { Category = "08/05-PM", Value = 15 },

            new DataPoint { Category = "08/06-PM", Value = 25 },

            new DataPoint { Category = "08/07-AM", Value = 35 }

        }),

        ("Gamma", "#a5a5a5", new List<DataPoint> {

            new DataPoint { Category = "08/05-PM", Value = 12 },

            new DataPoint { Category = "08/06-PM", Value = 22 },

            new DataPoint { Category = "08/07-AM", Value = 32 }

        })

    };

    // --- Only these models are selected for display because those are the only ones that were selected by user and saved into Db ---

    private List<string> SelectedModels = new() { "Alpha" };

    // --- SeriesList is constructed using AllModelsData and SelectedModels ---

    private List<SeriesInfo> SeriesList => AllModelsData

        .Select(m => new SeriesInfo

        {

            Name = m.Name,

            Color = m.Color,

            Data = m.Data,

            IsVisible = SelectedModels.Contains(m.Name)

        })

        .ToList();

    private SfChart ChartRef;

    private List<string> VisibleModelsToShowForTest = new();

    // --- This method does NOT reflect legend toggles ---

    private List<string> GetVisibleModels()

    {

        // This only reflects initial state, not legend toggles!

        return new List<string>(

            SeriesList.Where(s => s.IsVisible && SelectedModels.Contains(s.Name)).Select(s => s.Name)

        );

    }

    private void SubmitAllSelectedModels()

    {

        // Get all selected models so I can do something with them like save to Db etc.

        // How to get all selected models at any given time?

        // Currently this seems impossible and it should be trivial to do it.

        VisibleModelsToShowForTest = GetVisibleModels();

    }

    // --- This handler breaks legend toggling if used ---

    // --- For example: When you click on a series, it first selects it --- but you won't be able to deselect it

    // --- But you won't be able to deselect it no matter how many times you click it ---

    void OnChartLegendClick(LegendClickEventArgs args)

    {

        var series = SeriesList.FirstOrDefault(s => s.Name == args.Series.Name);

        if (series != null)

            series.IsVisible = !args.Series.Visible;

        args.Series.Visible = !args.Series.Visible;

    }

}

[Ashish Khanal]

Run the code to see the issue. I can't make the toggle work correctly and can't get the selected models at any given time.

Also check out the screen recording

Attachment: visibleseriesbug_c1292f4e.gif

[Ashish Khanal]

Ok I figured out the solution. 

Here's the full code with the fix:

@using System.Collections.Generic

@using Syncfusion.Blazor.Charts

@using Syncfusion.Blazor.Buttons

<PageTitle>Syncfusion Series Visibility - Fixed</PageTitle>

<SfChart @ref="ChartRef">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartEvents OnLegendClick="OnChartLegendClick" />

    <ChartSeriesCollection>

        @foreach (var series in SeriesList)

        {

            <ChartSeries DataSource="@series.Data"

                         XName="Category"

                         YName="Value"

                         Name="@series.Name"

                         Fill="@series.Color"

                         Visible="@series.IsVisible"

                         Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" />

        }

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" />

</SfChart>

<div style="margin-top: 1rem;">

    <SfButton OnClick="SubmitAllSelectedModels">Submit All Selected Models</SfButton>

    <div style="margin-top: 0.5rem;">

        <strong>Currently Visible Series:</strong>

        <ul>

            @foreach (var name in VisibleModelsToShowForTest)

            {

                <li>@name</li>

            }

        </ul>

        <div style="color: #070; font-size: 0.95em;">

            <b>✓ Fixed:</b> This list now updates correctly when you toggle series in the legend!

        </div>

    </div>

</div>

@code {

    // --- Data Models ---

    public class SeriesInfo

    {

        public string Name { get; set; }

        public string Color { get; set; }

        public bool IsVisible { get; set; }

        public List<DataPoint> Data { get; set; }

    }

   

    public class DataPoint

    {

        public string Category { get; set; }

        public double Value { get; set; }

    }

   

    // --- All possible models and their data ---

    private List<(string Name, string Color, List<DataPoint> Data)> AllModelsData = new()

    {

        ("Alpha", "#4472c4", new List<DataPoint> {

            new DataPoint { Category = "08/05-AM", Value = 10 },

            new DataPoint { Category = "08/05-PM", Value = 20 },

            new DataPoint { Category = "08/06-PM", Value = 30 }

        }),

        ("Beta", "#ed7d31", new List<DataPoint> {

            new DataPoint { Category = "08/05-PM", Value = 15 },

            new DataPoint { Category = "08/06-PM", Value = 25 },

            new DataPoint { Category = "08/07-AM", Value = 35 }

        }),

        ("Gamma", "#a5a5a5", new List<DataPoint> {

            new DataPoint { Category = "08/05-PM", Value = 12 },

            new DataPoint { Category = "08/06-PM", Value = 22 },

            new DataPoint { Category = "08/07-AM", Value = 32 }

        })

    };

   

    // --- Only these models are selected for display ---

    private List<string> SelectedModels = new() { "Alpha" };

   

    private List<SeriesInfo> SeriesList;

   

    private SfChart ChartRef;

    private List<string> VisibleModelsToShowForTest = new();

   

    protected override void OnInitialized()

    {

        // Initialize SeriesList

        SeriesList = AllModelsData

            .Select(m => new SeriesInfo

            {

                Name = m.Name,

                Color = m.Color,

                Data = m.Data,

                IsVisible = SelectedModels.Contains(m.Name)

            })

            .ToList();

       

        base.OnInitialized();

    }

   

    // --- This method now correctly reflects legend toggles ---

    private List<string> GetVisibleModels()

    {

        return SeriesList

            .Where(s => s.IsVisible)

            .Select(s => s.Name)

            .ToList();

    }

   

    private void SubmitAllSelectedModels()

    {

        // Get all currently visible models

        VisibleModelsToShowForTest = GetVisibleModels();

       

        // You can now save these to DB or use them for other business logic

        // Example: await SaveToDatabase(VisibleModelsToShowForTest);

    }

   

    // --- Fixed legend click handler by simply using args.Cancel = true; ---

    void OnChartLegendClick(LegendClickEventArgs args)

    {

        args.Cancel = true;

        // Find the series in our list

        var series = SeriesList.FirstOrDefault(s => s.Name == args.Series.Name);

        if (series != null)

        {

            // Toggle the visibility in our model

            // Note: args.Series.Visible represents the CURRENT state (before toggle)

            // So we want to set IsVisible to the OPPOSITE

            series.IsVisible = !args.Series.Visible;

        }

    }

}

[Durga Gopalakrishnan]

Hi Ashish,

Thank you for the update and for sharing the complete solution. We appreciate you taking the time to investigate and resolve the issue. Your approach will be helpful for others facing a similar scenario.

Please let us know if you need any further assistance or have other questions. We’re always here to help.

Regards,

Durga Gopalakrishnan.