Using a listbox or custom component to control which chartseries get displayed?

[Roger Marquis]

Here is a link to an example chart that I am attempting to mimic using a syncfusion chart and SfListBox.
https://ourworldindata.org/grapher/life-expectancy

I am attempting to implement something similar to the "Add/Remove Countries and Regions" side panel seen on this chart. Similar to this example chart, I have a use case where I would like to present a chart with data by region, or by potentially upwards of 150+ countries as selectable chart series to toggle in a single chart component. I understand that there is a legend component built in that is capable of toggling chart series visibility, but with such a large number of potential chart series to render, I am looking to implement a searchable, selectable list for the user to interact with.

In testing, I was unsuccessful at attempting to programmatically update which ChartSeries to render inside of a ChartSeriesCollection based on multiple selections from a SfListBox. I am looking for advice on how I can achieve a similar functionality to the example page's side panel. Is something like this possible using syncfusion's components? 

[Durga Gopalakrishnan]

Hi Roger,

Greetings from Syncfusion.

Your requirement can be fulfilled using the Chart and ListBox controls. We recommend showing or hiding chart series based on the checked or unchecked items in the ListBox by utilizing the ValueChange event. Please refer to the code snippet and sample below.

private void change(ListBoxChangeEventArgs<string[], CarItem> args)

{

     var selectedIds = args.Value ?? Array.Empty<string>();

 

     foreach (var series in SeriesCollection)

     {

         // Set visibility to true if the series corresponds to a selected ID

         series.Visible = selectedIds.Contains(series.Name.Substring(6)); // Extract the series ID from the series name

     }

}

Sample : https://blazorplayground.syncfusion.com/rjBfiVMmJJNYVNMB

Gif : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListBoxSelection-552775611.zip

UG : https://blazor.syncfusion.com/documentation/listbox/how-to/bind-change-event

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Roger Marquis]

Thanks for the quick response! I will give your recommendation a try.