# Zoom and pan on time > The interesting thing is ten minutes wide on a seven-day chart. - Canonical: https://patterns.konigi.com/dashboards/zoom-and-pan - Group: Interaction - Level: flow - Status: published - Updated: September 10, 2026 - Also called: drag to zoom, range brush, time navigation --- ## Problem There is a spike at some point in the last six hours. The viewer wants the ninety seconds around it. Doing that through a date picker means reading an approximate timestamp off an axis, converting it, and typing it twice. ## Solution Let the viewer draw the range on the chart. Drag across the region and the range becomes the selection; the whole page follows. Shneiderman lists zoom as its own task, distinct from filter, and the distinction is worth keeping: zoom changes the window on the same population, filter changes which population. Confusing the two is why some products zoom the axis without re-querying and end up showing an interpolated view of data they never fetched at that resolution. Two properties separate a usable implementation from an irritating one. **The whole page moves together.** Zooming one panel and leaving the others at six hours produces a dashboard whose panels disagree, which is worse than not zooming. The gesture has to update the shared range, which means zoom and the range picker are the same control with two interfaces, and they have to stay in sync in both directions. **Getting back is free.** Exploration means overshooting. Without a zoom-out and a history of previous ranges, every wrong drag costs a retype, and viewers stop drilling in as a result. Underneath both, the query has to change with the window. Zooming from six hours to ninety seconds should fetch finer data, not stretch coarse points. A panel that zooms without re-querying gives a magnified picture of an average, which looks like detail and contains none. ## Use when Any time-series page someone investigates with, especially where the interesting event is short relative to the default window. ## Don't use when The range is fixed by the report's meaning—a month-end view that can be zoomed produces a chart whose title no longer describes it. Also skip it on a wallboard, where there is no pointer and an accidental zoom persists until someone notices. ## Trade-offs Drag-to-zoom collides with every other drag gesture: selecting a region to annotate, brushing to cross-filter, and panning all want the same input, so products end up with modifier keys nobody discovers. Zoom state is easy to lose and easy to over-persist—a range someone zoomed into during an incident is still there next morning if it was saved. Fine zoom levels can outrun retention or resolution, so the viewer keeps zooming and the data gets less precise rather than more. And on touch, pinch conflicts with page scroll in a way no dashboard has convincingly solved. ## Checklist - Does dragging on one panel change the range for the whole page? - Does the time-range picker update to reflect a zoom, and vice versa? - Is there a one-action zoom out, and a history of previous ranges? - Does the query re-run at a finer interval, or is coarse data being stretched? - What is the finest range this data supports, and what happens past it? - How does drag-to-zoom coexist with any other drag gesture on the same chart? - Does the zoomed range go into the URL? - Is an accidental zoom easy to notice and easy to undo? - On touch, what is the gesture, and does it fight the page scroll? - Does a zoomed range persist into a saved view, and should it? ## Compare **Grafana** treats a drag on any panel as setting the dashboard's time range, so zoom and the picker are one piece of state, and the zoomed window lands in the URL where it can be shared. **Netdata** goes further and synchronises pan and zoom across every chart on the page continuously, which at per-second resolution turns dozens of charts into one scrubbable instrument. **Honeycomb** folds the gesture into the query: narrowing the window is editing what you asked for, so there is no separate zoom state that can drift away from the result. **Datadog** keeps the drag for range selection and hangs actions off the selection, so the same gesture that zooms can also export or annotate the window. ## Related Time-range picker is the same control in typed form, and the two must agree. Cross-filter is the other thing a drag can mean, and the conflict has to be resolved deliberately. Hover detail is how the viewer finds the moment worth zooming to. Time series is the chart underneath. Annotation is what usually explains whatever they zoomed in on. ## Examples ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Examples / Node graph panel** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, sparse density, dark theme, desktop-web. Seven services, and the panel is already too small to hold them. Three nodes are cut in half by the right edge and at least one more is somewhere past it, which is the force layout doing what force layouts do to a graph with more nodes than room. That is the hard part of this pattern and it is visible here at a scale of seven. Each node also carries four things at once: a number, a second number, and a ring split between a green arc and a red one. The legend names all four. A topology view where every node reports four measures is a view you read node by node, which is the opposite of what a map is for —one derived state per node is scannable in a second and drills into the rest. Here almost every ring is mostly red, so the channel that could have carried that state is saturated and distinguishes nothing. Hotspots in this capture: - [Service map](https://patterns.konigi.com/dashboards/service-map) — Nodes for services, edges for calls, both from instrumentation rather than from a diagram. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — One node: two numbers inside and a success/error ring around it. Four measures, no verdict. - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) — Four series named for a graph with seven nodes, which is the legend doing more work than the map. - [Zoom and pan on time](https://patterns.konigi.com/dashboards/zoom-and-pan) *(this pattern)* — The only route to the nodes pushed off the right edge, and it doesn't move the rest of the page. ## Related patterns - [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) — Every question about a metric starts with 'over what window', and the control has to be fast for the common windows. - [Cross-filter](https://patterns.konigi.com/dashboards/cross-filter) — Selecting something in one panel should narrow every other panel to it. - [Hover detail](https://patterns.konigi.com/dashboards/hover-detail) — The chart shows shape; the viewer needs the exact value at one moment without leaving it. - [Time series](https://patterns.konigi.com/dashboards/time-series) — The viewer needs to see how a value changed over time and spot the moment it changed. - [Annotation](https://patterns.konigi.com/dashboards/annotation) — A change in the line has a cause, and the viewer shouldn't have to go find it elsewhere. ## Sources - [Shneiderman, The Eyes Have It—A Task by Data Type Taxonomy](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf) - [Grafana, Use dashboards (time range controls)](https://grafana.com/docs/grafana/latest/visualizations/dashboards/use-dashboards/) - [Bach et al., Dashboard Design Patterns](https://dashboarddesignpatterns.github.io/patterns.html) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.