Chart.js Zoom and Pan — Interactive Viewport Control

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Chart.js Zoom and Pan. We cover key concepts, practical examples, and best practices to help you master this topic.

Chart.js zoom plugin adds interactive zoom and pan capabilities using drag, scroll wheel, and touch gestures for exploring dense data.

What You'll Learn

By the end of this guide, you will enable zoom and pan with chartjs-plugin-zoom, configure zoom modes (x, y, xy), set zoom limits and speed, reset zoom programmatically, and combine zoom with range selection.

Basic Zoom Config

Chart.register(ZoomPlugin);

options: {
    plugins: {
        zoom: {
            zoom: {
                wheel: { enabled: true },
                drag: { enabled: true },
                pinch: { enabled: true },
                mode: 'xy'
            },
            pan: {
                enabled: true,
                mode: 'xy'
            }
        }
    }
}

Zoom Limits

options: {
    plugins: {
        zoom: {
            zoom: {
                wheel: { enabled: true, speed: 0.05 },
                drag: { enabled: false },
                scaleMin: 0.5,
                scaleMax: 10
            }
        }
    }
}

Programmatic Reset

document.getElementById('reset').onclick = function() {
    chart.resetZoom();
};

Range Selection with Zoom

options: {
    plugins: {
        zoom: {
            zoom: {
                drag: {
                    enabled: true,
                    backgroundColor: 'rgba(78,205,196,0.1)',
                    borderColor: '#4ecdc4',
                    borderWidth: 1
                }
            },
            onZoomComplete: function(chart) {
                console.log('Zoomed range:', chart.scales.x.min, chart.scales.x.max);
            }
        }
    }
}

Common Mistakes

1. Not Registering the Plugin

Chart.register(ZoomPlugin) is required. Missing it causes zoom to have no effect.

2. Zoom Mode Mismatch

With mode: 'x' on a chart that needs both axes, users cannot zoom vertically.

Drag zoom and tooltip both use pointer events. Disable tooltip during zoom or set drag mode to 'x'.

4. No Reset Button

Once zoomed in, users may not know how to reset. Always provide a reset button.

5. Zoom on Pie Charts

Zoom does not apply to polar chart types (pie, doughnut, polarArea, radar). It only works on Cartesian charts.

Practice Questions

Q1: What plugin enables zoom? A: chartjs-plugin-zoom.

Q2: What zoom modes are available? A: 'x', 'y', 'xy' — controlling which axes zoom.

Q3: How do you limit zoom extent? A: Set scaleMin and scaleMax on the zoom config.

Q4: How do you reset zoom programmatically? A: Call chart.resetZoom().

Q5: How do you enable pinch zoom on mobile? A: Set zoom.pinch.enabled: true.

Challenge: Build a chart with drag-to-zoom and range selection highlight. When zoomed, show the current visible range in a div below the chart.

FAQ

Does zoom work with streaming charts?

Yes. Zoom works with realtime scale but resets the scroll window. Combine carefully.

How do I disable zoom after a certain level?

Set onZoom handler that returns false to cancel zoom beyond desired extent.

Can I zoom into a specific region programmatically?

Yes. Use chart.zoomScale with a range: chart.zoomScale('x', { min: 10, max: 20 }, 'default').

Does zoom affect legend interaction?

No. Legend toggling is independent of zoom state.

How do I save and restore zoom state?

Save chart.scales.x.min and .max before zoom. Restore with chart.zoomScale.

Try It Yourself

Build a chart with drag-to-zoom and wheel zoom.

<!DOCTYPE html>
<html>
<head>
    <title>Zoom and Pan Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Zoom and Pan</h2>
<p>Scroll to zoom, drag to pan, click reset to restore</p>
<button onclick="chart.resetZoom()">Reset Zoom</button>
<canvas id="zoomChart" width="700" height="400"></canvas>
<script>
Chart.register(ZoomPlugin);

var ctx = document.getElementById('zoomChart');
var chart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Random Data',
            data: Array.from({ length: 200 }, function() {
                return { x: Math.random() * 100, y: Math.random() * 100 };
            }),
            backgroundColor: '#4ecdc4',
            radius: 3
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: { min: 0, max: 100 },
            y: { min: 0, max: 100 }
        },
        plugins: {
            zoom: {
                zoom: {
                    wheel: { enabled: true, speed: 0.05 },
                    drag: { enabled: true, backgroundColor: 'rgba(78,205,196,0.08)', borderColor: '#4ecdc4' },
                    pinch: { enabled: true },
                    mode: 'xy'
                },
                pan: {
                    enabled: true,
                    mode: 'xy'
                }
            }
        }
    }
});
</script>
</body>
</html>

What's Next

Make your charts accessible.

Accessibility — Making charts accessible. Project — Full dashboard project.

← Previous Chart.js Streaming — Real-Time Data Visualization Next → Chart.js Accessibility — Making Charts Usable for Everyone

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Chartjs