How to generate dynamic Chart Series in UWP SfChart?

This sample demonstrate how to generate dynamic number of chart series by binding a ItemsSource collection directly to an SfChart.

The solution for achieving this scenario is quite easy. It can be achieved by extending the SfChart (inheriting SfChart), and providing it with the SeriesTemplate (for customizing series type and its properties) and Source properties.

Step 1: Define the chart’s Model and ViewModel setup.

Step 2: Create a custom SfChartExt class which inherits from the base SfChart. This custom class defines two key properties: Source and SeriesTemplate.

public class SfChartExt : SfChart
{
    . . .
    /// <summary>
    /// Gets or sets a collection of collections, where each inner collection represents the
    /// data for a single chart series. 
    /// </summary>
    public object Source
    {
        get { return GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    /// <summary>
    /// Gets or sets the DataTemplate used to generate each chart series.
    /// </summary>
    public DataTemplate SeriesTemplate
    {
        get { return (DataTemplate)GetValue(SeriesTemplateProperty); }
        set { SetValue(SeriesTemplateProperty, value); }
    }

    /// <summary>
    /// Gets or sets a SeriesTemplateSelector which will be used to choose a DataTemplate for each group in the source.
    /// </summary>
    public SeriesDataTemplateSelector SeriesTemplateSelector
    {
        get { return (SeriesDataTemplateSelector)GetValue(SeriesTemplateSelectorProperty); }
        set { SetValue(SeriesTemplateSelectorProperty, value); }
    }

    . . .
    
    private void GenerateSeries()
    {
        if (Source == null || (SeriesTemplateSelector == null && SeriesTemplate == null)) return;

        var groupedItemsSource = Source as IEnumerable;
        var enumerator = groupedItemsSource.GetEnumerator();

        while (enumerator.MoveNext())
        {
            ChartSeries series = null;

            // The conditions checked for setting the SeriesTemplate or SeriesTemplateSelector.
            if (SeriesTemplate != null)
            {
                series = SeriesTemplate.LoadContent() as ChartSeries;
            }
            else if (SeriesTemplateSelector != null)
            {
                var selectedseriesTemplate = SeriesTemplateSelector.SelectTemplate(enumerator.Current);
                series = selectedseriesTemplate.LoadContent() as ChartSeries;
            }

            series.DataContext = enumerator.Current;
            Series.Add(series);
        }
    }
}

The SeriesTemplate property is used to define the type and visual appearance of chart series. This template is more flexible; it allows us to define any type of series and all its properties since the content of the template is series.

<local:SfChartExt Source="{Binding AnnualPriceCollection}" >
 
<--The SeriesTemplate is defined for generating the series.-->
    <local:SfChartExt.SeriesTemplate>
          <DataTemplate>
               <chart:ColumnSeries XBindingPath="Component"     
                                   YBindingPath="Price"     
                                   ItemsSource="{Binding PriceCollection}"
                                   Label="{Binding Year}"/>
          </DataTemplate>
    </local:SfChartExt.SeriesTemplate>
 
<--Define required chart properties.-->
 
</local:SfChartExt>

Output

Troubleshooting

Path Too Long Exception

If you are facing a "Path too long" exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.

For a detailed step-by-step guide with relevant code snippets, refer to the knowledge base article How to generate dynamic Chart Series in UWP SfChart.