How to create an animated chart using SfCartesianChart in .NET MAUI?

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

Steps for Animating a Chart Upon Loading

We can smoothly animate the chart at loading by setting the EnableAnimation property to True.

<chart:SfCartesianChart>
. . .

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

</chart:SfCartesianChart>

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.

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

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

Step 3: Add the button to the layout.

<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.

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

Output:

Troubleshooting

Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

For more details, refer to the KB on how to create an animated chart (SfCartesianChart) in .NET MAUI