Indicator dot on graph disappears on LineChart

[Winghin2517]

I'm trying to generate a graph on Flutter to display cryptocurrency prices. The user should be able to interact with the graph - drag on the graph will change the price of the cryptocurrency so that the user can see what the prices were up to 24 hours ago.

The following is my code:

new charts.LineChart(
                    _fetchSeriesData(widget.graph_num),
                    behaviors: [
                      new charts.InitialSelection(selectedDataConfig: [
                        new charts.SeriesDatumConfig<num>('CoinPriceGraph', widget.coinPriceList.last.time)
                      ]),
                      new charts.LinePointHighlighter(
                        defaultRadiusPx: 20.0,
                          radiusPaddingPx: 20.0,
                          showHorizontalFollowLine:
                          charts.LinePointHighlighterFollowLineType.none,
                          showVerticalFollowLine:
                          charts.LinePointHighlighterFollowLineType.nearest),
                      new charts.SelectNearest(eventTrigger: charts.SelectionTrigger.tapAndDrag)
                    ],
                    selectionModels: [
                      new charts.SelectionModelConfig(
                        type: charts.SelectionModelType.info,

                        listener: _onSelectionChanged,
                      )
                    ],
                    animate: true,

                    primaryMeasureAxis:
                    new charts.NumericAxisSpec(showAxisLine: false,
                        renderSpec: new charts.NoneRenderSpec(),
                        tickProviderSpec: new charts.BasicNumericTickProviderSpec(zeroBound: false)
                    ),
                    domainAxis: new charts.NumericAxisSpec(showAxisLine: false ,
                        renderSpec: new charts.NoneRenderSpec()
                    )
                ),

I have set defaultRadiusPx and radiusPaddingPx to 20.0 to exaggerate the indicator dot. When I try to move the dot along the line, the dot disappears. The graph displays 1440 data points (24 hours worth of information mapped out into minutes).

Not sure what has gone wrong with my code. Tried changing various settings but I don't seem to be able to get the indicator dot to drag along my line.

[Winghin2517]

Please note that the issue is due to the setState() code within the _onSelectionChanged listener. If you are fetching your data within your state, displaying your data in the graph, and then calling the listener, the dot will disappear.

  _onSelectionChanged(charts.SelectionModel model) {
    final selectedDatum = model.selectedDatum;
    num _btc;
    if (selectedDatum.isNotEmpty) {
      _btczar = selectedDatum.first.datum.btc;
    }
    // Request a build. This causes the dot to disappear.
    setState(() {
      btc = _btc;
    });
  }

What you need to do as a workaround is to create an outer StatefulWidget and an inner StatefulWidget. The outer StatefulWidget contains the code to fetch your data from the API. Once the data is fetched, you will need to use the code as per the sample app where they used the factory method to populate your inner StatefulWidget. That seems like the only way to get the dot to work with the listener.

  @override // code for the outer StatefulWidget.
  Widget build(BuildContext context) {
    // TODO: implement build
    return coinPriceList.isNotEmpty ?
    new SelectionLineHighlight.withSampleData(coinPriceList) : //using the factory method in the inner StatefulWidget to create your graph.
    new Text('im  empty');
  }