Pie chart painter uses Path.combine and breaks in html renderer

[ppetev]

Describe the bug

PieChartPainter.generateSectionPath() uses Path.combine() and it is not support on html renderer for web. I propose removing the need for Path.combine().

To Reproduce

Run the following as web application with html renderer configured. (CanvasKit works)

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() => runApp(PieChartBug());

class PieChartBug extends StatelessWidget {
  // root widget of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pie Chart Web Bug',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PieChart(
        PieChartData(
          centerSpaceRadius: 64.0,
          sectionsSpace: 16.0,
          sections: [
            PieChartSectionData(
              value: 32.0,
              radius: 16.0,
              showTitle: false,
              color: Colors.redAccent,
            ),
            PieChartSectionData(
              value: 32.0,
              radius: 16.0,
              showTitle: false,
              color: Colors.greenAccent,
            ),
          ],
        ),
        swapAnimationDuration: Duration.zero,
      ),
    );
  }
}

Screenshots

Console output:

════════ Exception caught by rendering library ═════════════════════════════════
UnimplementedError
The relevant error-causing widget was
PieChart
lib/bugs/pie_chart_bug.dart:15
════════════════════════════════════════════════════════════════════════════════

Versions

❯ flutter doctor    
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.3, on macOS 12.3 21E230 darwin-arm, locale en-BG)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.65.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

FlChart version

  fl_chart: ^0.45.0

[ppetev]

proposal: https://github.com/imaNNeoFighT/fl_chart/compare/master...ppetev:ppetev/issue955?expand=1

[imaNNeo]

Hi @ppetev . Really? it doesn't work on the web? Please make a PR to talk about your proposal.

Thanks!

[Monolite]

I also have this issue.

It doesn't render pie charts when using html web-renderer and the chart has more than one piechartsection.

flutter run -d chrome --web-renderer html

[imaNNeo]

Thank you. I'm waiting for @ppetev PR

[ppetev]

unfortunately my proposal does not work in some corner cases - when section space is big enough to eliminate arc on the inner radius of a donut chart. Will think about different solution.

[imaNNeo]

Thank you. Please let me know when you found a new solution.

[imaNNeo]

This is Flutter's issue. We can follow it here: https://github.com/flutter/flutter/issues/44572

[Garciconx]

I also have this issue.

It doesn't render pie charts when using html web-renderer and the chart has more than one piechartsection.

flutter run -d chrome --web-renderer html

I have the same issue, The pie chart renders correctly on a desktop browser, but in a mobile browser, only renders when the chart has one pie chart section.

PD: I'm testing using Mac OS Chrome and Android Chrome, Greetings!

[tomasweigenast]

Any update on this?

[Coinners]

what about this project? their approach to rendering charts works when using the html renderer https://github.com/apgapg/pie_chart

[imaNNeo]

We can ignore the sectionsSpace property when we Path.combine does not work (in HTML renderer)

Will be landed on the next release.