Zooming and Panning in Flutter Cartesian Charts (SfCartesianChart)

13 Aug 202116 minutes to read

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
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
          _zoomPanBehavior = ZoomPanBehavior(
                      // Enables pinch zooming
                      enablePinching: true
                    );
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  height: 300, 
                  width: 350, 
                  child: SfCartesianChart(
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    Double tap zooming

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

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
         _zoomPanBehavior = ZoomPanBehavior(
                      // Performs zooming on double tap
                      enableDoubleTapZooming: true
                    );
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  height: 300, 
                  width: 350, 
                  child: SfCartesianChart(
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    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.

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

    Selection Zooming

    Following screenshot shows the zoomed area

    Selection Zooming

    Show axis tooltip

    The axis tooltip on selection zooming can be enabled using enable property of InteractiveTooltip. 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
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
         _zoomPanBehavior = ZoomPanBehavior(
                      enableDoubleTapZooming: true,
                      enablePinching: true,
                      // Enables the selection zooming
                      enableSelectionZooming: true
                    );
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCartesianChart(
                    primaryXAxis: NumericAxis(
                      interactiveTooltip: InteractiveTooltip(
                      // Displays the x-axis tooltip
                      enable: true,
                      borderColor: Colors.red,
                      borderWidth: 2
                    )
                  ),
                    primaryYAxis: NumericAxis(
                      interactiveTooltip: InteractiveTooltip(
                      // Displays the y-axis tooltip
                      enable: true,
                      borderColor: Colors.red,
                      borderWidth: 2
                    )
                  ),
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    Mouse wheel zooming

    The enableMouseWheelZooming can be performed by rolling the mouse wheel up or down. The place where the cursor is hovering gets zoomed in or out according to the mouse wheel rolling up or down.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
         _zoomPanBehavior = ZoomPanBehavior(
                enableMouseWheelZooming : true);
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  height: 300, 
                  width: 350, 
                  child: SfCartesianChart(
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    Auto interval on zooming

    The enableAutoIntervalOnZooming property determines the update of axis interval based on the current visible range while zooming and panning the chart. Default value of this property is true. If this property is false, the nice interval 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 and panning
                      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
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
         _zoomPanBehavior = ZoomPanBehavior(
                      maximumZoomLevel: 3);
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCartesianChart(
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    Panning

    Panning can be performed on a zoomed axis. You can pan the zoomed chart with enablePanning property. Defaults to false.

    If zoom mode is set to zoomMode.x means you can only pan to the horizontal direction, in case the zoomMode.y means you can pan only to the vertical direction and zoomMode.xy means you can pan to both horizontal and vertical directions on the chart.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
        
        @override
        void initState(){
         _zoomPanBehavior = ZoomPanBehavior(
                        enablePinching: true,
                        zoomMode: zoomMode.x,
                        enablePanning: true,
                    );
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCartesianChart(
                    zoomPanBehavior: _zoomPanBehavior
                  )
                )
              )
            )
          );
        }

    Panning

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

    See Also