We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
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
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
