Pie Charts flickering and disappearing in scrolling views

[darekmm]

Hi. I have a BarChart inside a scrollable ListView and it works perfectly fine. However I also have a PieChart in there and this one tends to flicker/disappear randomly during scrolling. The same thing happens when I replace the ListView with a SingleChildScrollView.

Using the html renderer.

Please see code:

(...) ListView (...)
children: [Row ( children: [buildChartBox()] )] (...)


Expanded buildChartBox() {
   return Expanded(
     child: Card(
       child: Padding(
         padding: const EdgeInsets.all(20.0),
         child: Column(
           children: [
             Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 chartTitles(
                     title: 'Items',
                     subtitle: 'by value'),
                 SizedBox(
                     height: 300,
                     child: ValuesChart(data: calculateValues(items)))
               ],
             ),
           ],
         ),
       ),
     ),
   );
 }




Row chartTitles({String title = '', String subtitle = ''}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: text_charttitle),
            Text(subtitle, style: text_chartsubtitle),
          ],
        )
      ],
    );
  }
  

import 'package:fl_chart/fl_chart.dart';

class ValuesChart extends StatelessWidget {
  final Map<String, int> data;

  const ValuesChart({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
        child: PieChart(
      _theData(data),
    ));
  }
}

Is there a reason it would do this? It looks like the constraining space for the chart has something to do with it (e.g. putting it inside a SizedBox which is too small) because enlarging the space mitigates the issue somewhat (jt flickers less). But this might be accidental.

[imaNNeo]

Hi. Please provide a reproducible code (a main.dart file) Also, it is good to provide a video alongside your code.

It helps us to fix it faster.

Thanks!

[RohanNavlakhe2]

I am also facing the same issue on Mobile Browser. (On Web browser it looks working fine) I am using Pie Chart and Bar chart. Bar chart works fine but when I change the graph type to Pie then sometimes while scrolling the screen the Pie Chart first flickers and then gets disappears.

Strange part is even after disappearing I am able to see the badgeWidget on PieChartSectionData. For your information - I am showing badgeWidget on user touch on that section only.

I noticed the case when it gets disappear. For example

1. if my pie chart has 4 sections and all of them have different values then it may disappear.
2. also if the first section has some value and other 3 have the value 0 then it wont disappear.

Widget servicePieChartForMobileView() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Flexible(
          child: ValueListenableBuilder(
            valueListenable: touchedIndex,
            builder: (context, value, child) {
              return PieChart(
                PieChartData(
                  pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) {
                    final desiredTouch = pieTouchResponse.touchInput is! PointerExitEvent && pieTouchResponse.touchInput is! PointerUpEvent;
                    if (desiredTouch && pieTouchResponse.touchedSection != null) {
                      touchedIndex.value = pieTouchResponse.touchedSection.touchedSectionIndex;
                    } else {
                      touchedIndex.value = -1;
                    }
                  }),
                  startDegreeOffset: 180,
                  borderData: FlBorderData(
                    show: false,
                  ),
                  sectionsSpace: 1,
                  centerSpaceRadius: 0,
                  //0
                  sections: showingSections(),
                ),
              );
            },
          ),
        ),
      ],
    );
  }

List<PieChartSectionData> showingSections() {
    List<PieChartSectionData> pieChartSectionList = [];
    for (int i = 0; i < serviceStatsPieChartData.length; i++) {

      PieChartEachPartData pieChartEachPartData = serviceStatsPieChartData[i];
      final isTouched = i == touchedIndex.value;

      pieChartSectionList.add( PieChartSectionData(
        badgeWidget: isTouched
            ? Container(
                padding: EdgeInsets.all(10),
                child: Text(
                  "${pieChartEachPartData.partDesc} - ${pieChartEachPartData.value}",
                  style: TextStyle(color: Colors.black),
                ),
                decoration: BoxDecoration(color: Colour.ptooltipBg, borderRadius: BorderRadius.circular(8)),
              )
            : Container(),
        color: pieChartEachPartData.color,
        value: pieChartEachPartData.value,
        title: '',
        radius: pieChartEachPartData.radius,
        titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xff044d7c)),
        titlePositionPercentageOffset: 0.55,
      ));
    }

    return pieChartSectionList;
  }

PieChart is under SingleChildScrollView

Please took into that Thanks

[imaNNeo]

Hi. Please check it with the latest version, and if it still happens, share your reproducible code (a main.dart file) here. Thanks!