imaNNeo / imaNNeo/fl_chart

Add range selection to line chart

Open
#131 2 comments 0 reactions 0 assignees View on GitHub
enhancement Line Chart
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

It would be an amazing option to be able to select a range in a line chart

![ezgif-4-97bb98f3ddde](https://user-images.githubusercontent.com/19904063/70539545-26366500-1b64-11ea-8a5f-1fec74fcb0f1.gif)

I have implemented it like this now:
```dart
touchCallback: (LineTouchResponse touchResponse) {
if (touchResponse.lineBarSpots.first.x != minX) {
setState(() {
startRange = 1.0 * touchResponse.lineBarSpots.first.x;
endRange = startRange + 1;
});
}
},
```

And change the gradient colors stops relative to startRange and endRange.

The only problem I have now is that the spot is at the left border of the range, so the touchSpotThreshold it is not relative to the center of the range so the touch is displaced.
I need to put the spot in the borders and not in the centers so I can add vertical border lines to the selected range

Contributor guide

Open the contributing guide

Research direction

No files or tests are named; start from the line chart's touchCallback and the supplied range-selection experiment, then inspect the existing touch-spot and gradient behavior. Done means a user can select a range with border-aligned spots or vertical boundaries and touch handling that is not displaced.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
data-visualization, frontend
Issue type
Feature
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.