Zooming and Panning

Enable users to explore charts in detail with zooming and panning functionality

Zooming and Panning

Zooming and panning allow users to explore chart data in greater detail by focusing on specific regions of the chart.

Zoom Types

Highcharts supports several zoom types that can be configured on the chart level.

Basic Zoom Configuration

X-Axis Zoom

Highcharts.chart('container', {
  chart: {
    zoomType: 'x'
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
  }]
});

Zoom Methods

Selection-Based Zoom

The default zoom method where users drag to select an area:

{
  chart: {
    zoomType: 'xy',
    // Users click and drag to create a zoom rectangle
    zooming: {
      type: 'xy'
    }
  }
}

Mouse Wheel Zoom

Enable zooming with the mouse wheel:

import Highcharts from 'highcharts';
import MouseWheelZoom from 'highcharts/modules/mouse-wheel-zoom';

MouseWheelZoom(Highcharts);

Highcharts.chart('container', {
  chart: {
    zooming: {
      mouseWheel: {
        enabled: true,
        sensitivity: 1.1,
        type: 'x'  // or 'y', 'xy'
      }
    }
  },
  series: [{
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  }]
});

Pinch to Zoom

On touch devices, pinch gestures enable zooming:

{
  chart: {
    zooming: {
      pinchType: 'x',  // Enable pinch zoom on touch devices
      type: 'x'        // Regular zoom for desktop
    }
  }
}

Single Touch Zoom

Enable zoom by dragging with a single finger:

{
  chart: {
    zoomBySingleTouch: true,
    zoomType: 'x'
  }
}

Reset Zoom Button

When users zoom in, a reset button appears to return to the original view.

Basic Reset Button

{
  chart: {
    zoomType: 'xy',
    resetZoomButton: {
      theme: {
        fill: 'white',
        stroke: 'silver',
        r: 3,
        states: {
          hover: {
            fill: '#EAEAEA',
            style: {
              cursor: 'pointer'
            }
          }
        }
      }
    }
  }
}

Custom Reset Button Position

Relative to Plot Area

{
  chart: {
    zoomType: 'xy',
    resetZoomButton: {
      position: {
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 10
      },
      relativeTo: 'plot'
    }
  }
}

Custom Reset Button Theme

{
  chart: {
    zoomType: 'xy',
    resetZoomButton: {
      theme: {
        fill: '#4CAF50',
        stroke: '#2E7D32',
        r: 5,
        style: {
          color: 'white',
          fontWeight: 'bold'
        },
        states: {
          hover: {
            fill: '#66BB6A'
          }
        }
      }
    }
  }
}

Panning

Panning allows users to move around a zoomed chart without zooming out.

Enable Panning

1. Basic Panning

   Enable panning on one or both axes:

   {
     chart: {
       panning: {
         enabled: true,
         type: 'xy'  // Pan on both axes
       },
       zooming: {
         type: 'xy'
       }
     }
   }
   
2. Pan Key

   Require a modifier key for panning:

   {
     chart: {
       panKey: 'shift',  // Hold shift to pan
       panning: {
         enabled: true,
         type: 'xy'
       }
     }
   }
   

   Available keys: 'shift', 'ctrl', 'alt', 'meta'

3. Panning Type

   Control which axes can be panned:

   {
     chart: {
       panning: {
         enabled: true,
         type: 'x'  // Pan only horizontally
       }
     }
   }
   

Programmatic Zooming

Zoom charts programmatically using API methods:

Zoom to Range

const chart = Highcharts.chart('container', {
  chart: {
    zoomType: 'x'
  },
  xAxis: {
    min: 0,
    max: 100
  },
  series: [{
    data: [/* data */]
  }]
});

// Zoom to specific range
chart.xAxis[0].setExtremes(20, 60);

// With animation
chart.xAxis[0].setExtremes(20, 60, true, {
  duration: 500,
  easing: 'easeOutBounce'
});

Reset Zoom Programmatically

// Reset zoom on all axes
chart.zoomOut();

// Or reset specific axis
chart.xAxis[0].setExtremes(null, null);

Zoom on Chart Events

