rangeController property

RangeController? rangeController

The rangeController property is used to set the maximum and minimum values for the chart in the viewport. In the minimum and maximum properties of the axis, you can specify the minimum and maximum values with respect to the entire data source. In the visibleMinimum and visibleMaximum properties, you can specify the values to be viewed in the viewed port i.e. range controller's start and end values respectively.

Here you need to specify the minimum, maximum, visibleMinimum, and visibleMaximum properties to the axis and the axis values will be visible with respect to visibleMinimum and visibleMaximum properties.

Widget build(BuildContext context) {
  RangeController rangeController = RangeController(
    start: DateTime(2020, 2, 1),
    end: DateTime(2020, 2, 30),
  );
  SfCartesianChart sliderChart = SfCartesianChart(
    margin: const EdgeInsets.all(0),
    primaryXAxis:
        DateTimeAxis(isVisible: false),
    primaryYAxis: NumericAxis(isVisible: false),
    plotAreaBorderWidth: 0,
    series: <SplineAreaSeries<ChartSampleData, DateTime>>[
      SplineAreaSeries<ChartSampleData, DateTime>(
        //  Add required properties.
      )
    ],
  );
  return Scaffold(
    body: Column(
      children: <Widget>[
        Expanded(
          child: SfCartesianChart(
            primaryXAxis: DateTimeAxis(
                maximum: DateTime(2020, 1, 1),
                minimum: DateTime(2020, 3, 30),
                // set maximum value from the range controller
                visibleMaximum: rangeController.end,
                // set minimum value from the range controller
                visibleMinimum: rangeController.start,
                rangeController: rangeController),
            primaryYAxis: NumericAxis(),
            series: <SplineSeries<ChartSampleData, DateTime>>[
              SplineSeries<ChartSampleData, DateTime>(
                dataSource: splineSeriesData,
                xValueMapper: (ChartSampleData sales, _) =>
                    sales.x as DateTime,
                yValueMapper: (ChartSampleData sales, _) => sales.y,
                //  Add required properties.
              )
            ],
          ),
        ),
        Expanded(
            child: SfRangeSelectorTheme(
          data: SfRangeSelectorThemeData(),
          child: SfRangeSelector(
            min: min,
            max: max,
            controller: rangeController,
            showTicks: true,
            showLabels: true,
            dragMode: SliderDragMode.both,
            onChanged: (SfRangeValues value) {
              // set the start value to rangeController from this callback
              rangeController.start = value.start;
              // set the end value to rangeController from this callback
              rangeController.end = value.end;
              setState(() {});
            },
            child: Container(
              child: sliderChart,
            ),
          ),
        )),
      ],
    ),
  );
}

Implementation

final RangeController? rangeController;