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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the visible chart range using the 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.

void 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.

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>[
            child: _chart,
            // 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.




Gif for demonstration of changing the visible range using range selector


View sample in GitHub

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile