imaNNeo / imaNNeo/fl_chart

Animate x axis for realtime time based data.

Open
#657 10 comments 3 reactions 0 assignees View on GitHub
bug
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

I have data where the X value is a timestamp. I would like my data to animate across the graph as the time changes.

In the follow example `data` contains 60 elements each with the `timestamp` (X value) 1 second apart. Every second a new value is shifted on top and the last value is dropped.

```dart
LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [for (final node in data) FlSpot(node.timestamp.toDouble(), node.rawValue)],
)
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
reservedSize: 22,
showTitles: true,
interval: 20000,
),
),
maxX: DateTime.now().millisecondsSinceEpoch.toDouble(),
minX: DateTime.now().subtract(Duration(seconds: 60)).millisecondsSinceEpoch.toDouble(),
),
swapAnimationDuration: Duration(seconds: 1), // Data updated once every second
);
```

Every second instead of each point animating to the new position (1 second or 1000 units to the left) they animate to the value of the next node in the list. This results in an odd jumping animation instead of the desired smooth scrolling.

https://user-images.githubusercontent.com/1530025/116978716-f025e380-ac78-11eb-823d-4beb7b7f087e.mov

Contributor guide

Open the contributing guide

Research direction

Start with the LineChart configuration and animation settings shown in the issue, especially swapAnimationDuration, minX, maxX, and the timestamp-based FlSpot values. Compare the current point-to-point animation with the requested behavior; done means a realtime series scrolls smoothly as each new value arrives without the visible jumping.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.