How to change visible chart range using range selector widget (SfCartesianChart)?
In this article, we described how to change the visible chart range using the range selector widget.
In Flutter Cartesian Chart widget, you can change the visible chart range using the SfRangeSelector widget and the RangeController class, which is available in the Syncfusion core package. Flutter Range Selector is a highly interactive UI control for selecting a smaller range from a larger data set and the RangeController is used for setting and getting the currently selected values of range selector.
The following steps to update the visible range of the chart using the range selector widget:
Step 1: Initialize the necessary variables such as minimum and maximum range for the chart as well as for the range selector, SfRangeValues (which holds the current selected values for the range selector), RangeController, and SfCartesianChart.
final double _min = 2.0; final double _max = 19.0; SfRangeValues _values = SfRangeValues(8.0, 16.0); late RangeController _rangeController; late SfCartesianChart _chart;
Step 2: Inside the initState() method, set the start and end values for the RangeController variable with the help of the SfRangeValues object.
@override
void initState() {
super.initState();
// Setting the start and end values of SfRangeValues to the RangeController
_rangeController = RangeController(start: _values.start, end: _values.end);
}
Step 3: In the widget build method, define the SfCartesianChart with the necessary properties and also set the defined minimum, maximum, and the range controller variables in their primaryXAxis property.
After that, define the SfRangeSelector widget with the necessary properties and also set the defined minimum, maximum, and the range controller variables in the min, max, and controller properties of the SfRangeSelector and then add both the defined SfCartesianChart and the SfRangeSelector widgets inside a column widget whose parent is the Scaffold returned to the build.
@override
Widget build(BuildContext context) {
_chart = SfCartesianChart(
margin: const EdgeInsets.only(left: 10, right: 10, bottom: 20),
primaryXAxis: NumericAxis(
// Setting minimum and maximum values for the chart axis.
minimum: _min,
maximum: _max,
isVisible: true,
rangeController: _rangeController // Setting range controller for the chart axis
),
primaryYAxis: NumericAxis(isVisible: true),
plotAreaBorderWidth: 0,
series: <SplineSeries<Data, double>>[
SplineSeries<Data, double>(
color: Color.fromARGB(255, 126, 184, 253),
dataSource: chartData,
animationDuration: 0,
xValueMapper: (Data sales, _) => sales.x,
yValueMapper: (Data sales, _) => sales.y)
],
);
return Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10, top: 80),
child: Column(
children: <Widget>[
Container(
child: _chart,
),
SfRangeSelector(
// Setting minimum and maximum values for the SfRangeSelector
min: _min,
max: _max,
interval: 2,
showTicks: true,
showLabels: true,
controller: _rangeController, // setting range controller for the SfRangeSelector
child: Container(
height: 50,
),
),
],
),
),
));
}
Thus, when changing the range in the range selector it will dynamically change the visible range of the cartesian chart.
Screenshot
Conclusion
I hope you enjoyed learning about how to change the visible chart range using the range selector widget (SfCartesianChart).
You can refer to our Flutter Cartesian Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Cartesian Chart documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
