Zooming and Panning in Flutter Charts

• note:
  The above mentioned properties are only applicable for SfCartesian types of charts.

Pinch zooming

Pinch zooming can be enabled by enablePinching property and defaults to false. Pinching can be performed by moving two fingers over the chart.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfCartesianChart(
                zoomPanBehavior: ZoomPanBehavior(
                  // Enables pinch zooming
                  enablePinching: true
                )
              )
            )
          )
        )
      );
    }

Double tap zooming

Double tap zooming can be enabled using enableDoubleTapZooming property. Defaults to false.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfCartesianChart(
                zoomPanBehavior: ZoomPanBehavior(
                  // Performs zooming on double tap
                  enableDoubleTapZooming: true
                )
              )
            )
          )
        )
      );
    }

Selection zooming

By specifying enableSelectionZooming property to true, you can long press and drag to select a range on the chart to be zoomed in.

Selection rectangle customization

You can customize the selection rectangle using the below properties.

• selectionRectBorderWidth – used to change the stroke width of the selection rectangle.
• selectionRectBorderColor – used to change the stroke color of the selection rectangle.
• selectionRectColor - used to change the background color of the selection rectangle.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfCartesianChart(
                zoomPanBehavior: ZoomPanBehavior(
                  enableSelectionZooming: true,
                  selectionRectBorderColor: Colors.red,
                  selectionRectBorderWidth: 1,
                  selectionRectColor: Colors.grey
                )
              )
            )
          )
        )
      );
    }

Following screenshot shows the zoomed area

Show axis tooltip

The axis tooltip on selection zooming can be enabled using enable property of crosshairTooltip. You can customize the appearance of axis tooltip using the following properties.

• enable - used to enable the axis tooltip.
• borderWidth – used to change the stroke width of the axis tooltip.
• borderColor – used to change the stroke color of the axis tooltip.
• format - by default, axis value will be displayed in the tooltip, and it can be customized by adding desired text as prefix or suffix.
• textStyle – used to change the text color, size, font family, fontStyle, and font weight.
• textStyle.color – used to change the color of the text.
• textStyle.fontFamily - used to change the font family for chart title.
• textStyle.fontStyle – used to change the font style for the chart title.
• textStyle.fontSize - used to change the font size for the chart title.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              child: SfCartesianChart(
                primaryXAxis: NumericAxis(
                  crosshairTooltip: InteractiveTooltip(
                  // Displays the axis tooltip
                  enable: true,
                  borderColor: Colors.red,
                  borderWidth: 2
                )
              ),
                primaryYAxis: NumericAxis(
                  crosshairTooltip: InteractiveTooltip(
                  enable: true,
                  borderColor: Colors.red,
                  borderWidth: 2
                )
              ),
                zoomPanBehavior: ZoomPanBehavior(
                  enableDoubleTapZooming: true,
                  enablePinching: true,
                  // Enables the selection zooming
                  enableSelectionZooming: true
                )
              )
            )
          )
        )
      );
    }

Auto interval on zooming

The enableAutoIntervalOnZooming property determines the update of axis internal based on the current visible range while zooming the chart. Default value of this property is true. If this property is false, the nice internal will not be calculated for new range after zoom in and actual interval will be sustained.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(
                  // Intervals will be fixed, not calculated automatically based on the visible range on zooming
                  enableAutoIntervalOnZooming: false
                )
              )
            )
          );
        }

Maximum zoom level

The maximumZoomLevel property defines the maximum zooming level. Zooming will be stopped after reaching this value. This defaults to null.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              child: SfCartesianChart(
                zoomPanBehavior: ZoomPanBehavior(
                  maximumZoomLevel: 3
                )
              )
            )
          )
        )
      );
    }

Also refer zooming, zoom start and zoom end events for customizing the zooming further.