How to create an animated Chart (SfCartesianChart) in .NET MAUI?

The .NET MAUI Cartesian Chart can animate seamlessly in two ways: when you first load the chart or when you redraw it after changing the data collection. This section provides insights into both methods of animating the chart control.

Steps for Animating a Chart Upon Loading

To smoothly animate the chart upon loading, set the EnableAnimation property to True.

XAML:

<chart:SfCartesianChart>
. . .

 <chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data1}" XBindingPath="Month" YBindingPath="Value" EnableAnimation="True">
 </chart:ColumnSeries>

</chart:SfCartesianChart>

Output:

Steps for Dynamically Animating the Chart

The SfCartesianChart provides seamless animation when dynamically changing data points. Follow these steps to achieve dynamic animation in the .NET MAUI Cartesian Chart:

Step 1: Initialize and arrange the grid layout according to the desired view.

XAML:

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="50"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
</Grid>

Step 2: Configure the Syncfusion® .NET MAUI Cartesian Chart control using this documentation and enable series animation.

Step 3: Add the button to the layout.

XAML:

<Grid>

<Button Grid.Row="0" Text="Add Data Point" Clicked="Animation_Clicked"/>

<chart:SfCartesianChart Grid.Row="1">
. . .

<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data1}" XBindingPath="Month" YBindingPath="Value" EnableAnimation="True"/>

</chart:SfCartesianChart>

</Grid>

Step 4: Change the ItemsSource collection in the button-clicked event.

C#

private void Animation_Clicked(object sender, EventArgs e)
{
    series.ItemsSource = viewModel.Data2;    
} 

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to create an animated chart using .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart 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. We are always happy to assist you!