// the find
shelwinsunga/zoom-chart-demo
A zoomable shadcn/rechart chart.
A minimal Next.js demo showing how to add brush-based zoom to a Recharts chart styled with shadcn/ui. It's a single-file reference implementation, not a library — you copy `components/chart.tsx` into your project and adapt it. Aimed at developers who are already using the shadcn stack and want this specific interaction without wiring it up from scratch.
The core technique (using Recharts' `ReferenceArea` to draw a selection rect, then updating domain state on mouse events) is clean and self-contained in one file. It uses the shadcn chart wrapper correctly, so it slots into an existing shadcn project without style conflicts. The demo is runnable in two commands, which is all you need for a reference like this.
This is a demo app, not a reusable component — there's no npm package, no props API, no way to use it without copying and editing. It hasn't been touched since July 2024, and Recharts 2.x has had breaking changes since then, so you may hit compatibility issues. Touch/mobile zoom is not handled at all. The README is four lines and tells you nothing about how the zoom actually works, which defeats half the purpose of a reference implementation.