How to Achieve Directional Zooming in Flutter CartesianCharts?
In this article we explain how to achieve directional zooming in SfCartesianChart by extending zoomPanBehavior and its public methods.
The zoomPanBehavior includes methods that let you customize zoom and pan interactions to suit your needs. It allows you to control how the chart responds to user actions, such as adjusting zoom speed or restricting panning direction. The event handling methods in zoomPanBehavior offer flexibility in managing these interactions. This gives you more control over how users interact with the chart.
The following steps will explain how to achieve directional zooming by customizing zoomPanBehavior.
Step 1: Create the _ChartData class and initialize it with the required data for the data source.
List<_ChartData> _chartData = [
_ChartData('Jan', 35, 7),
_ChartData('Feb', 28, 10),
_ChartData('Mar', 34, 18),
_ChartData('Apr', 32, 12),
_ChartData('May', 40, 16),
_ChartData('Jun', 35, 9),
_ChartData('Jul', 28, 11),
_ChartData('Aug', 34, 7),
_ChartData('Sept', 32, 3),
_ChartData('Oct', 40, 11),
_ChartData('nov', 32, 15),
_ChartData('dec', 40, 10),
];
class _ChartData {
_ChartData(this.x, this.y1, this.y2);
final String x;
final double y1;
final double y2;
}
Step 2: Create an SfCartesianChart with a LineSeries to visualize the data assign the _chartData to the dataSource property Use the xValueMapper and yValueMapper properties to map X and Y values from the data source.
Create fields xAxis of type CategoryAxis and yAxis of type NumericAxis, and assign them to the primaryXAxis and primaryYAxis, respectively, for rendering the chart.
CategoryAxis xAxis = const CategoryAxis();
NumericAxis yAxis = const NumericAxis();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
primaryXAxis: xAxis,
primaryYAxis: yAxis,
series: <CartesianSeries<_ChartData, String>>[
LineSeries<_ChartData, String>(
dataSource: _chartData,
xValueMapper: (_ChartData sales, int index) => sales.x,
yValueMapper: (_ChartData sales, int index) => sales.y1,
),
LineSeries<_ChartData, String>(
dataSource: _chartData,
xValueMapper: (_ChartData sales, int index) => sales.x,
yValueMapper: (_ChartData sales, int index) => sales.y2,
),
],
),
);
}
}
Step 3: The _CustomZoomPanBehavior class extends from zoomPanBehavior to customize zooming and panning in Flutter charts. It enables both pinching and panning by setting enablePinching and enablePanning to true. And stores previous zoom factors and positions using _previousXZoomFactor, _previousYZoomFactor, _previousXZoomPosition, and _previousYZoomPosition, which help manage the zoom/pan states for smoother interactions.
class _CustomZoomPanBehavior extends ZoomPanBehavior {
_CustomZoomPanBehavior(this.xAxis, this.yAxis);
CategoryAxis xAxis;
NumericAxis yAxis;
@override
bool get enablePinching => true;
@override
bool get enablePanning => true;
double _previousXZoomFactor = 1;
double _previousYZoomFactor = 1;
double _previousXZoomPosition = 0;
double _previousYZoomPosition = 0;
double? _previousScale;
Offset? _previousMovedPosition;
}
Step 4: The _pan method manages panning gestures by adjusting the zoom position based on the drag movement. It calculates new zoom positions for both the X and Y axes using _toPanValue, which accounts for the chart’s bounds and scale.
Applies these zoom adjustments to each axis through zoomToSingleAxis, ensuring smooth panning. It also uses _minMax to keep the zoom positions within defined limits and updates the previous touch position for future gestures.
class _CustomZoomPanBehavior extends ZoomPanBehavior {
_CustomZoomPanBehavior(this.xAxis, this.yAxis);
void _pan(Offset position) {
double currentZoomPosition;
double calcZoomPosition;
if (_previousMovedPosition != null) {
final Offset translatePosition = _previousMovedPosition! - position;
_previousScale ??= _toScaleValue(_previousXZoomFactor);
// xAxis
calcZoomPosition = _toPanValue(parentBox!.paintBounds, translatePosition, _previousXZoomPosition, _previousScale!, false);
currentZoomPosition = _minMax(calcZoomPosition, 0, 1 - _previousXZoomFactor);
zoomToSingleAxis(xAxis, currentZoomPosition, _previousXZoomFactor);
_previousXZoomPosition = currentZoomPosition;
// yAxis
calcZoomPosition = _toPanValue(parentBox!.paintBounds, translatePosition, _previousYZoomPosition, _previousScale!, true);
currentZoomPosition = _minMax(calcZoomPosition, 0, 1 - _previousYZoomFactor);
zoomToSingleAxis(yAxis, currentZoomPosition, _previousYZoomFactor);
_previousYZoomPosition = currentZoomPosition;
}
_previousMovedPosition = position;
}
double _toScaleValue(double zoomFactor) {
return max(1 / _minMax(zoomFactor, 0, 1), 1);
}
double _toPanValue(Rect bounds, Offset position, double zoomPosition, double scale, bool isVertical) {
double value = (isVertical
? position.dy / bounds.height
: position.dx / bounds.width) /
scale;
return isVertical ? zoomPosition - value : zoomPosition + value;
}
double _minMax(double value, double min, double max) {
return value > max ? max : (value < min ? min : value);
}
}
Step 5: The _pinch method facilitates pinch-to-zoom functionality in the chart. It determines the scaling direction (horizontal or vertical) based on the ScaleUpdateDetails and sets the previous scale accordingly.
Then calculates the zoom origin using the touch position and the chart bounds. If a pinch gesture is detected (indicated by two fingers), the _zoom method is used to apply the scaling effect.
class _CustomZoomPanBehavior extends ZoomPanBehavior {
_CustomZoomPanBehavior(this.xAxis, this.yAxis);
void _pinch(ScaleUpdateDetails details, Offset position) {
final double scale = details.scale;
final double hScale = details.horizontalScale;
final double vScale = details.verticalScale;
bool isHorizontal = false;
if ((scale - hScale).abs() < (scale - vScale).abs()) {
isHorizontal = true;
_previousScale ??= _toScaleValue(_previousXZoomFactor);
} else {
_previousScale ??= _toScaleValue(_previousYZoomFactor);
}
final double origin = _calculateOrigin(parentBox!.paintBounds, position, isHorizontal);
final double currentScale = _previousScale! * details.scale;
if (scale != 1 && details.pointerCount == 2) {
_zoom(origin, currentScale, isHorizontal);
}
}
double _toScaleValue(double zoomFactor) {
return max(1 / _minMax(zoomFactor, 0, 1), 1);
}
double _calculateOrigin(Rect bounds, Offset? manipulation, bool isHorizontal) {
if (manipulation == null) {
return 0.5;
}
double origin;
final double plotOffset = 0;
if (isHorizontal) {
origin = (manipulation.dx - plotOffset) / bounds.width;
} else {
origin = 1 - ((manipulation.dy - plotOffset) / bounds.height);
}
return origin;
}
}
Step 6: The _zoom method applies zoom functionality based on the user’s pinch gesture and cumulative zoom level. It calculates the current zoom factor and position, resetting them if no zoom is applied. Depending on the zoom direction, it adjusts the position using the specified origin point and applies the changes via zoomToSingleAxis.
class _CustomZoomPanBehavior extends ZoomPanBehavior {
_CustomZoomPanBehavior(this.xAxis, this.yAxis);
void _zoom(double originPoint, double cumulativeZoomLevel, bool isHorizontal) {
double currentZoomPosition;
double currentZoomFactor;
if (cumulativeZoomLevel == 1) {
currentZoomFactor = 1;
currentZoomPosition = 0;
} else if (isHorizontal) {
currentZoomFactor = _minMax(1 / cumulativeZoomLevel, 0, 1);
currentZoomPosition = _previousXZoomPosition +
((_previousXZoomFactor - currentZoomFactor) * originPoint);
} else {
currentZoomFactor = _minMax(1 / cumulativeZoomLevel, 0, 1);
currentZoomPosition = _previousYZoomPosition +
((_previousYZoomFactor - currentZoomFactor) * originPoint);
}
if (isHorizontal) {
zoomToSingleAxis(xAxis, currentZoomPosition, currentZoomFactor);
_previousXZoomFactor = currentZoomFactor;
_previousXZoomPosition = currentZoomPosition;
} else {
zoomToSingleAxis(yAxis, currentZoomPosition, currentZoomFactor);
_previousYZoomFactor = currentZoomFactor;
_previousYZoomPosition = currentZoomPosition;
}
}
double _minMax(double value, double min, double max) {
return value > max ? max : (value < min ? min : value);
}
}
Step 7: The provided methods manage gestures for zooming and panning in the chart. The handleScaleStart and handleScaleEnd resets the previous scale during pinch gestures, while handleScaleUpdate checks for two-finger pinches to invoke the _pinch function. The horizontal and vertical drag methods reset previous states and invoke _pan to update the position.
class CustomZoomPanBehavior extends ZoomPanBehavior {
CustomZoomPanBehavior(this.xAxis, this.yAxis);
CategoryAxis xAxis;
NumericAxis yAxis;
@override
void handleScaleStart(ScaleStartDetails details) {
_previousScale = null;
}
@override
void handleScaleUpdate(ScaleUpdateDetails details) {
if (details.pointerCount == 2 && enablePinching) {
_pinch(details, details.localFocalPoint);
}
}
@override
void handleScaleEnd(ScaleEndDetails details) {
_previousScale = null;
}
@override
void handleHorizontalDragStart(DragStartDetails details) {
_previousScale = null;
_previousMovedPosition = null;
}
@override
void handleHorizontalDragUpdate(DragUpdateDetails details) {
_pan(details.localPosition);
}
@override
void handleHorizontalDragEnd(DragEndDetails details) {
_previousScale = null;
_previousMovedPosition = null;
}
@override
void handleVerticalDragStart(DragStartDetails details) {
_previousScale = null;
_previousMovedPosition = null;
}
@override
void handleVerticalDragUpdate(DragUpdateDetails details) {
_pan(details.localPosition);
}
@override
void handleVerticalDragEnd(DragEndDetails details) {
_previousScale = null;
_previousMovedPosition = null;
}
}
Step 8: Initialize the _CustomZoomPanBehavior to the zoomPanBehavior property of the SfCartesianChart .
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
.....
zoomPanBehavior: _CustomZoomPanBehavior(xAxis, yAxis),
series: <CartesianSeries<_ChartData, String>>[
LineSeries<_ChartData, String>(
.....
By following these steps and the provided code snippet, you can successfully achieve directional zooming with customized zoomPanBehavior.
Conclusion
I hope you enjoyed learning about how to achieve directional zooming in Flutter Cartesian Chart.
You can refer to our Flutter CartesianChart feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter CartesianChart 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!
