How to animate the chart series dynamically using the public method in .NET MAUI Cartesian Chart?

In this article, we described how to animate the cartesian chart series dynamically using the public method.

In Syncfusion .NET MAUI Toolkit 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 where 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, let’s configure the Syncfusion .NET MAUI ToolKit SfCartesian Chart using this getting started documentation as follows and specify a unique name for the sfcartesian chart.

[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: Then, define any series as per your wish. Here, we have defined 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, you will set the EnableAnimation property to true in the SplineSeries. This will trigger 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: In this step, we will place the 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> 

Now, in the code-behind (e.g., MainPage.xaml.cs), you will 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 about how to animate the cartesian chart series dynamically using the public method.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our 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 below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!