imaNNeo / imaNNeo/fl_chart

LineChartData is not drawing the line chart properly if the list it too long.

Open
#1,342 4 comments 1 reaction 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

** Don't make a duplicate issue.
You can search in issues to make sure there isn't any already opened issue with your concern.

**Describe the bug**
I'm working on Mac, with ios simulator.
When the [spots] list becomes too big, it doesn't draw the part of the line chart.

I have tried running on chrome and android, and it worked well.

If the [show] option in [FlDotData] is true, the dots are drawn well. (but not the line)

I'm not sure what the maximum range would work for, since when the y coordinate was a random number of about 7 to 12, the problem occurred from 4500, but when the y coordinate was (almost) constant, the line was visible up to about 16000.

I think it's just not showing the rest of the line since i can touch and see the tooltip.

**To Reproduce**
```dart
import 'package:collection/collection.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
return runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
// decoration: BoxDecoration(border: Border.all(width: 1)),
padding: const EdgeInsets.symmetric(horizontal: 10),
margin: const EdgeInsets.all(30),
child: SizedBox(
height: 200,
child: LineChart(
LineChartData(
maxY: 25,
lineBarsData: [
LineChartBarData(
spots: List.generate(50000, (i) => null)
.mapIndexed(
(i, e) => FlSpot(i + 1, i >= 15000 ? 20 : 1))
.toList(),
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: List.generate(50000, (i) => null)
.mapIndexed(
(i, e) => FlSpot(i + 1, i >= 40000 ? 20 : 1))
.toList(),
dotData: FlDotData(
show: false,
),
),
],
),
),
),
),
],
),
),
),
),
);
}
```

**Screenshots**
on ios:
![image](https://github.com/imaNNeo/fl_chart/assets/93118583/af541287-7463-48aa-806a-bf8af3d15a61)

on android:
![image](https://github.com/imaNNeo/fl_chart/assets/93118583/7266a44a-c509-4b78-a24d-902e9640c298)

**Versions**
- which version of the Flutter are you using?
- Flutter 3.10.1
- which version of the FlChart are you using?
- fl_chart: ^0.62.0

Contributor guide

Open the contributing guide

Research direction

Start by running the supplied Flutter reproduction with 50,000 spots on the iOS simulator and compare it with Android and Chrome. Trace the line rendering path for large spot lists; the issue is done when the complete line renders on iOS while dots and tooltips continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
data-visualization, mobile-dev
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.