Chart disappears when data are updated

[SSebigo]

When I update the data used by the chart (I use mobx to update the data), it just disappears. Shouldn't the data be updatable in real-time?

[entronad]

It should.
Can you please provide your example code to let me check the problem.

[SSebigo]

return Observer(builder: (_) {
  if (context.watch<ResultatsStore>().answersChart.isEmpty) {
    return Center(
      child: Text(
        'Aucune donnée disponible',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }
  return Chart(
    data: context.watch<ResultatsStore>().answersChart,
    variables: {
      'Note': Variable(
        accessor: (Map map) => map['Note'] as String,
      ),
      'Réponses': Variable(
        accessor: (Map map) => map['Réponses'] as num,
      ),
      'index': Variable(
        accessor: (Map map) => map['index'] as num,
      ),
    },
    elements: [
      IntervalElement(
        color: ColorAttr(
          variable: 'index',
          values: [
            Palette.rose,
            Palette.green,
            Palette.grey,
          ],
        ),
        size: SizeAttr(
          value: (mediaQuery.width /
                  context.watch<ResultatsStore>().answersChart.length) *
              0.5,
        ),
      ),
    ],
    axes: [
      Defaults.horizontalAxis,
      Defaults.verticalAxis,
    ],
    selections: {
      'tap': PointSelection(
        on: {
          GestureType.hover,
          GestureType.tap,
        },
        dim: 1,
      )
    },
    tooltip: TooltipGuide(
      backgroundColor: Palette.black,
      elevation: 5,
      textStyle: TextStyles.caption.copyWith(color: Palette.white),
      variables: ['Note', 'Réponses'],
    ),
    crosshair: CrosshairGuide(),
  );
});

Note here that answersChart is a List<Map<String, dynamic>> modified inside ResultatsStore calling this method:

@action
void calculateAnswersChart() {
  answersChart.clear();

  log.fine('calculateAnswersChart | rs.copyMap: ${copyMap.length}');
  for (final entry in copyMap.entries) {
    final copy = entry.value;
    final notes = copy.notes[critere?.idDef];
    final notesStr = (critere as Question)
        .propositions
        .map((e) => String.fromCharCode(96 + e.numero).toUpperCase())
        .toSet()
        .toList();
    String note = '';

    // fill with all default notes
    for (final noteStr in notesStr) {
      answersChart.add(ObservableMap<String, dynamic>.of(<String, dynamic>{
        'index': 0,
        'Note': noteStr,
        'Réponses': 0,
      }));
    }
etc...

PS: somehow I can't click on the graph bars

[SSebigo]

Also, even if I remove the Observer it still ends with the same result, the chart goes blank when data are updated.

The only way to have the updated chart is to switch to a different view and then come back to the chart.
I suppose it redraws when views are switched).

[entronad]

The data updating problem is caused by a bug in the _ChartLayoutDelegate.
I have fixed it in the v0.6.1, please have a try. (It requires a Flutter version greater than 2.6.0, there is a breaking change in the gesture lib).

The click problem dosen't show in my test, I copied your selections and tooltip setting.

[SSebigo]

Oh one last problem, seems like in a bar chart, say there are 2 labels and each one have a value of 1, no bar is displayed

Example, if this is my data:
[{index: 0, label: 0, value: 1, color: Color(0xffb64384)}, {index: 1, label: 1, value: 1, color: Color(0xfff8bf2f)}]
then the chart is empty (the labels are displayed but there is no bar).

[entronad]

If the label position is right, the problem may caused by color or size attribute.

[SSebigo]

I'll take a look, thanks. I close the issue since the original one is patched (works like a charm).