# How to Build Drag-to-Compare on a Chart

> Implementation recipe for building interactive drag-to-compare micro-interactions on charts

A step-by-step walkthrough detailing how to implement a drag-to-compare interaction using React and SVG. It layers two charts and uses an invisible overlay rect to capture pointer events, computing differences between two points dynamically.

## How it works

Approach: two charts, one absolutely positioned over the other; the top one is hidden. On drag start, change the visible chart's opacity (0.2) to reveal the comparison chart. On pointer down, save the nearest chart (x,y) to state as comparisonPoint; on move, update point via findNearestPointToMouse(event). Use an invisible \<rect\> with onPointerDown/onPointerUp/onPointerMove/onPointerLeave handlers (fillOpacity 0). On pointer up/leave, clear the points. Dollar and percent change are computed from the difference of current and comparison point; tooltip centering and reveal amount derive from the same difference.

## What it is for

- Build a custom comparison interaction for financial or analytics charts
- Calculate and display real-time delta and percentage changes between points on drag
- Capture smooth touch and mouse pointer events across an SVG chart area

## Key points

- Stacked chart architecture using absolute positioning and opacity transitions
- Invisible SVG overlay rect with zero fill opacity to handle pointer events
- State tracking for initial comparison point and active hovered point
- Real-time value and percentage difference calculations
- Dynamic tooltip positioning centered between the two active points

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [Data Visualization](https://xiry.app/topics/design/data-visualization.md)
- Platforms: Web
- For: Frontend engineers and UI designers building data visualizations
- Tags: charts, react, svg, dataviz, ui, interaction design

## Why it was saved

- [@brotzky, 8 December 2023](https://x.com/brotzky/status/1733177447972241558): Concrete React/SVG recipe for the interaction

## Related

- [Visual Capitalist](https://xiry.app/resources/visual-capitalist): Data-driven infographics covering markets, technology, global economics, and business trends. (Website, Freemium)
- [Graphy](https://xiry.app/resources/graphy): Turn messy spreadsheets and data into branded, presentation-ready charts with AI. (Web app, Freemium)
- [Moebio](https://xiry.app/resources/moebio): Interactive complex data visualizations and network analysis projects by Santiago Ortiz. (Website, Free)
- [The Economist's Chart Design Principles](https://xiry.app/resources/the-economist-s-chart-design-principles): Four data visualization rules for creating clear, publication-quality charts (Tip, Free)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)
- [blobatar](https://xiry.app/resources/blobatar): Deterministic geometric blob avatar generator with zero dependencies. (GitHub repo, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/how-to-build-drag-to-compare-on-a-chart

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.