Google Ads lets you click metric tiles to add to a chart—up to 2 active, one on each Y axis. Click a third tile and the oldest drops off (FIFO). It's the smartest way to compare KPIs without redesigning the chart every time you want to inspect a new pair. Velocity X's SLT dashboard borrowed this pattern wholesale: revenue vs. job completion, jobs vs. cost-per-hire, spend vs. ROAS. Four tiles, two axes, one mental model.
Why FIFO Multi-Metric Beats Fixed Charts
Fixed dashboards lock you into one story: this chart shows revenue, that one shows volume. Your teammate asks, "How correlated are cost-per-hire and job time?" You're stuck. Build 50 charts and you've drowned in noise.
FIFO multi-metric inverts the problem. The user picks the comparison they want in realtime. Click revenue—it goes to the left axis. Click spend—right axis. Curious how job completion tracks against ROAS? Click both. The affordance is instant: metric tiles are buttons, the chart animates, hover scrubber shows exact values. No modal, no page reload, no context loss. This is why Google Ads feels responsive.
The Architecture: Recharts Dual YAxis + React State
The core mechanic is two arrays: `activeMetrics` (the 2 currently-plotted series) and `metricsConfig` (all available tiles with their colors and data keys). Clicking a tile either adds it or removes it; if adding pushes the count to 3, the oldest drops via FIFO.
{`const [activeMetrics, setActiveMetrics] = useState([]);
const toggleMetric = (metricKey) => {
const isActive = activeMetrics.includes(metricKey);
if (isActive) {
setActiveMetrics(activeMetrics.filter(m => m !== metricKey));
} else if (activeMetrics.length < 2) {
setActiveMetrics([...activeMetrics, metricKey]);
} else {
// FIFO: drop oldest, add new
setActiveMetrics([activeMetrics[1], metricKey]);
}
};`}The chart itself is Recharts—dual YAxis, one for the first active metric (left), one for the second (right). Each series binds to its assigned axis via `yAxisId`:
{`
`}Metric tiles are buttons with a background color and a small badge showing whether they're active. Clicking toggles the chart. The scrubber (hover tooltip) reads both axes in parallel—no interpretation needed.
Tile UI Integration
Each tile is a card: metric name, current value, sparkline trend (last 7 days), and a click-to-toggle state. Style active tiles with a ring border and the chart-axis color as accent. The tile's purpose is clarity—you're picking a story, not adjusting a dial.
{`const MetricTile = ({ metric, isActive, onToggle }) => (
);`}FAQs
Can I plot 3+ metrics at once? Not recommended. Beyond 2 Y axes, the cognitive load spikes—three lines with different scales becomes a comparison nightmare. FIFO enforces focus.
What if metrics have wildly different scales (e.g., spend $0–1000 vs. jobs 1–50)? Recharts scales each axis independently, so the lines won't overlap unless they covary. A toggle to normalize (0–100 scale) is a nice-to-have for deep dives.
How does the hover scrubber work? A `CustomTooltip` component reads the hovered X-axis point and looks up both metrics' values, formatting each per its unit ($ vs. count). The scrubber stays locked to the mouse—Recharts handles this natively.
Can I persist the chosen metrics in localStorage? Yes. On mount, check localStorage for saved metric keys and hydrate `activeMetrics`. On toggle, save to localStorage. Users pick once, it sticks.
Does FIFO work for 4+ tiles? Yes. The logic is the same: if length > 2, shift the first and push the new one. You could extend it to 3 or 4 axes, but the visual cost rises sharply.
What's the data-fetching strategy? Fetch the full metric history once on mount, store in state or a context. Toggling a metric is instant—no server round-trip. For real-time dashboards, subscribe to a data channel (Supabase Realtime, WebSocket) and update the chart every few seconds.
The Verdict
FIFO multi-metric charts turn dashboards into tools. Your user isn't locked into your editorial choice; they ask the questions they care about. Recharts makes it trivial to implement—state management is native to React, and dual axes are a one-liner. If you're building a SaaS dashboard, this pattern is your north star. See it live in Velocity X's Recharts patterns.