Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/highcharts/highcharts/llms.txt

Use this file to discover all available pages before exploring further.

​
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

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

{
  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]
  }]
});