Chart axis rendering and auto granularity improvements
Demo by @brandon-pereira
A batch of quality of life improvements to charts, contributed by @arj22. Thank you for the fixes!
Duration labels could previously get clipped because they were wider than the space available on the axis. Charts now use the same compact duration formatter as heatmaps, so
7.38min becomes 7.4m and fits within the available space. The CLI’s hdx chart command uses the same formatting.
Axis labels also preserve more precision. Previously, values such as 1050 and 1450 could both appear as 1k, making it difficult to distinguish nearby values. The formatter now uses the highest precision that fits, up to two decimal places, and removes trailing zeros. Those values now appear as 1.05k and 1.45k, without making labels wider.
Y-axis ticks now stay evenly spaced on shorter charts. Previously, Recharts could drop individual ticks to prevent labels from overlapping, leaving an uneven sequence such as 0, 300, 1k. Charts now provide evenly spaced tick candidates while keeping the same number of ticks.
There’s also a new Minimum Auto Granularity setting for metrics sources, available under Team Settings → Sources. Previously, auto granularity chose a bucket size based only on the selected time range. For a metric scraped once a minute, a short time range could produce 30-second buckets, alternating between values and gaps and making a flat metric look like a wave.
Setting the minimum to the scrape interval prevents those gaps. It works like Grafana’s per-datasource minimum interval and only applies when granularity is set to Auto. Tiles with an explicit granularity keep their existing behaviour.
The minimum currently applies to dashboards and tiles. Alerts, the external API, the CLI and MCP query tools don’t yet use this setting.
Related PRs: #3148 Route duration axis ticks through the compact formatter, #3158 Keep duration axis ticks compact in terminal charts, #3162 Stop discarding chart axis-tick decimals for large numbers, #3172 Keep Y-axis ticks evenly spaced when Recharts thins them for overlap, #3149 Add a per-source floor for auto granularity
Dashboards list with tabs, sort and tag filters
Demo by @elizabetdev
The dashboards list has been reworked. Previously, preset dashboards and favourites appeared as rows of cards above the table, pushing the list down the page. Favourites now have their own tab, alongside All and My dashboards, while Import and New dashboard sit in the page header.
Each dashboard is now listed once, regardless of how many tags it has. Previously, dashboards appeared under each of their tags, with untagged dashboards grouped at the bottom. Tags now work as a multi-select filter, accessed through a fixed-width Tags button with a count badge. Selecting two tags shows only dashboards that have both.
The list defaults to sorting by last updated, with name and recently created also available. Last viewed isn’t available because that timestamp isn’t currently tracked.
Filters, the selected tab and sort order are saved in the URL, so you can reload or share a filtered view. The My dashboards tab is hidden when there’s no current user email, including in local mode.
Related PRs: #3199 Rework the dashboards list with tabs, sort, and tag filters
Search results table layout and column settings
Demo by @elizabetdev
This is exploratory work, with no commitment to ship it.
We’re working on a new layout for the search results table to address issues raised by several customers. Currently, table actions share a row with the last query field and get squeezed when the
SELECT contains many columns. This local prototype gives the actions their own row.
Adding columns is the most common question. Today, users have to edit the SELECT, but many don’t discover this. The prototype adds a Columns control where you can choose and apply columns without editing the query.
A settings panel brings the display options together. Row selection currently reserves space for checkboxes on the left of every row, even when they only appear on hover. Selecting rows then adds more actions to the table. The prototype lets you choose whether checkboxes are always visible, appear on hover, or are hidden entirely. Line wrapping gets a clearer control, and there’s room for future options such as a denser layout to fit more rows on screen.
This is still in progress, with no PR yet. We’d love feedback on how it works.
Related PRs: none yet, this is an exploration rather than a shipped feature. The row selection it reworks shipped in #3140 (search row multi-select for download and copy) and #3164 (reveal the checkboxes on hover).
Multi-line query fields and an expand-on-focus overlay
Demo by @elizabetdev
This is exploratory work, with no commitment to ship it.
Multi-line queries in the search bar have been a long-running complaint. Previously, a query collapsed to a single line when the field lost focus, so you had to click back into it to read the whole query.
That was fixed recently. SQL, Lucene and PromQL fields now stay fully visible when unfocused, expanding the page layout as they grow. The time picker and Run button stay aligned with the first line. The redundant
WHERE label and / keycap have also been removed, although / and s still focus the input.
The extra height creates some issues. The SELECT and ORDER BY fields also grow, and on a typical customer screen, even a short ORDER BY can wrap to two lines. In the chart explorer, several series can mean many fields expanding at once, leaving the editor taking up a lot of vertical space.
The draft explores keeping fields to a single row when idle. Focusing a field opens the full query in an overlay above the content below, keeping the toolbar and results in place. The overlay closes when the field loses focus, unless you pin it with Keep expanded. This lets you read a long query alongside the results. The language picker grows with the overlay, and pasting into a collapsed field keeps the first line and controls in view.
The current leaning is not to merge this draft. Fields that expand as you type or move the mouse can be confusing. Opening an overlay only when you click into a field helps, but the text area that grows with its content has already shipped and works. Another option is to move the columns and ORDER BY controls out of the search bar. That would leave only the WHERE field growing, making the current behavior sufficient.
How to handle large inputs elsewhere, including the chart explorer, is still open. We’d love feedback on this behavior.
Related PRs: #3150 Keep multi-line query fields visible when unfocused, #3151 Top-align toolbars next to growing query fields, #3168 Drop the search bar WHERE label and / keycap, #3175 Overlay multiline query fields on focus (open). #3175 is the draft shown in the demo; the three merged PRs are the shipped always-visible behavior it would replace.