imaNNeo / imaNNeo/fl_chart

TouchedSpotIndicator duplicates when updating chart

Open
#1,627 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.