loadMoreIndicatorBuilder property

A builder that builds the widget (ex., loading indicator or load more button) to display at the top of the chart area when horizontal scrolling reaches the start or end of the chart.

This can be used to achieve the features like load more and infinite scrolling in the chart. Also provides the swiping direction value to the user.

If the chart is transposed, this will be called when the vertical scrolling reaches the top or bottom of the chart.

## Infinite scrolling

The below example demonstrates the infinite scrolling by showing the circular progress indicator until the data is loaded when horizontal scrolling reaches the end of the chart.

Widget build(BuildContext context) {
   return Container(
       child: SfCartesianChart(
          loadMoreIndicatorBuilder:
            (BuildContext context, ChartSwipeDirection direction) =>
                getLoadMoreViewBuilder(context, direction),
          series: <ChartSeries<SalesData, num>>[
               AreaSeries<SalesData, num>(
                   dataSource: chartData,
               ),
             ],
       ));
}
Widget getLoadMoreViewBuilder(
     BuildContext context, ChartSwipeDirection direction) {
    if (direction == ChartSwipeDirection.end) {
      return FutureBuilder<String>(
        future: _updateData(), /// Adding data by updateDataSource method
        builder:
         (BuildContext futureContext, AsyncSnapshot<String> snapShot) {
          return snapShot.connectionState != ConnectionState.done
              ? const CircularProgressIndicator()
              : SizedBox.fromSize(size: Size.zero);
        },
    );
    } else {
      return SizedBox.fromSize(size: Size.zero);
    }
}

## Load more

The below example demonstrates how to show a button when horizontal scrolling reaches the end of the chart. On tapping the button circular indicator will be displayed and data will be loaded to the chart.

Widget build(BuildContext context) {
   return Container(
       child: SfCartesianChart(
          loadMoreIndicatorBuilder:
            (BuildContext context, ChartSwipeDirection direction) =>
                _buildLoadMoreView(context, direction),
          series: <ChartSeries<SalesData, num>>[
               LineSeries<SalesData, num>(
                   dataSource: chartData,
               ),
             ],
       ));
}
Widget _buildLoadMoreView(
      BuildContext context, ChartSwipeDirection direction) {
    _visible = true;
if (direction == ChartSwipeDirection.end) {
    return StatefulBuilder(
        builder: (BuildContext context, StateSetter stateSetter) {
      return Visibility(
        visible: _visible,
        child: RaisedButton(
            child: const Text('Load More'),
            onPressed: () async{
              stateSetter(() {
                  _visible = false;
              });
              await loadMore();
            }),
      );
    });
 } else {
    return null;
 }
}
FutureBuilder<String> loadMore() {
      return FutureBuilder<String>(
        future: _updateData(), /// Adding data by updateDataSource method
        builder:
         (BuildContext futureContext, AsyncSnapshot<String> snapShot) {
          return snapShot.connectionState != ConnectionState.done
              ? const CircularProgressIndicator()
              : SizedBox.fromSize(size: Size.zero);
        },
    );
}

Implementation

SfCartesianChart class