Zoom Tool bar in case of select zoom.
Use case: As per current implementation.
The scrolling gesture is prohibited in case of Zooming or panning enabled with modes other than the selection zooming
https://stackoverflow.com/questions/66968759/flutter-how-can-i-enable-scrolling-for-syncfusion-chart-while-also-having-panan
I cant avoid scrolling of my app as we have multiple charts. but pinching and panning gives problem. As a work around i tried select zoom and panning enabled and rest all disabled. But here problem is Zoom Out.
Is there a way i can zoom out ?
Can you provide tool bar for zoom same as sfMap ?
Hi,
We have validated your query, and you can achieve your requirement by using the zoomPanBehavior in the SfCartesianChart. By using this, you can zoom in and zoom out on the specified area without tapping on the SfCartesianChart. We have prepared a sample with three TextButton which is placed in a Row. When the first button is clicked, it will zoom in to the plot area using the zoomIn property. When the second button is clicked, it will zoom out to the previous position using the zoomOut property. And when the third button is clicked, it will return to the initial position after zooming using the reset property. We have shared a code snippet and sample for your reference. Please let us know if you need any further assistance.
Sample Browser Link,
Code snippet:
|
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart';
void main() { return runApp(MyApp()); }
class MyApp extends StatefulWidget { MyApp({Key? key}) : super(key: key);
@override _MyAppState createState() => _MyAppState(); }
class _MyAppState extends State<MyApp> { List<SalesData> data1 = [ SalesData(DateTime(2000, 01, 01), 15), SalesData(DateTime(2000, 02, 06), 12), SalesData(DateTime(2000, 03, 14), 24), SalesData(DateTime(2000, 04, 19), 29), SalesData(DateTime(2000, 05, 25), 31), SalesData(DateTime(2000, 06, 30), 39), ];
late ZoomPanBehavior _zoomPanBehavior;
@override void initState() { super.initState(); _zoomPanBehavior = ZoomPanBehavior( enableDoubleTapZooming: true, enablePanning: true, enablePinching: true, enableSelectionZooming: true, ); }
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Column( children: [ SfCartesianChart( zoomPanBehavior: _zoomPanBehavior, primaryXAxis: DateTimeAxis(), primaryYAxis: NumericAxis(), series: <ChartSeries<SalesData, DateTime>>[ LineSeries( animationDuration: 0, color: Colors.red, dataSource: data1, xValueMapper: (SalesData value, _) => value.date, yValueMapper: (SalesData value, _) => value.sales, ), ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ TextButton( onPressed: () { _zoomPanBehavior.zoomIn(); }, child: const Text('Zoom In'), ), TextButton( onPressed: () { _zoomPanBehavior.zoomOut(); }, child: const Text('Zoom Out'), ), TextButton( onPressed: () { _zoomPanBehavior.reset(); }, child: const Text('Reset'), ), ], ), ], ), ), ); } }
class SalesData { SalesData(this.date, this.sales);
final DateTime date; final double sales; } |
Regards,
Lokesh P.
Attachment: chart_zoom_toolbar_185522_c1c575bc.zip
Thank you for your reply. We implemented this. but this seems external implementation. It will be great if we get it as a option in ZoomPanBehaviour. For example add property enableToolbar. If we set it to true chart will show 3 buttons for zoom/zoomout/reset. This is extremely useful where we want to scroll through multiple charts which has zoom. enabled.
ZoomPanBehavior(
enableDoubleTapZooming: true,
enableToolbar: true,
enablePanning: true,
enablePinching: true,
enableSelectionZooming: true,
);
sfMap already has this option in zoomPanBehaviour. Can we add similar option for cartesian charts as well ?
Hi,
We would like to let you know that currently we don’t have support for ‘Toolbar option support for zooming in the cartesian chart ‘. However, we have considered your requirement as a new feature and logged feature request for it in our feedback portal.
We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.
Regards,
Lokesh P.
- 3 Replies
- 2 Participants
-
DG Dhananjay Ghongane
- Nov 21, 2023 04:29 PM UTC
- Nov 24, 2023 02:01 PM UTC
