How to load a Chart control into a .NET MAUI Carousel?

This section explains how to load the Chart control into .NET MAUI Carousel.

Step 1: Define ItemTemplate for the Chart control in XAML.
Add ItemTemplate as a Chart control before creating the Carousel control.

XAML

  <ContentPage.Resources>
      <ResourceDictionary>
          <DataTemplate x:Key="itemTemplate">             
              <chart:SfCartesianChart>
                  <chart:SfCartesianChart.XAxes>
                      <chart:CategoryAxis>
                          <chart:CategoryAxis.Title>
                              <chart:ChartAxisTitle Text="Name"></chart:ChartAxisTitle>
                          </chart:CategoryAxis.Title>
                      </chart:CategoryAxis>
                  </chart:SfCartesianChart.XAxes>
                  <chart:SfCartesianChart.YAxes>
                      <chart:NumericalAxis>
                          <chart:NumericalAxis.Title>
                              <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
                          </chart:NumericalAxis.Title>
                      </chart:NumericalAxis>
                  </chart:SfCartesianChart.YAxes>                   
                      <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
                      </chart:ColumnSeries>                   
              </chart:SfCartesianChart>
          </DataTemplate>
      </ResourceDictionary>
  </ContentPage.Resources> 

Step 2: Define Carousel and bind ItemTemplate.
XAML

     <carousel:SfCarousel x:Name="sfCarousel" 
                          ItemsSource="{Binding ImageCollection}"  
                          ItemTemplate="{StaticResource itemTemplate}"/>

Step 3: Initialize Carousel in the code-behind (C#).
C#

   namespace Carousel 
   {
    public partial class MainPage : ContentPage {
        public MainPage() 
        {
            InitializeComponent();
            sfCarousel.BindingContext = new CarouselViewModel();
        }
        public class CarouselViewModel 
        {
            public CarouselViewModel() 
            {
                ImageCollection.Add(new CarouselModel());
                ImageCollection.Add(new CarouselModel());
                ImageCollection.Add(new CarouselModel());
                ImageCollection.Add(new CarouselModel());
                ImageCollection.Add(new CarouselModel());
            }
            private List<CarouselModel> imageCollection = new List<CarouselModel>();
            public List<CarouselModel> ImageCollection {
                get { return imageCollection; }
                set { imageCollection = value; }
            }
        }
        public class CarouselModel 
        {
            public List<Person> Data { get; set; }

            public CarouselModel(){
                Data = new List<Person>(){
                new Person { Name = "David", Height = 180 },
                new Person { Name = "Michael", Height = 170 },
                new Person { Name = "Steve", Height = 160 },
                new Person { Name = "Joel", Height = 182 }
                };
             }
        }
        public class Person {
            public string Name { get; set; }
            public double Height { get; set; }
        }
    }
}

Output

Download the complete sample from GitHub

Conclusion
I hope you enjoyed learning how to load the Chart control into .NET MAUI Carousel.

You can refer to our .NET MAUI Carousel feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Carousel documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components.

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, or the feedback portal. We are always happy to assist you!