search

imaNNeo / fl_chart

FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
https://flchart.dev
MIT License
6.87k stars 1.78k forks source link

Thorny LineChart #1625

Closed normidar closed 5 days ago

normidar commented 7 months ago

Don't make a duplicate issue. Okey

Describe the bug Line LineChart is thorny.

To Reproduce To show sensors data on Line Chart.(33 fps & show 100 data in LineChart)

Screenshots

https://github.com/imaNNeo/fl_chart/assets/36730656/13b1d7cc-e922-4b53-90bd-913938fa8ee5

Versions

eloayoubi commented 7 months ago

grafik We got the same Issue since the Flutter 3.19.4 Update - fl_chart: 0.67.0

ManuelRauber commented 7 months ago

I can confirm this behavior as well. Same version as @eloayoubi running on an iOS device.

e4ky commented 7 months ago

try this: #1618 to disable linechart's default animation.

eloayoubi commented 7 months ago

try this: #1618 to disable linechart's default animation.

I have tried the suggestion to disable the animation for the Linechart with Duration.zero

It did not fix this issue.

As Workaround i have now set the LineChartBarData flag "isCurved" to true. It looks better than the current broken Chart. But it would be nice to have a fix for the thorny Line Problem.

luisbelo91 commented 6 months ago

same issue since the Flutter 3.19.x update - fl_chart: 0.55.2 - only reproducible on iOS

hngouveia01 commented 6 months ago

It seems to be related with Impeller renderer at Flutter version 3.19.x Looks like it is fixed in Flutter version 3.22 As a workaround you could try to disable the Impeller engine by following this documentation:

https://docs.flutter.dev/perf/impeller#:~:text=Flutter%20enables%20Impeller%20by%20default,to%20the%20flutter%20run%20command.&text=To%20disable%20Impeller%20on%20iOS%20when%20deploying%20your%20app%2C%20add,your%20app%27s%20Info.plist%20file.

If it is not fixed, then it is not the Impeller.

This is the issue on Flutter repository: https://github.com/flutter/flutter/issues/146975

Although is about gradient being dithered, it applies to those awkward lines. My own experience ;)

hngouveia01 commented 6 months ago

Also, if after upgrading Flutter to 3.22 and the issue persists... Feel free to open an issue on the Flutter repo. :) One more thing, this bug is not related to the fl_chart. If we update to the latest release of the package the problem remains. It only happens on iOS because the Impeller engine is enabled by default on iOS operating system. It is not enabled by default on Android.

techouse commented 6 months ago

I still see this on Flutter v3.22.1 using Impeller with fl_chart v0.68.0. It's fine running on Skia.

image

techouse commented 6 months ago

@normidar @eloayoubi @luisbelo91 @ManuelRauber @hngouveia01 should we / you / I make a bug report on flutter/flutter?

hngouveia01 commented 6 months ago

@normidar @eloayoubi @luisbelo91 @ManuelRauber @hngouveia01 should we / you / I make a bug report on flutter/flutter?

Hi, @techouse. Don't get me wrong, I know you're a tech savvy :) But there are two ways of disabling the Impeller. Have you tried both? Via .plist and command line? I'm asking this because I found this comment here, and he got different results by disabling via .plist https://github.com/imaNNeo/fl_chart/issues/1410#issuecomment-1664294771

I'll get more info about this and report a bug about the Impeller. Thanks!

hngouveia01 commented 6 months ago

@techouse, check this new PR merged in 3.23 and was present on 3.22 version: https://github.com/flutter/flutter/issues/146648

General fixes being merged: https://github.com/flutter/engine/commits/main/impeller

hngouveia01 commented 6 months ago

And it seems we have these two workarounds:

jonahwilliams The reason this is happening is a bug with Path.close(). We should be ignoring the final close call which is supposed to draw a line to the path start - since this is stroke and not a fill.

So we should fix this, but in this case you don't need/shouldn't use the Path.close at the end there. Because the fix is going to be ignoring it anyway

techouse commented 6 months ago

Hi, @techouse. Don't get me wrong, I know you're a tech savvy :) But there are two ways of disabling the Impeller. Have you tried both? Via .plist and command line? I'm asking this because I found this comment here, and he got different results by disabling via .plist #1410 (comment)

I got it disabled via the Property list.

<key>FLTEnableImpeller</key>
<false/>

The reason this is happening is a bug with Path.close(). We should be ignoring the final close call which is supposed to draw a line to the path start - since this is stroke and not a fill.

So we should fix this, but in this case you don't need/shouldn't use the Path.close at the end there. Because the fix is going to be ignoring it anyway

Ah, so I guess this calls for a PR to fl_chart until this is available in Flutter stable.

hngouveia01 commented 6 months ago

Could be a solution! We are facing this problem too, so I'll give it a try this weekend and see what happens 😁

techouse commented 6 months ago

@hngouveia01 So I did what https://github.com/flutter/flutter/issues/146648#issuecomment-2058251386 suggests and tried naively removing Path.close() in these places:

Unfortunately, I can see no changes. The line is still the same jagged line as in v0.68.0.

v0.68.0 (Flutter v3.22.1 + Skia) ✅ v0.68.0 (Flutter v3.22.1 + Impeller) :x: v0.68.0 w/o Path.close() (Flutter v3.22.1 + Impeller) :x:
skia fl_chart_0 68 0 fl_chart_0 68 0_without_path_close
techouse commented 6 months ago

I found a few related issues:

And a PR that apparently fixes them https://github.com/flutter/engine/pull/52978

techouse commented 5 months ago

Still problematic with Impeller in Flutter v3.22.2

Looks like we might have to wait for https://github.com/flutter/flutter/issues/149701 to be cherry picked.

techouse commented 4 months ago

Still problematic with Impeller in Flutter v3.22.3

techouse commented 4 months ago

@imaNNeo, since you have the greatest level of detailed insight here, maybe you could open a ticket in flutter/flutter?

P.S. Pie charts are also broken using Impeller.

imaNNeo commented 4 months ago

@imaNNeo, since you have the greatest level of detailed insight here, maybe you could open a ticket in flutter/flutter?

There's no special insight needed here, so you can just have a simple path with some lineTo, and path.close() call to reproduce it. But before that, we need to check to see if there is already an opened issue which is exactly related to this one. Otherwise, it would be nice if you open an issue. Because it needs some time to write the details and provide the reproducible code. So at the moment, I found a little time and I prefer to consume it for the fl_chart issues.

So I appreciate if you follow it up and open an issue if it doesn't exist already.

Cheers!

techouse commented 3 months ago

Looks like this has been fixed in Flutter v3.24.1 🚀

imaNNeo commented 3 months ago

Looks like this has been fixed in Flutter v3.24.1 🚀

Nice! Can others please validate the fix with their use cases? Then we can close this issue. Btw, I'm really happy with the power of open-source. I didn't contribute much here, but you (the contributors) talked together, proposed some solutions, and found the related issues in the flutter, ... You are amazing! Thanks for contributing!

normidar commented 3 months ago

I found the app from that time and verified it again. Indeed, it was fixed.

https://github.com/user-attachments/assets/18fa047b-0dd7-45ba-95c4-4890f7bc912b

Versions

techouse commented 3 months ago

Then we can close this issue.

Indeed. 😎