Articles in this section
Category / Section

How to change visible chart range using range selector widget (SfCartesianChart)?

6 mins read

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

 

Gif for demonstration of changing the visible range using range selector

 

View sample in GitHub


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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied