Yugen UI

Zoom & brush

brush adds an overview strip under LineChart / AreaChart to zoom into a period without losing the context of the whole series.

The overview strip draws all the data with thin lines; the bright window is the visible range and the rest is dimmed. Drag the window to move it, drag the handles at either edge to resize it, or click outside it to jump there. The window is a slider: ←/→ move by one point, Shift+←/→ shrink/grow, PageUp/PageDown move by one window, Home/End go to either end. The strip is always LTR like the plot area, so on RTL pages the arrow keys still move in the on-screen direction. The range is a pair of indexes [start, end]: domain / defaultDomain / onDomainChange; the “Reset” button returns to the full range. This page also covers 100% stacked areas (stackOffset="expand").
Yugen Labs · experimentalThis component is outside SemVer: its API can change in a minor release, and What's new says so. Versioning policy
Daily visits
Drag the window below the chart to focus on a period
Showing August 30, 2026 – September 28, 2026 · 30/90 points

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { LineChart, AreaChart } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Storage used (GB)
Showing January 2025 – December 2026 · 24/24 points

Stacked areas + brush

AreaChart stacked: the tooltip lists each series and a total row; the overview strip draws the top of each layer.

Storage mix

100% stacked areas

stackOffset="expand" normalizes each point to 100%, for the question “how does the mix change?”. The Y axis is a share; the tooltip shows each value with its percentage and the total.

Web visits
Showing September 22, 2026 – September 28, 2026 · 7/90 points

Controlled range

domain + onDomainChange: preset 7 / 30-day buttons stay in sync with the dragged window.

Usage

Do
  • Turn on brush for long series (a few dozen points or more) when readers need to look closely at one period.
  • Set defaultDomain to the most recent period. Readers usually ask about “now” first.
  • Use 100% stacked areas for questions about the mix; keep regular stacked areas when the total matters too.
Don't
  • Don't use brush to hide data. The data table always contains every point.
  • Don't stack to 100% when series have negative values.
  • Don't zoom a separate Y axis for each series. There is still one Y axis.

Props

Prop · TypeDefaultDescription
brushbooleanDefault: falseOverview strip + draggable window under the plot area (LineChart, AreaChart).
domain / defaultDomain[number, number]Default: —Visible index range (both ends included).
onDomainChange(domain: [number, number]) => voidDefault: —Called on drag, on key presses or when “Reset” is clicked.
AreaChart.stackedbooleanDefault: falseAreaChart only: stacks the areas; the tooltip gets a total row.
AreaChart.stackOffset"none" | "expand"Default: "none"AreaChart only, when stacked: expand = 100%.
…LineChartPropsDefault: —Every other prop is the same as on the LineChart page.