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

.NET MAUI Cartesian Charts provides support to add the chart inside the SfListView control. You can add the chart in the SfListView with the help of the ItemTemplate property by following below mentioned 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

In this step, we will create a SeriesViewModel class to store and manage chart data.
This class 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, we can 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

GitHub Sample

For better understanding, please refer the sample provided here

Conclusion

I hope you enjoyed learning about how to add the .NET MAUI toolkit cartesian charts in a istView.

You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Toolkit documentation to understand how to create and manipulate data.

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

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