Fl_chart: Doesn't work on web

[andermoran]

It does not render correctly on the web. I know the web is only in technical preview so I didn't expect it to work but it would be nice if it did.

Render on mobile (good)

Render on web (bad)

[imaNNeoFighT]

Hi dude, great to see it on the web,
We are not going to focus on the web,
but may I ask you what is your problem with that (the second image)?

[andermoran]

Yes, I get that the web isn't a priority. I was just letting you know how it works on the web. The data for the charts is the exact same. It paints the lines correctly on the top graph but on the bottom graph the lines go crazy

[imaNNeoFighT]

Got it,
Thanks!

[andymillernz]

There is a bug in the _Path.from_ function in the web engine - it effectively creates a pointer to the path instead of a deep copy.

Fix is to change the 2 occurrences of _Path.from_ to '_shift_' in _line_chart_painter.dart_ (I'm sure there are other/better fixes, this happens to be the one that works for me).

// final belowBarPath = Path.from(barPath);
    final belowBarPath = barPath.shift(Offset(0, 0));
...

[ChenYunerer]

andymillernz`s method is worked

[imaNNeoFighT]

Did you test in the new flutter veraion?

[ChenYunerer]

my flutter version is Flutter 1.10.16 • channel master

[imaNNeoFighT]

May I ask you to check it in 0.12?

[andymillernz]

May I ask you to check it in 0.12?

I've created a bug report with the flutter team re: the issue with Path.from...

[imaNNeoFighT]

Well done,
Thanks!

[Ferdzzzzzzzz]

@imaNNeoFighT my proposed workaround for web is very simple:
final belowBarPath = kIsWeb ? barPath.shift(const Offset(0, 0)) : Path.from(barPath);

Not sure how to test packages locally in my application, any advice on how to do that? :)

[abc873693]

It work in flutterv1.13.9-pre.59. fl_chart 0.6.3

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.13.9-pre.59, on Mac OS X 10.15.2 19C57, locale zh-Hant-TW)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.41.1)
[✓] Connected device (3 available)

[andymillernz]

For best results (at this point in time) you need to run in release mode with SKIA enabled..

I assume (hope?) that this will become the default at some point..

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

[Dimarv135]

For me only Pie chart doesn't show up on web.Same code/data that runs fine on mobile doesn't show anything on web. My app has also line chart, bar chart, stacked- bar chart which all work fine on Web.
Release mode didn't help. SKIA fixes the problem with the pie chart but the rest of my app doesn't support it.

[Mecil9]

For me only Pie chart doesn't show up on web.Same code/data that runs fine on mobile doesn't show anything on web. My app has also line chart, bar chart, stacked- bar chart which all work fine on Web.
Release mode didn't help. SKIA fixes the problem with the pie chart but the rest of my app doesn't support it.

me to0..........
Pie chart can't display the circle draw....only show the Indicator's data....

did u fix it?

[imaNNeoFighT]

I think it has been fixed (at least I see it is fixed in beta channel)
Am I correct?

[darrillaga]

Line chart still not working in web, I tried switch Path.from with shift and didn't work, version 0.9.4

[imaNNeoFighT]

Okay tnx

[darrillaga]

Sorry for the message with lack of content, the following are iOS vs Chrome.
If I enable SKIA I just get only the solid lines. Let me know if I can help you with something to get this fixed.

iOS:

Chrome:

[andymillernz]

There are still some limitations in the 'painting/blend/path' functions for the web flutter implementation.

In this case the issue relates to using a dash line.. And it looks reasonably correct if you comment out the dashArray in _line_chart_sample8.dart_

``` FlSpot(6.8, 5),
FlSpot(8, 1),
FlSpot(9.5, 2),
FlSpot(11, 4),
],
// dashArray: [2, 4],
isCurved: true,

If you want the pie chart to work you need to patch _lib/src/pie_chart/pie_chart_painter.dart_ and remove or change the blendMode in sectionsSpaceClearPaint - this does impact the pie chart functionality. however at least gets things to work..

sectionsSpaceClearPaint = Paint()
..style = PaintingStyle.fill
..color = const Color(0x000000000)
// ..blendMode = BlendMode.srcOut;
..blendMode = BlendMode.color;
```

[darrillaga]

it worked without dash array, great thanks!

[imaNNeoFighT]

I think it doesn't exist anymore.
Can somebody check it and let me know?

[OlegNovosad]

@imaNNeoFighT checked and was not able to reproduce it. We can close it I think.

[imaNNeoFighT]

Congrats! :))