BarChart: Animating tooltips together with bars

[hnnngwdlch]

Hi,

I have a question related to the animation of the tooltips. Is there a way to animate the tooltips of the bar chart, so that

• They move together with the bars in vertical direction
• Each tooltip number is incremented/decremented to its new value

Currently, in my simple example bar chart the tooltip seems to be jumping to its new position without any animation:

Barchart_Tooltip_Animation.mov

Based on the video posted here, it seems that this is/was possible.

Code:

import 'dart:async';
import 'dart:math';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class BarChartSample extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => BarChartSampleState();
}

class BarChartSampleState extends State<BarChartSample> {
  final Duration animDuration = const Duration(milliseconds: 700);
  final Duration animDurationTimer = const Duration(milliseconds: 800);
  List<SampleChartData> _data;
  Timer _timer;
  int _counter = 0;

  @override
  void initState() {
    _timer = Timer.periodic(animDurationTimer, (timer) {
      if (_counter >= 5) {
        timer.cancel();
      }
      _counter++;
      setState(() {
        _data = createData();
      });
    });
    _data = createData();
    super.initState();
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  List<SampleChartData> createData() {
    final random = new Random();
    final dataTmp = <SampleChartData>[];
    for (var i = 0; i <= 12; i++) {
      dataTmp.add(SampleChartData(i, random.nextDouble() * 100));
    }
    return dataTmp;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(20),
      child: BarChart(
        mainBarData(),
        swapAnimationDuration: animDuration,
      ),
    );
  }

  BarChartGroupData makeGroupData(
    int x,
    double y, {
    Color barColor = Colors.blue,
  }) {
    return BarChartGroupData(
      x: x,
      barRods: [
        BarChartRodData(
          y: y,
          colors: [barColor],
          borderRadius: const BorderRadius.all(Radius.zero),
        ),
      ],
      showingTooltipIndicators: [0],
    );
  }

  List<BarChartGroupData> showingGroups() {
    final barChartGroupDataList = <BarChartGroupData>[];
    for (var i = 0; i < _data.length; i++) {
      final barChartGroupData = makeGroupData(_data[i].x, _data[i].y);
      barChartGroupDataList.add(barChartGroupData);
    }
    return barChartGroupDataList;
  }

  BarChartData mainBarData() {
    return BarChartData(
      barTouchData: BarTouchData(
        touchTooltipData: BarTouchTooltipData(
          tooltipBgColor: Colors.transparent,
          getTooltipItem: (
            BarChartGroupData group,
            int groupIndex,
            BarChartRodData rod,
            int rodIndex,
          ) {
            return BarTooltipItem(
              rod.y.round().toString(),
              const TextStyle(
                color: Colors.black,
              ),
            );
          },
        ),
      ),
      titlesData: FlTitlesData(
        show: true,
        leftTitles: SideTitles(
          showTitles: true,
          interval: 3,
          reservedSize: 20,
        ),
      ),
      barGroups: showingGroups(),
    );
  }
}

class SampleChartData {
  final int x;
  final double y;

  SampleChartData(this.x, this.y);
}

I am using version ^0.36.1..

Thanks!

[imaNNeo]

Hi. there is a duplicate issue here #647
Please post your video there and don't forget to thumbs up.