TouchedSpotIndicator duplicates when updating chart
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
https://github.com/imaNNeo/fl_chart/assets/75301212/72fc4053-b223-4c97-b779-6821ceadf15e
I'm encountering an issue where the TouchedSpotIndicator duplicates when scrolling over the Line Chart. I've implemented an update mechanism that keeps the blue line aligned with the finger's position. Is there a solution available for this bug? I've attached a brief example for reproduction purposes.
Thanks in advance!
```import 'dart:math';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const LineChartSample2(),
);
}
}
class LineChartSample2 extends StatefulWidget {
const LineChartSample2({super.key});
@override
State createState() => _LineChartSample2State();
}
class _LineChartSample2State extends State {
final originList = List.generate(300, (index) => FlSpot(index.toDouble(), Random().nextInt(1000).toDouble()));
late List testList = originList;
@override
Widget build(BuildContext context) {
return Material(
child: Align(
child: AspectRatio(
aspectRatio: 1.70,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(
getTouchLineStart: (pointData, index) => -double.infinity,
getTouchLineEnd: (_, __) => double.infinity,
getTouchedSpotIndicator: (LineChartBarData barData, List indicators) {
return indicators.map(
(int element) {
return TouchedSpotIndicatorData(const FlLine(color: Colors.red),
FlDotData(getDotPainter: (_, __, ___, ____) => FlDotCirclePainter(radius: 10)));
},
).toList();
},
touchCallback: (data, response) {
if (data is FlTapUpEvent ||
data is FlTapCancelEvent ||
data is FlLongPressEnd ||
data is FlPanEndEvent) {
setState(() {
testList = originList;
});
} else if (response?.lineBarSpots != null) {
setState(() {
final updatedSpots = [...originList];
updatedSpots.removeRange(response!.lineBarSpots!.first.spotIndex + 1, updatedSpots.length);
testList = updatedSpots;
});
}
},
),
minY: 0,
maxY: 1000,
lineBarsData: [
LineChartBarData(
color: Colors.grey,
spots: originList,
),
LineChartBarData(
spots: testList,
),
],
),
),
),
),
);
}
}
```
Contributor guide
Research direction
Start by running the supplied Dart/Flutter reproduction and inspect the LineChart touch callback alongside updates to lineBarsData. Reproduce scrolling with the changing spot list, then verify that the chart shows only one TouchedSpotIndicator rather than duplicated indicators.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100