How to Add the .NET MAUI Toolkit Cartesian Charts in a ListView?

The .NET MAUI Cartesian Charts can be added inside the SfListView control. By using the ItemTemplate property, you can incorporate charts into the list view by following these steps:

Step 1

Let’s define the Model class holds the XValue and YValue properties to generate the chart data points.

C#

public class Model
{
    public string XValue { get; set; }

    public double YValue { get; set; }
    
    public Model(string x, double y)
    {
        XValue = x;
        YValue = y;
    }
}

Step 2

The SeriesViewModel class stores and manages chart data. It contains:

• Data1 - Stores monthly data.
• Data2 - Contains categories of engineering fields.
• Data3 - Holds car brand data.
• ChartTitle - Sets the chart title.

C#

public class SeriesViewModel
{
    public ObservableCollection<Model> Data1 { get; set; }

    public ObservableCollection<Model> Data2 { get; set; }

    public ObservableCollection<Model> Data3 { get; set; }

    public string? ChartTitle { get; set; }

    public ChartSeriesCollection? Series { get; set; }
    
    public SeriesViewModel()
    {
        Data1 = new ObservableCollection<Model>();
        Data2 = new ObservableCollection<Model>();
        Data3 = new ObservableCollection<Model>();

        Data1.Add(new Model("Jan", 10));
        Data1.Add(new Model("Feb", 15));
        Data1.Add(new Model("Mar", 20));
        Data1.Add(new Model("Apr", 15));
        Data1.Add(new Model("May", 10));

        Data2.Add(new Model("EEE", 20));
        Data2.Add(new Model("CSE", 35));
        Data2.Add(new Model("ECE", 10));
        Data2.Add(new Model("Civil", 25));
        Data2.Add(new Model("IT", 14));

        Data3.Add(new Model("Benz", 13));
        Data3.Add(new Model("Audi", 18));
        Data3.Add(new Model("Volvo", 29));
        Data3.Add(new Model("BMW", 17));
        Data3.Add(new Model("Jaguar", 19));
    }
}

Step 3

To bind data to the SfListView, we need to create a ViewModel class responsible for binding the necessary data. This can be accomplished using the following code snippet.

C#

public class ViewModel
{
    public ObservableCollection<SeriesViewModel> SeriesItems { get; set; }

    public ViewModel()
    {
        SeriesItems = new ObservableCollection<SeriesViewModel>();
        SeriesViewModel model = new SeriesViewModel();       

        SeriesItems.Add(new SeriesViewModel()
        {
            ChartTitle = "Column Chart",
            Series = new ChartSeriesCollection()
            { 
                new ColumnSeries()
                {
                    ItemsSource=model.Data2,
                    XBindingPath="XValue",
                    YBindingPath="YValue"
                } 
             },
        });

        SeriesItems.Add(new SeriesViewModel()
        {
            ChartTitle = "Line Chart",
            Series = new ChartSeriesCollection()
            { 
                new LineSeries()
                {
                    ItemsSource=model.Data3,
                    XBindingPath="XValue",
                    YBindingPath="YValue"
                } 
             },
        });

        SeriesItems.Add(new SeriesViewModel()
        {
            ChartTitle = "Spline Chart",
            Series = new ChartSeriesCollection()
            { 
                new SplineSeries()
                {
                    ItemsSource=model.Data1,
                    XBindingPath="XValue",
                    YBindingPath="YValue"
                } 
             },
        });
    }
}

Step 4

By declaring the SfListView and binding its properties from the ViewModel class, incorporate the chart control into the SfListView.

To achieve this, refer to the following code example.

XAML

<list:SfListView x:Name="sfListView" ItemsSource="{Binding SeriesItems}" ItemSize="210" >
   <list:SfListView.ItemTemplate>
       <DataTemplate>
           <ViewCell>
               <chart:SfCartesianChart x:Name="chart" Series="{Binding Series}">

                   <chart:SfCartesianChart.Title>
                       <Label Text="{Binding ChartTitle}" HorizontalOptions="Center" FontAttributes="Bold"></Label>
                   </chart:SfCartesianChart.Title>

                   <chart:SfCartesianChart.XAxes>
                       <chart:CategoryAxis></chart:CategoryAxis>
                   </chart:SfCartesianChart.XAxes>

                   <chart:SfCartesianChart.YAxes>
                       <chart:NumericalAxis></chart:NumericalAxis>
                   </chart:SfCartesianChart.YAxes>

               </chart:SfCartesianChart>
           </ViewCell>
       </DataTemplate>
   </list:SfListView.ItemTemplate>

</list:SfListView>

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to add the .NET MAUI Cartesian Charts in a ListView.
You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!