rangeController property
RangeController?
rangeController
final
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;