Warning: Chart configuration is changing more frequent than threshold of 500...

[angel1st]

Hi there, When creating gauge chart, I have following warning, constantly logged to the output:

Chart configuration is changing more frequent than threshold of 500. Check if your behavior, axis, or renderer config is missing equality checks that may be causing configuration to be detected as changed.

Here is how the gauge chart class looks like:

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'dart:math';

class GaugeChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  GaugeChart(this.seriesList, {Key key, this.animate}) : super(key: key);

  factory GaugeChart.fromValue(
      {@required double value, @required Color color, bool animate, Key key}) {
    return GaugeChart(
      _createDataFromValue(value, color),
      // Disable animations for image tests.
      animate: animate,
      key: key,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.PieChart(
      //charts.AnnotationLabelPosition.inside: ,
      seriesList,
      animate: animate,
      layoutConfig: charts.LayoutConfig(
        leftMarginSpec: charts.MarginSpec.fixedPixel(0),
        topMarginSpec: charts.MarginSpec.fixedPixel(0),
        rightMarginSpec: charts.MarginSpec.fixedPixel(0),
        bottomMarginSpec: charts.MarginSpec.fixedPixel(0),
      ),
      defaultRenderer: charts.ArcRendererConfig(
        arcWidth: 10,
        startAngle: 3 / 5 * pi,
        arcLength: 9 / 5 * pi,
      ),
    );
  }

  static List<charts.Series<GaugeSegment, String>> _createDataFromValue(
      double value, Color color) {
    double toShow = (1 + value) / 2;
    final data = [
      GaugeSegment('Main', toShow, color),
      GaugeSegment('Rest', 1 - toShow, Colors.grey.withOpacity(0.2)),
    ];

    return [
      charts.Series<GaugeSegment, String>(
        id: 'Segments',
        domainFn: (GaugeSegment segment, _) => segment.segment,
        measureFn: (GaugeSegment segment, _) => segment.value,
        colorFn: (GaugeSegment segment, _) => segment.color,
        data: data,
      )
    ];
  }
}

/// data type.
class GaugeSegment {
  final String segment;
  final double value;
  final charts.Color color;

  GaugeSegment(this.segment, this.value, Color color)
      : this.color = charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

Any help would be greatly appreciated.

[bgmf]

I have the same issue when recreating the chart in an interval of about 500ms (creating a new stateless widget with a line chart). And there's actually weird rendering behaviour in the animation. I tried to circumvent this by making the widget stateful and only updating the series data, but then nothing gets rendered, because - I guess - the chart doesn't consider content changes but requires to be rebuild. Wich kinda sucks, because we need to update the chart often. One could solve this by disabling animation, but the graph looks kind of dull then.

Chart configuration is changing more frequent than threshold of 500. Check if your behavior, axis, or renderer config is missing equality checks that may be causing configuration to be detected as changed.

  @override
  Widget build(BuildContext context) => charts.LineChart(
        _seriesList,
        animate: widget.animate,
        behaviors: [
          charts.SeriesLegend(
            position: charts.BehaviorPosition.bottom,
          ),
        ],
        primaryMeasureAxis: charts.NumericAxisSpec(
          tickFormatterSpec:
              charts.BasicNumericTickFormatterSpec.fromNumberFormat(
            _ThroughputMeasureFormat(
                isMegaBitPerSecond: widget.isMegaBitPerSecond),
          ),
        ),
        secondaryMeasureAxis: charts.NumericAxisSpec(
          tickFormatterSpec:
              charts.BasicNumericTickFormatterSpec.fromNumberFormat(
            _ThroughputMeasureFormat(
                isMegaBitPerSecond: widget.isMegaBitPerSecond),
          ),
        ),
        domainAxis: charts.NumericAxisSpec(
          tickFormatterSpec:
              charts.BasicNumericTickFormatterSpec.fromNumberFormat(
            _TimeDomainFormat(),
          ),
        ),
      );

I don't know, how to put in the mentioned equality checks.

[tony123S]

same...no solution yet?

[bambinoua]

Up!