Animation behaviour when updating Cartesian chart

[shaddeen]

Bug description

I've implemented a line/area chart with a time range selector that updates the data source accordingly. I've noticed an undesirable animation effect when the number of data points increases; the transition between the old and new states appears jarring.

When the number of data points remains the same or decreases, the update is handled smoothly.

Is there a configuration option to control this behaviour, or is this a known issue?

flutter: 3.29.0
syncfusion_flutter_charts: 29.1.41

Platform: iOS 18.3 (Simulator)

Steps to reproduce

1. Create a SfCartesianChart with a LineSeries.
2. Bind the chart to a data source that can be changed.
3. Implement a mechanism to update the data source.
4. Update the data source whereby the number of data points increases compared to the current data.
5. Observe the transition animation—notice the abrupt or undesirable behaviour.

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class ChartLData {
  ChartLData(this.x, this.y);
  final int x;
  final int y;
}

class TestLineChart extends StatefulWidget {
  const TestLineChart({super.key});

  @override
  _TestLineChartState createState() => _TestLineChartState();
}

class _TestLineChartState extends State<TestLineChart> {
  final List<ChartLData> _data = [ChartLData(0, 10), ChartLData(1, 20), ChartLData(2, 30)];

  void _add100DataPoints() {
    setState(() {
      final int currentLength = _data.length;
      for (int i = 0; i < 100; i++) {
        _data.add(ChartLData(currentLength + i, ((currentLength + i) * 7) % 100));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfCartesianChart(
          series: <LineSeries<ChartLData, int>>[
            LineSeries<ChartLData, int>(
              dataSource: _data,
              xValueMapper: (ChartLData data, _) => data.x,
              yValueMapper: (ChartLData data, _) => data.y,
              animationDuration: 1000, // still animates, but behavior becomes abrupt
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: ElevatedButton(
            onPressed: _add100DataPoints,
            child: const Text('Add 100 Data Points'),
          ),
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2025-05-13.at.13.59.53.mov

Stack Traces

Stack Traces

N/A

On which target platforms have you observed this bug?

iOS

Flutter Doctor output

Doctor output

N/A

[Mugunthan-Ramalingam]

Hi @shaddeen,

We would like to explain the current animation behavior in our chart. Currently, only a single data point is supported for animation in line-type and continuous-type series. Even when multiple data points are added, only the last newly added data point animates. The rest of the newly added data points (except the last one) are rendered instantly without smooth transitions, causing the update to appear abrupt and jarring. This was done on purpose to avoid performance issues during frequent or large updates.

UG Link: Series customization in Flutter Cartesian Charts widget | Syncfusion

To achieve smooth animation for all newly added data points, we recommend using a timer-based approach as a workaround. By introducing a delay and adding data points one at a time, you can allow each point to animate sequentially. Make sure the timer duration is set longer than the chart’s animationDuration to ensure that each animation completes before the next point is added. If the delay is too short, the animation overlap may still result in abrupt transitions.

Code Snippet:

 Timer? _timer;
 int _counter = 0;

  void _addTwoDataPoints() {
   _counter = 0;
   _timer?.cancel();
   _timer = Timer.periodic(const Duration(milliseconds:1050), (timer) {
     if (_counter >= 10) {
       timer.cancel();
       return;
     }

     setState(() {
       final int currentLength = _data.length;
       _data.add(ChartLData(currentLength, Random().nextInt(100)));
     });
     _counter++;
   });
 }

 
 @override
 Widget build(BuildContext context) {
   return Column(
     children: [
       Expanded(
         child: SfCartesianChart(
           series: <LineSeries<ChartLData, int>>[
             LineSeries<ChartLData, int>(
               dataSource: _data,
               xValueMapper: (ChartLData data, _) => data.x,
               yValueMapper: (ChartLData data, _) => data.y,
               animationDuration: 1000, 
             ),
           ],
         ),
       ),

Output:

sample: gh2351.zip

At present, we don’t have built-in support to animate all newly added points simultaneously. However, we have logged this requirement as a feature improvement in our feedback portal.

We prioritize features for upcoming releases based on overall demand and impact. This enhancement will be considered for implementation in a future release. You can also track the status of the feature with the feedback below.

FR Link: Enhance Animation for Dynamically Added Data Points in SfCartesianChart in Flutter | Feedback Portal

Regards,
Mugunthan.

[shaddeen]

Thanks for the workaround!

[Saravanan-Madhesh]

Please reopen this ticket, if you need further assistance with this.