# Time-range picker

> Every question about a metric starts with 'over what window', and the control has to be fast for the common windows.

- Canonical: https://patterns.konigi.com/dashboards/time-range-picker
- Group: Meta information
- Level: implementation
- Status: published
- Updated: September 10, 2026
- Also called: date range, relative time, quick ranges

---

## Problem

Every number on a dashboard is a number over some window. The window is the first thing an investigator changes and the last thing a casual reader checks, so it has to be both fast to change and impossible to misread.

## Solution

Three kinds of range, and a product needs all three for different reasons.

**Relative** is what people use. Last 15 minutes, last 6 hours, last 7 days. Grafana lets you type `13h` into the picker and get the last thirteen hours, which is the right level of friction for the most common action on the page.

**Absolute** is what people share. A specific start and end, pinned.

**Semi-relative** is the one that gets skipped and shouldn't: an absolute start with `now` as the end. That's the shape of "since the deploy" and "since the incident started", which is most of what anyone actually wants during an investigation.

The detail that decides whether the control is any good is what happens to the range when it leaves the page. Grafana puts `from`, `to` and `timezone` in the URL, so a link carries the window. That also creates the trap: a link containing `from=now-6h` describes a different six hours to whoever opens it tomorrow. Paste a relative range into an incident writeup and within a day it points at nothing in particular. The fix is a product decision, not a user one—pin to absolute when copying a link, or say clearly that you haven't.

Then timezone. The dashboard has one, the browser has one, and the incident happened in UTC. Grafana treats timezone as both a dashboard setting and a URL parameter, which is the honest arrangement, because two people reading the same chart in different offices are otherwise reading different charts.

## Use when

Any view built on time series, which is nearly all of them. The control belongs where the eye lands first, usually top right, and its current value has to be readable without opening it.

## Don't use when

The view answers a fixed question over a fixed window. A month-end report with a range picker invites someone to change it and get an answer that no longer matches the title above it.

## Trade-offs

A global picker makes every panel agree, which is what you want during an incident and wrong for a page that mixes a live rate with a year-over-year trend. Per-panel overrides fix that and quietly destroy the guarantee that two panels on one screen cover the same period. Wide ranges silently change the aggregation underneath, so the same panel at 1h and 30d is showing different maths under one title. And quick-range lists grow: eleven options where four would do turns a one-second decision into a menu.

## Checklist

- Is the current range readable without opening the control?
- Are the common windows one click away, and are they the windows this audience actually uses?
- Can someone express "since 09:40 today" without doing arithmetic?
- Does the range go into the URL, and does a copied link mean the same thing tomorrow?
- Which timezone is this, and does the control say so?
- Does changing the range change the aggregation interval, and can the viewer tell?
- Do all panels share this range, and if any override it, is that visible on the panel?
- What happens to a relative range on a wallboard nobody reloads?
- Does zooming on a chart update this control, and does the control update the chart?
- Is there a way back to the previous range after an accidental change?

## Compare

**Grafana** carries the fullest version of the control—relative, absolute, semi-relative, typed shorthand, timezone, per-panel shift—and pays for it with a picker that takes a moment to learn and a URL that can disagree with itself. **Honeycomb** folds the range into the query rather than floating it above the page, so the window is part of what you asked rather than ambient state that can drift out from under a saved result. **Sentry** scopes time to the thing being examined, so an issue carries first-seen and last-seen and the range is mostly a filter on a list rather than an axis on a chart. **Netdata** treats dragging on any chart as the range control itself and syncs every other chart on the page to match, which removes the picker as a separate thing to find.

## Related

Zoom and pan is the same control operated directly on the chart, and the two have to stay in sync. Compare periods is what happens when one window stops being enough. Freshness indicator answers how old the newest point in this window is. Saved view is how a useful range stops being something you retype. Template variable is the other piece of dashboard state that belongs in the URL for the same reasons.

## Examples

### GitHub (GitHub, Inc.)

The contribution graph is the calendar heatmap every other product copied, and its five-step bucketing is the deliberate trade that made it legible.

