How to animate in the bars when the chart is first shown?

[JacobWrenn]

I would like the bars to start at zero and then animate into their actual positions for the initial set of data.

Please see this example of what I would like to achieve:

[imaNNeo]

Hi there, I like this feature, and we will implement an initial animation for all of the charts ASAP. Thanks for reporting, and stay tuned!

[JacobWrenn]

Thanks!

[JagandeepBrar]

Would love this feature myself as well! For React web applications I used Recharts, which have some really nice intro animations: http://recharts.org/en-US/api

[akshaybhange]

Hi Team, any date decided for adding this to library ?

[jamesnicholls04]

I second/third/fourth this!

Inspiration: https://dribbble.com/shots/1873362-Squadlance-Concept/attachments/328342

That the actual value animates with the line graph is really cool - I wonder whether this could be part of the solution?

Incredible work! Love this library 👍

[MitchSRobinson]

Yep, jumping on the bandwagon! This would be awesome

[con-cis]

You can do this with Staggered Animations: https://flutter.dev/docs/development/ui/animations/staggered-animations

[rashidkhaleefa]

Any update regarding this feature?

[maxpelna]

You can do this with Staggered Animations: https://flutter.dev/docs/development/ui/animations/staggered-animations

Thank you!

[hpiu]

is there any update regarding this? or is it still Staggered animation that is the way to go? thx for good library btw :)

[jay11125]

You can do this with Staggered Animations: https://flutter.dev/docs/development/ui/animations/staggered-animations

Can you please share your code? I am new to flutter animations and unable to figure how to use staggered animations to achieve this.

[millie-molly]

any updates?

[kyeshmz]

To my understanding, you would have to tween to each coordinate and update each frame, highly opinionated with riverpod and flutter hooks, but this is the code.

  final animationController = useAnimationController(
      duration: const Duration(milliseconds: 400),
    );
    useAnimation(animationController);

    List<ItemGraphModel> initialAnimation(List<ItemGraphModel> data) {
      final animatedData = <ItemGraphModel>[];
      for (var i = 0; i < data.length; i++) {
        final tween = Tween<double>(
          begin: 0,
          end: data[i].num.toDouble(),
        )
            .chain(
              CurveTween(
                curve: Curves.easeOutCubic,
              ),
            )
            .animate(animationController);
        animatedData.add(data[i].copyWith(num: tween.value.toInt()));
      }
      return animatedData;
    }

    useAsyncEffect(
      () async {
        await Future.delayed(const Duration(milliseconds: 200), () {
          ref.read(itemGraphStateProvider.notifier).setType(ItemGraphType.ONE_WEEK);

          final data = [
            ItemGraphModel(num: 108, date: DateTime(2023, 7, 24, 1, 1, 1)),
            ItemGraphModel(num: 153, date: DateTime(2023, 7, 25, 1, 1, 1)),
            ItemGraphModel(num: 120, date: DateTime(2023, 7, 26, 1, 1, 1)),
            ItemGraphModel(num: 104, date: DateTime(2023, 7, 27, 1, 1, 1)),
            ItemGraphModel(num: 155, date: DateTime(2023, 7, 28, 1, 1, 1)),
            ItemGraphModel(num: 173, date: DateTime(2023, 7, 29, 1, 1, 1)),
            ItemGraphModel(num: 186, date: DateTime(2023, 7, 30, 1, 1, 1))
          ];
          final animatedData = initialAnimation(data);
          ref.read(itemGraphStateProvider.notifier).setData(animatedData);

          animationController
            ..forward(from: 0)
            ..addListener(() {
              final animatedData = initialAnimation(data);

              ref.read(itemGraphStateProvider.notifier).setData(animatedData);
            });
        });
        return null;
      },
      [],
    );
    ```

[Dartek12]

Hello folks, I gave it a go in this PR (implemented starting animation for line/bar/radar chart). I have included a gif animation for the bar chart to show how it animates from zeroed values to the initially provided ones. https://github.com/imaNNeo/fl_chart/pull/1445

[jebstern]

Any progress on this? There's an open PR

[sobriver]

mark