Sextant

Guides

Chart drill-downs without leaving the chart

Modal drill-downs hide the chart you clicked. Floating panels let you drag a bar out into a draggable, resizable panel beside the plot — tables, charts, notes, even live what-ifs — across every bar and waterfall widget.

· 5 min read

Almost every bar or waterfall chart wants a drill-down: click a bar to see what's inside it. The usual answer is a modal or a separate page — but both hide the very chart you were reading, so you lose the context that made you click. Sextant's floating panels take a different path: drag a bar out of the chart and a small, draggable, resizable panel appears beside it, with the chart still in full view. This guide covers what they are, how to turn them on, and the details that make them feel right.

The problem with modal drill-downs

A modal drill-down is a context switch. You click a bar, a dialog covers the chart, you read the detail, you close it — and now you've forgotten how that bar compared to its neighbours. Open a second one and the first is gone. The chart and its detail can never be on screen together, which is exactly when comparison matters most.

Floating panels keep both. The panel is a sibling of the chart, not a layer over it, so you can open as many as you like and arrange them around the plot — one to the left, one below, two stacked — while the bars stay visible the whole time.

Turning it on

Floating panels ship as a paid primitive, @sextant/chart-floating-panels, and every bar / column / waterfall widget that supports them exposes a single floatingPanels prop. It's off by default, so a widget you've already installed is byte-identical until you opt in:

<ChartMrrWaterfall floatingPanels />

That's the whole API for the common case. The primitive is pulled in automatically as a registry dependency when you install a widget that uses it:

npx shadcn add @sextant/chart-mrr-waterfall

In the playground and Studio there's also a Floating panels toggle, so you can preview the feature on and off without touching code.

What goes in a panel

A panel's body is just content you provide — so it can hold anything:

  • a table of the rows behind the bar,
  • a small chart (another Recharts chart, a sparkline, a comparison),
  • prose — a written note, a callout, a recommendation,
  • or an interactive surface: a search box, checkboxes, filters.

By default every adopting chart gets a consistent built-in drill-down — the bar's value, its share of the total, its rank, and a peer-comparison list — so the feature works the moment you flip it on. Want something richer for a specific chart? Pass your own drilldown function and render whatever you like. On the MRR waterfall, for example, the "New business" panel is a searchable, checkable table of contributing accounts wired to a live total.

Drill-downs that change the chart

Because a panel is live React, its content can feed back into the chart. The MRR waterfall's contributor panel has a checkbox per account: uncheck one and it drops from the running total, which shrinks the "New business" bar — and, because a waterfall is a connected bridge, the change ripples through every downstream balance to the ending number. The drill-down stops being a read-only view and becomes a what-if.

The details that make it feel right

  • One panel per bar. Drag a bar out once and it's open; dragging it again surfaces the existing panel instead of spawning a duplicate, so you never end up with two conflicting copies of the same detail.
  • Mouse, touch and keyboard. Drag to place, or click a bar — or focus it and press Enter — to open one at a sensible spot. Panels are draggable by their header, resizable from the corner, and closable with Escape; focus returns to the bar you came from.
  • Phones fall back gracefully. Where there's no room to float, panels stack in a list below the chart instead.
  • Zero resting cost. With the feature off, nothing is added to the page; with it on but no panels open, the chart looks and measures exactly as before.

Which charts support it

Floating panels work on any categorical chart — vertical columns, horizontal bars, waterfalls and bridges, tornados. They're wired into the waterfall family (MRR / ARR movement, P&L and gross-margin bridges, re-forecast and NRR), and across bar charts like channel ROI, win/loss, quota attainment, feature adoption, AR aging and budget-vs-actual. Browse them in the catalog — any widget with the Floating panels toggle supports drag-out drill-downs.

Try it

Open the MRR Waterfall, make sure Floating panels is on, and drag the + New bar out of the plot. Drop it, then check and uncheck a few accounts and watch the bar — and the ending balance — move.