**Profile / contribution graph** — captured September 11, 2026, github.com, signed out (public profile). public, medium density, light theme, desktop-web.

The calendar heatmap everyone else copied, and a good demonstration of what it trades away. 3,703 contributions across 365 days is about ten a day, and the scale has five steps, so almost every cell here lands in the middle two and the year reads as one flat field of mid-green. A day with five commits and a day with twenty-five are the same colour. That is the deliberate choice—coarse buckets make the rhythm readable and make any individual day approximate—but on a profile this active there is no rhythm left to read either, because the bucketing has flattened the variation it was meant to reveal. The layout still earns its place: weeks as columns and weekdays as rows means a weekend effect would show as two pale rows across the full width, and here it doesn't, which tells you something true about this person's week. The panel beside it is worse off. It is a four-axis diagram of code review, issues, pull requests and commits, and with 100% commits it collapses to a single straight line.

Hotspots in this capture:

- [Calendar heatmap](https://patterns.konigi.com/dashboards/calendar-heatmap) — Fifty-three columns of weeks, seven rows of weekdays, and only Mon, Wed and Fri labelled to save the space.
- [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — The total sits above the grid, so the cells have a denominator. Most calendar heatmaps omit this.
- [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — Five discrete steps rather than a continuous ramp, which is why ten commits and thirty share a colour.
- [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) *(this pattern)* — Sixteen years as a list. No arbitrary range, no relative window—the only unit on offer is a calendar year.

### 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.

**Demo / Annotations** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web.

The header on this dashboard says annotations "appear as vertical lines and icons on all graph panels—events visible at a glance", and the panel directly beneath it is the counter-example. Roughly fifty red dashed lines across twenty-four hours, evenly spaced, and the request-rate series behind them is genuinely hard to follow: the fence is denser than the data. Every one of those lines is a real event correctly recorded, and the tag filter in the top left is switched on, so this is the filtered view. That is the whole problem with automatic annotations—they are complete and they never stop arriving, and completeness at this cadence is indistinguishable from noise. The list panel at the bottom is what makes them usable again: the same events, four of them, timestamped and tagged, in a form you can read.

Hotspots in this capture:

- [Annotation](https://patterns.konigi.com/dashboards/annotation) — Fifty deploy markers on a 24-hour chart. Each one is correct and together they are a picket fence.
- [Annotation](https://patterns.konigi.com/dashboards/annotation) — The same events as a list, tagged release and timestamped. Readable in a way the chart is not.
- [Filter bar](https://patterns.konigi.com/dashboards/filter-bar) — The tag filter that makes this survivable, already on. The chart above is the filtered version.
- [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) *(this pattern)* — Twenty-four hours, which is what sets the marker density. An hour here would be three lines.

### Honeycomb

Query-first; heatmaps and BubbleUp replace the dashboard-of-panels model with draw-a-region cross-filtering.

**Query / HEATMAP(duration_ms)** — captured September 10, 2026, Honeycomb sandbox, public dataset (signed out; no version string exposed). analytical, medium density, light theme, desktop-web.

My heatmap entry cites Honeycomb as the argument for log-scale y-buckets, so it's worth recording that this is Honeycomb's own sandbox rendering the same chart on a linear axis. The result is the failure the argument warns about: the ticks run 0 to 3500 evenly, the dense band where almost every request actually lives is squashed into the bottom sixth of the panel, and the top half is mostly empty. What survives anyway is the thing a percentile can't tell you. The solid band under a second doesn't move across the whole window, while from about 07:00 a separate purple tail climbs to 3000ms and keeps going. Two populations, one of them fine and one of them deteriorating. A p95 line over this data would have risen and said nothing about which. The other thing worth stealing: the footer reports elapsed query time and that it examined 11,710,335 rows, so the panel tells you what it cost and how much it looked at. Cookie banner and a no-signup onboarding modal were removed to take the shot; nothing of the product's own UI was.

Hotspots in this capture:

- [Heatmap](https://patterns.konigi.com/dashboards/heatmap) — Linear y-axis, so the band holding most requests is six percent of the panel height and the empty top half gets the rest.
- [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — No panel to configure—the query is the page. WHERE trace.parent_id does-not-exist is how you say root spans only.
- [Tabs as genres](https://patterns.konigi.com/dashboards/tabs-as-genres) — Five readings of one result: overview, BubbleUp, correlations, traces, raw. Each tab is a different question, not a different subject.
- [Search across panels](https://patterns.konigi.com/dashboards/search-across-panels) — The schema is the navigation, and it opens with a filter box rather than a tree you're expected to browse.
- [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) *(this pattern)* — Absolute, with the granularity stated beside it, and arrows that step to the previous window rather than retyping it.
- [Data source badge](https://patterns.konigi.com/dashboards/data-source-badge) — Elapsed query time and 11,710,335 rows examined. The panel reporting its own cost and scope, which almost nothing else does.
- [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — When data last arrived, not when the page last ran. The one of the three ages that actually matters.

### Kibana (Elastic)

Query-first rather than panel-first: the search bar is the primary control and the charts are downstream of it, which inverts Grafana's arrangement.

**Discover / filebeat logs** — captured September 10, 2026, Elastic demo environment (guest session; no version string exposed). analytical, dense density, light theme, desktop-web.

Two panes: 315 fields down the left, 13,637 documents on the right, and a volume histogram over both. The left pane is the good half—it opens with a search box rather than a tree, which is the only sane way to navigate that many fields. The right pane is where it falls over. The documents table ships with two columns, a timestamp and "Summary", and Summary is every field on the record concatenated into one cell: agent.ephemeral_id, agent.id, agent.name, agent.type, agent.version, cloud.account.id, cloud.availability_zone, and on for three wrapped lines per row. It is technically complete and it cannot be scanned, so the first thing anyone does here is pick columns—which is to say the default view's job is to make you configure it. Underneath, the pager reads 100 rows per page across 137 pages, and the sort control sits above a table showing the first of them.

Hotspots in this capture:

- [Two-pane list and detail](https://patterns.konigi.com/dashboards/two-pane-list-detail) — Fields on the left, records on the right, both on screen at once. The oldest working shape for a queue there is.
- [Detail on demand](https://patterns.konigi.com/dashboards/detail-on-demand) — An expander on every row. Inline rather than a side panel, so it pushes the rest of the list down.
- [Data table](https://patterns.konigi.com/dashboards/data-table) — One column called Summary holding every field on the record. Complete, and unreadable at a glance.
- [Search across panels](https://patterns.konigi.com/dashboards/search-across-panels) — 315 fields, so the sidebar opens with a filter box. Past a certain count a tree is a filing system nobody browses.
- [Filter bar](https://patterns.konigi.com/dashboards/filter-bar) — A query language in the bar rather than chips. Powerful, and it hides what's applied from anyone who didn't type it.
- [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) *(this pattern)* — Relative by default, with the refresh control beside it rather than buried in a settings menu.
- [Histogram and distribution](https://patterns.konigi.com/dashboards/histogram) — Volume over the window at a 30-second auto interval. The final bar is the bucket still filling, and it always reads low.

## Related patterns

- [Zoom and pan on time](https://patterns.konigi.com/dashboards/zoom-and-pan) — The interesting thing is ten minutes wide on a seven-day chart.
- [Compare periods](https://patterns.konigi.com/dashboards/compare-periods) — Today's line means nothing without last week's line under it.
- [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — The viewer is about to act on a number and doesn't know how old it is.
- [Saved view](https://patterns.konigi.com/dashboards/saved-view) — The team re-selects the same five filters every morning.
- [Template variable](https://patterns.konigi.com/dashboards/template-variable) — One dashboard layout is right for fifty services, forty hosts, or three environments, and nobody should build it fifty times.

## Sources

- [Grafana, Use dashboards (time range controls and URL parameters)](https://grafana.com/docs/grafana/latest/visualizations/dashboards/use-dashboards/)
- [Grafana, How to use semi-relative time ranges](https://grafana.com/blog/2022/02/03/pro-tip-how-to-use-semi-relative-time-ranges-in-grafana/)
- [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.