# Legend and series toggle > Too many series on one chart; the viewer needs to isolate the ones that matter without leaving the chart. - Canonical: https://patterns.konigi.com/dashboards/legend-and-series-toggle - Group: Meta information - Level: implementation - Status: published - Updated: September 10, 2026 - Also called: toggleable legend, multi-toggle KPI header --- ## Problem Fourteen services on one chart. The viewer wants to compare two of them, and the other twelve are in the way. Editing the query is not an option, because they will want a different two in thirty seconds. ## Solution Make the legend a control. Clicking a series isolates it; modifier-clicking builds a set; clicking again restores everything. The chart becomes explorable without anyone touching a query. Grafana's behaviour is the one most products converged on and it is worth stating exactly, because it surprises people the first time: clicking a series label removes all other series from view. It isolates rather than hides. To build up a comparison you Ctrl or Cmd-click additional labels, and clicking a label twice returns to showing everything. Isolate-on-click is the right default, and the reason is the asymmetry of intent. Someone with fourteen series almost always wants one or two, so isolating gets them there in one click while hiding would take twelve. The cost is that the first click is destructive-looking and undiscoverable, which is why the double-click-to-restore has to be reliable. The legend also has a second job that has nothing to do with toggling: identifying which line is which. This is where it either earns its space or wastes it. Grafana offers **List** and **Table** modes, placement at **Bottom** or **Right**, and the ability to put values and calculations in the legend itself. Table mode with a value column turns the legend into a sortable summary and often removes the need for a separate panel. Placement matters more than it looks. A legend at the bottom pushes the chart up and gets cut off with many series. A legend on the right takes horizontal space permanently but scrolls gracefully, which is why dense charts end up on the right. The accessibility point is unavoidable here: a legend that maps colour to name is the mechanism by which a chart's meaning depends entirely on colour. WCAG's requirement that colour not be the sole carrier of information means either direct labelling, distinguishable line styles, or an interaction that lets someone isolate a series and read its name. ## Use when More than about four series share a chart and viewers compare subsets that differ by person and by question. ## Don't use when There is one series, where the legend is a label pretending to be furniture. Or when there are fifty, where the legend is a scrolling list nobody reads and small multiples would answer better. ## Trade-offs Toggle state is invisible to anyone who didn't set it, so a screenshot of an isolated chart looks like a chart with one series and gets read as such. It rarely persists into a shared link, so the thing you found is not the thing they open. Legends consume real space that the chart wanted. And with many series the legend becomes the dominant object on the panel, which is a strong signal the chart is the wrong shape rather than the legend the wrong size. ## Checklist - Does clicking a series isolate it or hide it, and is that discoverable? - Is there a reliable one-action restore? - Can the viewer build a set of two or three, and how? - Does the legend carry values or calculations, or only names? - Is placement right for the series count, and does it scroll rather than truncate? - Are series names readable, or truncated into ambiguity? - Does the chart's meaning survive for someone who cannot distinguish the colours? - Does toggle state go into the URL or a shared link? - Is series order stable between refreshes? - At what series count should this be small multiples instead? ## Compare **Grafana** isolates on click and builds sets with Ctrl or Cmd, offers list and table legends with values in them, and lets the legend sit bottom or right, which makes it as much a summary table as a key. **Datadog** leans on hover-to-highlight over click-to-isolate, so exploring is transient and nothing persists into a state someone could misread. **Honeycomb** mostly avoids the problem by grouping at query time: rather than toggling fourteen series off a chart, you change what you grouped by and get the two you wanted. **Netdata** puts a dimension list under every chart with per-dimension toggling, which at hundreds of charts makes the legend the primary way of narrowing anything. ## Related Time series is the chart this sits on. Categorical series palette is what makes the mapping between key and line possible at all. Hover detail is the other way to answer "which line is this". Small multiples is the answer when the series count has outgrown one chart. Cross-filter is the page-wide version of narrowing by selection. ## 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 / Geomap** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, medium density, dark theme, desktop-web. Four maps of the same flight data, and the base map does more damage than any of the data settings. On the three dark panels the markers are small green dots on dark grey, which at this size is close to the contrast floor; on the satellite panel they are small green dots on terrain that is already green, brown and blue, and they effectively disappear. The base layer is supposed to be context and recede, and imagery is the loudest option available. The density layer along the bottom is the honest one: it stops pretending individual points resolve, and the clusters on both coasts read immediately. Its radius is doing a great deal of unlabelled work, though, and the blobs merge into clouds at a setting nobody can see. Three of the four panels also carry a legend that says "Layer 1", which is a legend occupying a corner and naming nothing. Hotspots in this capture: - [Geo map with markers](https://patterns.konigi.com/dashboards/geo-map) — Markers as small dots. Green on dark grey at four pixels is near the contrast floor. - [Geo map with markers](https://patterns.konigi.com/dashboards/geo-map) — Satellite imagery under the same markers, competing with the data instead of receding. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — Density, with a ramp whose radius parameter changes the apparent story and isn't shown. - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) *(this pattern)* — A legend reading 'Layer 1'. It holds a corner of the panel and identifies nothing. **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) *(this pattern)* — 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) — The only route to the nodes pushed off the right edge, and it doesn't move the rest of the page. ### Netdata Per-second charts, hundreds per node, with a per-chart anomaly ribbon instead of a band on the series. **Metrics / System › Compute › CPU** — captured September 10, 2026, Netdata Agent (public registry node, signed out). operational, dense density, dark theme, desktop-web. Further down the same generated page, and the section nesting is the thing to look at: "− Compute", then "−− CPU", then "−− Pressure Stall Information (PSI)", then "−−− CPU", then "−−−− Some Pressure". Four levels, each collapsible, each named by the collector rather than by a person, and the depth is signalled with leading dashes because there was no design pass to give them a hierarchy in type. It is consistent and completely unedited. Every chart also carries its own query builder in the header—group by, aggregation, node count, dimension count, sample interval—so a panel here is a live query you can re-scope in place rather than a saved configuration. Worth noting what is not in this shot: the sidebar has an Anomaly Rate toggle, switched off, and Netdata's answer to the anomaly problem is a separate derived rate per chart rather than a band drawn around the series. This capture shows the control, not the thing it draws. Hotspots in this capture: - [Collapsible row](https://patterns.konigi.com/dashboards/collapsible-row) — Four levels of section, depth carried by leading dashes. Generated by the collector, and never edited. - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) — Six arcs. Two are percentages where the endpoints mean something; four are rates in KiB/s and kbit/s on an invented maximum. - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) *(this pattern)* — The legend is a value table: steal 0.1, softirq 0, user 1.5113, system 0.9, iowait 0.1, each with its own bar. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A query builder in every chart header, so the panel is a live query rather than a saved configuration. - [Overview then detail](https://patterns.konigi.com/dashboards/overview-then-detail) — System › Compute › CPU. The breadcrumb is the only thing telling you where in 720 charts you are. ## Related patterns - [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. - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette) — Twelve services on one chart need twelve colors a person can tell apart. - [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. - [Small multiples](https://patterns.konigi.com/dashboards/small-multiples) — Many series would tangle on one chart; the viewer needs them on identical axes side by side. - [Cross-filter](https://patterns.konigi.com/dashboards/cross-filter) — Selecting something in one panel should narrow every other panel to it. ## Sources - [Grafana, Configure a legend](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/configure-legend/) - [W3C, WCAG 2.2—Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [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.