How to synchronize zoom and pan in Flutter Chart and Range Selector?
The SfRangeSelector has a built-in support for updating the visible range of the chart based on the selected range in range selector. To update the visible range, you must set the primaryXAxis.rangeController property in the SfCartesianChart. But zoom or pan within the chart, does not updates the range selector this is not available at present.
In this article, we describe how to synchronize zooming and panning between a flutter chart and a range selector. We utilized the controller in the SfRangeSelector and the ZoomPanBehavior in the SfCartesianChart. When we adjust the range selector to select a specific range of data, the rangeController automatically updates the visible range of the chart’s x-axis accordingly. This synchronization ensures that the primaryXAxis of the chart adjusts its initialVisibleMinimum and initialVisibleMaximum properties based on the values from the rangeController, displaying the selected range on the chart. Conversely, when users zoom or pan within the chart, the ZoomPanBehavior in the SfCartesianChart provides the capability to update the range selector’s controller with the new visible range of the chart. This ensures that any adjustments made in the range selector or the chart itself reflect changes in both components, providing users with a cohesive data exploration experience.
Here’s how to synchronize zooming and panning between a flutter chart and a range selector:
Step 1: Initialize the list chartData which stores the data source. Then create the SfCartesianChart widget with the ColumnSeries and assign the chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively. Initialize the chart with a data source and to perform zooming and panning enable the enableSelectionZooming, enableDoubleTapZooming, enableMouseWheelZooming and enablePanning along with the zoom mode as zoomMode.x to pan the chart in the horizontal direction in zoomPanBehavior.
class _ChartState extends State<Chart> {
late final List<ChartSampleData> chartData;
ZoomPanBehavior? _zoomPanBehavior;
@override
void initState() {
super.initState();
chartData = List.generate(
100,
(index) => ChartSampleData(
x: 'E${index + 1}',
y: Random().nextDouble() * 100,
),
);
_zoomPanBehavior = ZoomPanBehavior(
enablePanning: true,
zoomMode: ZoomMode.x,
enableSelectionZooming: true,
enableDoubleTapZooming: true,
enableMouseWheelZooming: true,
);
}
@override
Widget build(BuildContext context) {
final SfCartesianChart chart = SfCartesianChart(
zoomPanBehavior: _zoomPanBehavior,
primaryXAxis: const CategoryAxis(),
primaryYAxis: const NumericAxis(),
series: [
ColumnSeries<ChartSampleData, String>(
dataSource: chartData,
animationDuration: 0,
xValueMapper: (ChartSampleData sales, int index) => sales.x,
yValueMapper: (ChartSampleData sales, int index) => sales.y,
),
],
);
return Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: chart,
),
),
],
);
}
}
class ChartSampleData {
const ChartSampleData({required this.x, required this.y, required});
final String x;
final double y;
}
Step 2: Set min and max. These values represent the boundaries for the x-axis.
late final double min;
late final double max;
@override
void initState() {
super.initState();
chartData = List.generate(
.....
.....
const int numOfElementsToShow = 10;
min = -0.5;
max = chartData.length - 1 + 0.5;
}
Step 3: Set RangeController, which is used to control the visible range of the range selector and the chart. The range controller’s start and end values determine the initial range of data visible in the chart and range selector.
late final RangeController rangeController;
@override
void initState() {
super.initState();
chartData = List.generate(
.....
.....
rangeController = RangeController(
start: min,
end: min + numOfElementsToShow,
);
}
Step 4: Initialize the range selector using the same data source as the chart and assign the min, max, and rangeController values to the SfRangeSelector controller and assign the rangeController.start and rangeController.end values to the initialValues. The range selector will help in selecting a specific range of data to be displayed on the chart.
Container(
margin:
const EdgeInsets.only(left: 50, right: 10, top: 10, bottom: 20),
child: SfRangeSelectorTheme(
data: SfRangeSelectorThemeData(
thumbRadius: 0,
overlayRadius: 0,
inactiveTrackHeight: 0,
activeTrackHeight: 0,
inactiveRegionColor: Colors.black12.withOpacity(0.3),
activeRegionColor: Colors.black.withOpacity(0.7),
),
child: SfRangeSelector(
min: min,
max: max,
controller: rangeController,
initialValues: SfRangeValues(
rangeController.start,
rangeController.end,
),
interval: 1,
dragMode: SliderDragMode.betweenThumbs,
child: SizedBox(
height: 5,
child: SfCartesianChart(
margin: const EdgeInsets.all(0),
primaryXAxis: const CategoryAxis(isVisible: false),
primaryYAxis: const NumericAxis(isVisible: false),
series: [
ColumnSeries<ChartSampleData, String>(
dataSource: chartData,
color: Colors.transparent,
xValueMapper: (ChartSampleData sales, int index) =>
sales.x,
yValueMapper: (ChartSampleData sales, int index) =>
sales.y,
),
],
),
),
),
),
),
Step 5: Finally, to synchronize the flutter range selector and the chart, integrate the rangeController to the primaryXAxis of the chart and assign the rangeController.start to initialVisibleMinimum, rangeController.end to initialVisibleMaximum, min for minimum, and max for maximum. This ensures that changes in the range selector update the chart and vice versa.
@override
Widget build(BuildContext context) {
final SfCartesianChart chart = SfCartesianChart(
zoomPanBehavior: _zoomPanBehavior,
primaryXAxis: CategoryAxis(
isVisible: false,
minimum: min,
maximum: max,
initialVisibleMinimum: rangeController.start,
initialVisibleMaximum: rangeController.end,
rangeController: rangeController,
),
primaryYAxis: const NumericAxis(),
series: [
ColumnSeries<ChartSampleData, String>(
dataSource: chartData,
animationDuration: 0,
xValueMapper: (ChartSampleData sales, int index) => sales.x,
yValueMapper: (ChartSampleData sales, int index) => sales.y,
),
],
);
return Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: chart,
),
),
Container(
margin:
const EdgeInsets.only(left: 50, right: 10, top: 10, bottom: 20),
child: SfRangeSelectorTheme(
data: SfRangeSelectorThemeData(
thumbRadius: 0,
overlayRadius: 0,
inactiveTrackHeight: 0,
activeTrackHeight: 0,
inactiveRegionColor: Colors.black12.withOpacity(0.3),
activeRegionColor: Colors.black.withOpacity(0.7),
),
child: SfRangeSelector(
min: min,
max: max,
controller: rangeController,
initialValues: SfRangeValues(
rangeController.start,
rangeController.end,
),
interval: 1,
dragMode: SliderDragMode.betweenThumbs,
child: SizedBox(
height: 5,
child: SfCartesianChart(
margin: const EdgeInsets.all(0),
primaryXAxis: const CategoryAxis(isVisible: false),
primaryYAxis: const NumericAxis(isVisible: false),
series: [
ColumnSeries<ChartSampleData, String>(
dataSource: chartData,
color: Colors.transparent,
xValueMapper: (ChartSampleData sales, int index) =>
sales.x,
yValueMapper: (ChartSampleData sales, int index) =>
sales.y,
),
],
Now, the synchronization of zooming and panning between the flutter chart and the range selector is implemented as shown below.
View the sample here: How to synchronize zooming and panning between a flutter chart and a range selector
Conclusion
I hope you enjoyed learning how to synchronize zoom and pan in Flutter Chart and Range Selector.
You can refer to our Flutter Charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter Charts example 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!
