Some lines in bar chart slide to the right, others move vertically

[TimeLord2010]

I'm creating a timeline style of graph using line chart where I update the data based on time every x amount of seconds. The issue is that some lines slide to the right, as expected, but other simply move vertically.

Reproduce

  List<LineChartBarData> _getDatas(WidgetRef ref) {
    List<LineChartBarData> datas = [];
    for (final host in hosts) {
      var provider = ref.watch(pingListProvider(host));
      List<FlSpot> points = provider.points;
      var data = LineChartBarData(
        spots: points,
        isStepLineChart: true,
        show: points.isNotEmpty,
        color: CustomColors.fromString(provider.host),
        dotData: FlDotData(
          show: false,
        ),
      );
      datas.add(data);
    }
    return datas;
  }

Video
Video

To Reproduce
Repository

• Chart generation code:

LineChart(
            swapAnimationCurve: Curves.easeInOut,
            swapAnimationDuration: const Duration(milliseconds: 250),
            LineChartData(
              minY: minPing == null ? 0 : minPing - 5,
              maxY: maxPing == null ? 0 : maxPing * 1.05,
              gridData: FlGridData(
                horizontalInterval: 25,
                verticalInterval: 5, // 5 seconds
              ),
              titlesData: _getTitlesData(),
              lineBarsData: _getDatas(ref),
              borderData: FlBorderData(
                show: false,
                border: Border.all(
                  color: Colors.grey.shade200,
                ),
              ),
            )

Notes
Strangely, the lines that are above 100 all move vertically, and the lines below 100 slide.

Versions

• Flutter 3.16.4
• fl_chart: ^0.62.0

[imaNNeo]

It is because of an animation that we have inside the chart.
So when a list changes and the lengths is the same, we lerp through all the elements and animate them. So in this case we should not do that.
For now, you can disable the animations by setting zero in the swapAnimationDuration.

If you or someone else want to work on it, this is a good starting point:

fl_chart/lib/src/utils/lerp.dart

Lines 6 to 24 in d116601

	@visibleForTesting
	List<T>? lerpList<T>(
	List<T>? a,
	List<T>? b,
	double t, {
	required T Function(T, T, double) lerp,
	}) {
	if (a != null && b != null && a.length == b.length) {
	return List.generate(a.length, (i) {
	return lerp(a[i], b[i], t);
	});
	} else if (a != null && b != null) {
	return List.generate(b.length, (i) {
	return lerp(i >= a.length ? b[i] : a[i], b[i], t);
	});
	} else {
	return b;
	}
	}