{
  chart: {
    events: {
      selection: function (event) {
        // Custom behavior on zoom selection
        if (event.xAxis) {
          console.log('Zoomed to:', 
            event.xAxis[0].min, 
            event.xAxis[0].max
          );
        }
        // Return false to prevent default zoom
        // return false;
      }
    }
  }
}

Boost Module for Large Datasets

For charts with large datasets, use the Boost module to maintain zoom performance:

import Highcharts from 'highcharts';
import Boost from 'highcharts/modules/boost';

Boost(Highcharts);

Highcharts.chart('container', {
  boost: {
    useGPUTranslations: true,
    usePreallocated: true
  },
  chart: {
    zoomType: 'x'
  },
  series: [{
    data: largeDataArray,  // Thousands or millions of points
    boostThreshold: 5000   // Enable boost for > 5000 points
  }]
});

Zooming on Different Chart Types

Polar Charts

{
  chart: {
    polar: true,
    zoomType: undefined  // Zooming not supported on polar charts
  }
}

Non-Cartesian Series

For pie charts and other non-cartesian types, use the NonCartesianSeriesZoom module:

import NonCartesianSeriesZoom from 'highcharts/modules/non-cartesian-series-zoom';

NonCartesianSeriesZoom(Highcharts);

Advanced Zoom Features

Scrollbar for Navigation

Combine zooming with a scrollbar:

{
  scrollbar: {
    enabled: true,
    barBackgroundColor: '#808083',
    barBorderRadius: 7,
    barBorderWidth: 0,
    buttonBackgroundColor: '#606063',
    buttonBorderWidth: 0,
    buttonArrowColor: '#CCC',
    buttonBorderRadius: 7,
    rifleColor: '#FFF',
    trackBackgroundColor: '#404043',
    trackBorderWidth: 1,
    trackBorderRadius: 8,
    trackBorderColor: '#404043'
  },
  xAxis: {
    scrollbar: {
      enabled: true
    },
    min: 0,
    max: 10  // Show only 10 points at a time
  }
}

Min/Max Zoom Range

Set limits on how far users can zoom:

{
  xAxis: {
    minRange: 5,  // Minimum range that can be displayed
    maxZoom: 100  // Deprecated - use minRange instead
  }
}

Zoom Animation

{
  chart: {
    animation: {
      duration: 1000,
      easing: 'easeOutBounce'
    },
    zoomType: 'x'
  }
}

Accessibility

Ensure zoom features are accessible:

{
  accessibility: {
    screenReaderSection: {
      beforeChartFormat: '<div>Use arrow keys to navigate chart. ' +
        'Press + or - to zoom in or out.</div>'
    },
    keyboardNavigation: {
      enabled: true
    }
  },
  chart: {
    zoomType: 'xy'
  }
}

Best Practices

Zoom Performance Tips

• Use the Boost module for datasets with > 1000 points
• Enable useGPUTranslations for better performance
• Consider using turboThreshold to optimize large datasets
• Use pointStart and pointInterval instead of explicit x values

Important Considerations

• Zooming is not supported on all chart types (e.g., pie charts)
• Mobile devices may require specific touch configurations
• Consider showing instructions for zoom controls
• Test zoom behavior on different screen sizes
• Pan key modifiers may not work on all operating systems

Complete Example

Highcharts.chart('container', {
  chart: {
    type: 'line',
    zooming: {
      type: 'xy',
      mouseWheel: {
        enabled: true,
        sensitivity: 1.1
      },
      pinchType: 'xy'
    },
    panning: {
      enabled: true,
      type: 'xy'
    },
    panKey: 'shift',
    resetZoomButton: {
      position: {
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 10
      },
      relativeTo: 'plot'
    }
  },
  title: {
    text: 'Zoom and Pan Demo'
  },
  subtitle: {
    text: 'Drag to zoom, Shift+drag to pan, Mouse wheel to zoom'
  },
  xAxis: {
    minRange: 5
  },
  series: [{
    name: 'Data',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 
           216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
  }]
});

Related Resources

• Accessibility Features
• Export Functionality
• Tooltips and Data Labels