How to Animate Chart Using Public Method in .NET MAUI Cartesian Chart?

This article describes how to dynamically animate the Cartesian Chart series using the public method.

In Syncfusion® .NET MAUI Cartesian Chart provides support to dynamically animate Cartesian Chart series using the public method. A Public method is a method that can be called by using the class object in which they are defined. The public method used to dynamically animate the Cartesian series in the chart is the AnimateSeries() method of the SfCartesianChart class.

The following steps explain how to dynamically animate the chart series using the AnimateSeries() method:

Step 1: First, configure the Syncfusion® .NET MAUI Toolkit SfCartesianChart by following the getting started documentation and specify a unique name for the SfCartesianChart.

[XAML]

<chart:SfCartesianChart x:Name="chart">
   <chart:SfCartesianChart.BindingContext>
       <model:TrophyViewModel />
   </chart:SfCartesianChart.BindingContext>
   
   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis/>
   </chart:SfCartesianChart.XAxes>

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

[C#]

SfCartesianChart chart = new SfCartesianChart();

chart.BindingContext = new TrophyViewModel();

// Initialize the primary axis as a CategoryAxis for the X-Axis
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);

// Initialize the secondary axis as a NumericalAxis for the Y-Axis
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

this.Content = chart; 

Step 2: Define any series of your choice. Here, we use a Spline Series for the chart

[XAML]

<chart:SfCartesianChart x:Name="chart" >
  ---------
  ---------
  <!-- Spline Series for the Chart -->
  <chart:SplineSeries ItemsSource="{Binding TrophyData}" 
                      XBindingPath="Country" 
                      YBindingPath="TrophyCount"/>
</chart:SfCartesianChart> 

[C#]

SfCartesianChart chart = new SfCartesianChart();

// Eliminated for simplicity

// Defines a new SplineSeries for the chart
SplineSeries series = new SplineSeries()
{
   ItemsSource = new TrophyViewModel().TrophyData,
   XBindingPath = "Country",
   YBindingPath = "TrophyCount",
};

// Adds the SplineSeries to the chart's Series collection
chart.Series.Add(series);
this.Content = chart; 

Step 3: To animate the chart series, set the EnableAnimation property to true in the SplineSeries. This triggers an animation effect when the chart is loaded.

[XAML]

<chart:SfCartesianChart x:Name="chart" >
  ---------
  ---------
  <!-- Spline Series for the Chart -->
  <chart:SplineSeries ItemsSource="{Binding TrophyData}" 
                      XBindingPath="Country" 
                      YBindingPath="TrophyCount"
                      EnableAnimation="True"/>
</chart:SfCartesianChart> 

[C#]

SfCartesianChart chart = new SfCartesianChart();

// Eliminated for simplicity

SplineSeries series = new SplineSeries()
{
    ItemsSource = new TrophyViewModel().TrophyData,
    XBindingPath = "Country",
    YBindingPath = "TrophyCount",
    EnableAnimation = true,
};

chart.Series.Add(series); 

Step 4: Place a button below the chart and call the AnimateSeries method for chart animation when the button is clicked.

[XAML]

<Grid RowDefinitions="*,Auto" Padding="10" RowSpacing="10">
           
   <!-- Cartesian Chart -->
   <chart:SfCartesianChart Grid.Row="0" x:Name="chart" >
        ----------
        ----------
   </chart:SfCartesianChart>

   <!-- Button for Animation -->
   <Button Grid.Row="1" 
           Text="Replay Animation"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           Clicked="Button_Clicked"
           BackgroundColor="#4CAF50"
           TextColor="White"
           BorderColor="#388E3C"
           BorderWidth="2"
           CornerRadius="20"
           Padding="10,5"/>
</Grid> 

In the code-behind (e.g., MainPage.xaml.cs), define the Button_Clicked event handler. The handler will call the AnimateSeries method of the chart to trigger the animation.

[C#]

public partial class MainPage : ContentPage
{
      public MainPage()
      {
          InitializeComponent();
      }

      private void Button_Clicked(object sender, EventArgs e)
      {
          // Called the AnimateSeries() method to animate the spline series
          chart.AnimateSeries();
      }
} 

Thus, when pressing the “Replay Animation” button, the spline series gets animated.

Conclusion

I hope you enjoyed learning how to animate a chart using a public method in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our 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!