Thorny LineChart

[normidar]

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

RPReplay_Final1711956844.mp4

Versions

• which version of the Flutter are you using?
  • 3.19.4
• which version of the FlChart are you using?
  • fl_chart: 0.67.0

[eloayoubi]

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

[ManuelRauber]

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

[e4ky]

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

[eloayoubi]

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]

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

[hngouveia01]

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:
flutter/flutter#146975

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

[hngouveia01]

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]

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

[techouse]

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

[hngouveia01]

@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
#1410 (comment)

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

[hngouveia01]

@techouse, check this new PR merged in 3.23 and was present on 3.22 version:
flutter/flutter#146648

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

[hngouveia01]

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]

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]

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

[techouse]

@hngouveia01 So I did what flutter/flutter#146648 (comment) suggests and tried naively removing Path.close() in these places:

• fl_chart/lib/src/chart/line_chart/line_chart_painter.dart

  Line 643 in 2ecde9a

  ..close();

• fl_chart/lib/src/chart/line_chart/line_chart_painter.dart

  Line 687 in 2ecde9a

  ..close();

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) ❌	v0.68.0 w/o Path.close() (Flutter v3.22.1 + Impeller) ❌

[techouse]

I found a few related issues:

• SVG rendering issues after flutter upgrade from 3.7 flutter/flutter#147139
• [Impeller] DrawArc with line from Center has "pointy end" - deviation from Skia flutter/flutter#148323

And a PR that apparently fixes them flutter/engine#52978

[techouse]

Still problematic with Impeller in Flutter v3.22.2

Looks like we might have to wait for flutter/flutter#149701 to be cherry picked.

[techouse]

Still problematic with Impeller in Flutter v3.22.3

[techouse]

@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]

@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]

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

[imaNNeo]

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]

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

GGG.mov

Versions

• which version of the Flutter are you using?
  • 3.24.0
• which version of the FlChart are you using?
  • fl_chart: 0.69.0

[techouse]

Then we can close this issue.

Indeed. 😎