[LineChart] Want indicator (showingIndicators) to update without rebuilding LineChartBarData every touch
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
**Description**
Hi, thank you for the great chart library!
I have a common UX requirement:
- When the user touches or drags on the LineChart, a tooltip and a highlighted indicator (dot) should follow the finger.
- When the user lifts their finger, the tooltip and indicator should remain at the last touched position, until the next touch.
**What I tried**
- I use the latest fl_chart version.
- I use showingTooltipIndicators in LineChartData to keep the tooltip visible, and it works as expected.
- For the indicator (dot), since showingIndicators is only available in LineChartBarData, I have to rebuild the entire LineChartBarData (and thus the whole lineList) every time the touch index changes, just to update the indicator.
**Problem**
- This causes performance issues, especially with large datasets, because I have to call my updateLineList() method (which rebuilds all spots and lines) on every touch move event.
- If I only call setState() and update the _lastTouchedIndex, the indicator does not move with the finger, because showingIndicators is "frozen" in the old LineChartBarData.
- In previous versions, there was a showingIndicators property in LineChartData, but now it only exists in LineChartBarData.
**My question / feature request**
- Is there a way to update the indicator (dot) position on touch without having to rebuild the entire LineChartBarData?
- Or, could you consider supporting showingIndicators at the LineChartData level again, so that indicator and tooltip can both be controlled at the same level, and follow the touch index smoothly?
- Or, is there a recommended pattern for this use case with the current API?
**Example code**
```
// In my touchCallback:
touchCallback: (FlTouchEvent event, LineTouchResponse? lineTouch) {
if (lineTouch != null &&
lineTouch.lineBarSpots != null &&
lineTouch.lineBarSpots!.isNotEmpty) {
_lastTouchedIndex = lineTouch.lineBarSpots!.first.spotIndex;
updateLineList(); // This is expensive!
setState(() {});
}
},
// In LineChartBarData:
LineChartBarData(
showingIndicators: _lastTouchedIndex != null ? [_lastTouchedIndex!] : [],
spots: spot,
// ...
),
// In LineChartData:
showingTooltipIndicators: _lastTouchedIndex != null
? [
ShowingTooltipIndicators([
LineBarSpot(
lineList[0],
0,
lineList[0].spots[_lastTouchedIndex!],
)
])
]
: [],
```
**Thank you!**
Contributor guide
Research direction
Start with the touchCallback example and compare the roles of LineChartData.showingTooltipIndicators and LineChartBarData.showingIndicators. Determine the API behavior needed for the indicator to follow touch updates without rebuilding the full line data; done means the indicator can remain at the last touched position and update smoothly on the next touch.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100