aboveBarData area flickers when setState is called

[PocketDaniel]

Bug:
I am using aboveBarData and belowBarData areas to indicate deviation from an arbitrary number. Any time when setState is called aboveBarData area flickers - rapidly disappears and appears back. In the same time belowBarData area stays persistent.

To Reproduce:
I modified provided LineChartSample2 by:

• Adding custom touch handler that calls setState (not mandatory - any buttons outside LineChart will do);
• Adding aboveBarData property;
• Setting cutOffY property to 3 to make division in the charts center and applyCutOffY to apply the cut;
• Changed FlSpot data to make aboveBarData and belowBarData areas visually bigger.

line_chart_sample2.dart modified part:

/// NOTE: Rest of the code remain unchanged
LineChartData mainData() {
    return LineChartData(
      /// <----- Touch handler ----->
      lineTouchData: LineTouchData(
        touchSpotThreshold: 25,
        fullHeightTouchLine: true,
        enabled: true,
        touchCallback: (response) {
          setState(() {
            print('Setting new state');
          });
        },
      ),
      /// <----- Touch handler ----->
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          textStyle: const TextStyle(
              color: Color(0xff68737d),
              fontWeight: FontWeight.bold,
              fontSize: 16),
          getTitles: (value) {
            switch (value.toInt()) {
              case 2:
                return 'MAR';
              case 5:
                return 'JUN';
              case 8:
                return 'SEP';
            }
            return '';
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          textStyle: const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: [
            // Note: Some data changed to make BarAreaData areas bigger
            FlSpot(0, 3),
            FlSpot(2.6, 2),
            FlSpot(4.9, 1),
            FlSpot(6.8, 2),
            FlSpot(8, 4),
            FlSpot(9.5, 5),
            FlSpot(11, 4),
          ],
          isCurved: true,
          colors: [Colors.red, Colors.green],
          barWidth: 5,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          /// <----- BarAreaData ----->
          aboveBarData: BarAreaData(
            cutOffY: 3, // Dividing areas in the middle
            applyCutOffY: true, // Allowing Y-axis cut
            show: true,
            colors:
                gradientColors.map((color) => color.withOpacity(0.3)).toList(),
          ),
          belowBarData: BarAreaData(
            cutOffY: 3, // Dividing areas in the middle
            applyCutOffY: true, // Allowing Y-axis cut
            show: true,
            colors:
                gradientColors.map((color) => color.withOpacity(0.3)).toList(),
          ),
          /// <----- BarAreaData ----->
        ),
      ],
    );
  }

Screenshots
https://monosnap.com/file/KFuG42tFoN9I5kDLznPqKrGBpjRd5z

Versions

• Flutter: 1.20.1 (Stable channel)
• Dart: 2.9.0
• FlChart: 0.11.1 (Latest version on the moment of writing)

[imaNNeo]

It has been fixed in 0.12.0,
Thanks for contributing!