flutter chart Selection Callback not showing

Question

Hello i'm working on a app with charts and i decided to use the graph and i would like to display the information of the selected day in that chart outside of the graph more precisely. I followed the example of the flutter chart gallery

https://google.github.io/charts/flutter/example/behaviors/selection_callback_example

but first of all it seems to have mistakes in it. There is no listener parameter for the selection models

 new charts.TimeSeriesChart(
            widget.seriesList,
            animate: widget.animate,
            selectionModels: [
              new charts.SelectionModelConfig(
                type: charts.SelectionModelType.info,
                listener: _onSelectionChanged,
              )
            ],
          )`

this is what ive done instead

charts.TimeSeriesChart(
                _seriesList,
                animate: false,
                defaultRenderer: charts.LineRendererConfig(includeArea: true, stacked: false),
                userManagedState: _myState,
                selectionModels: [
                  charts.SelectionModelConfig(
                    type: charts.SelectionModelType.info,
                    changedListener: _onSelectionChanged,
                  ),
                ],
              ),

It works a bit. I get to display the information selected in a box over the graph, but the selected day is not displayed by the line as it was before by default, like the image. Is there a way to get it to work properly?

Answer 1

To fix this, you'd need to make sure that the LineRendererConfig instance does not change.

E.g. by initializing it as a late instance field:

class _YourChartContainerState extends State<YourChartContainer> {
  
  late var rendererConfig = charts.LineRendererConfig<num>(includeArea: true, stacked: false);

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      _seriesList,
      animate: false,
      defaultRenderer: rendererConfig,
      userManagedState: _myState,
      selectionModels: [
        charts.SelectionModelConfig(
          type: charts.SelectionModelType.info,
          changedListener: _onSelectionChanged,
        ),
      ],
    );
  }
}