This pull request introduces a comprehensive and highly-configurablezoom and pan system for all Cartesian charts. It also includes major enhancements to theBrush component, a newMinimap component, and improved mobile/touch interactions.

Core changes

ZoomPanContainer – A new context provider that wraps chart children and manages all zoom/pan state and logic. It handles mouse-wheel, drag, and keyboard events for seamless navigation.
Minimap component – Gives a high-level overview of the entire chart, showing the current viewport and allowing quick navigation by clicking or dragging.
MajorBrush overhaul
- NewuseZoomPan mode lets the brush control the chart’s zoom state instead of merely slicing data.
- Addedlayout="vertical" for Y-axis brushing.
- Enhanced touch support (pinch-to-zoom, scroll-to-zoom).
- Supports multiple brushes on the same chart (e.g., one per axis).
- Introduced an isolatedBrushPreview container to prevent rendering conflicts.
State management – Added azoomSlice to the Redux store to track global zoom state (scaleX,scaleY,offsetX,offsetY).
Improved axis interactions –CartesianAxis now supports direct drag/scroll on axis labels to pan and zoom.
Animation control – Disables animations on graphical elements (Area,Bar,Line,Scatter) during zoom/pan for smooth performance (initial render excluded).
Refined event handling – Greatly improved touch and pointer event handling to support complex gestures (pinch, two-finger pan, double-tap-drag) and to resolve conflicts between tooltips and panning.

Related Issue

Resolves **#710
**

Motivation and Context

Large or dense datasets were previously hard to explore interactively. These changes provide users with built-in, powerful tools for zooming, panning, and brushing, turning static charts into dynamic, responsive interfaces suitable for advanced data-exploration use cases.

How Has This Been Tested?

Unit tests – Added for coreZoomPanContainer logic (test/context/zoomPanContext.spec.tsx) to verify zoom, pan, and reset behaviors.
Storybook stories –
- Examples/ZoomPan.stories.tsx: basic zoom, axis-constrained zoom, drag-to-zoom, horizontal & vertical brush integration, dual-brush controls, “follow line” feature, andMinimap.
- Examples/ZoomPan/EnhancedZoomPan.stories.tsx: custom scrollbars, mobile-optimized gestures, keyboard controls, axis-label interactions.
Manual testing across chart types (Line,Bar,Area,Scatter) on multiple input devices (mouse, trackpad, touch screen).

Screenshots

Enregistrement.2025-06-09.232749.1.mp4

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change) – TheBrush component’s props and behavior have been significantly updated, which may affect existing implementations.

Checklist

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
I have added a Storybook story or extended an existing story to show my changes.

Fefedu973 added30 commits

June 5, 2025 15:05

Improve zoom container

a5bd320

Add zoom state slice and update zoom behavior

8dbe03d

Add diverse zoom/pan storybook examples

8db2762

Improve zoom behavior

5a59f48

Fix zoom overlay position and story data

c2bb459

Fix X-axis zoom on categorical scales

5f6bc16

Improve zoom and touch support

f69b69e

Refine zoom behavior and examples

e61ccde

Fix zoom container and examples

e0288d1

feat(zoom): add disableAnimation flag and fix clipping

0245fc0

Fix zoom scale application and tick filtering

fc1623f

Clip chart content in zoom container

3aa38a9

Fix zoom animation flag and update examples

b545fe4

Fix tooltip scale and disable zoom animations

d6bf75f

fix zoom animations and tooltip layering

cddf8c0

Fix zoom animation toggle

7c4769b

Improve zoom container features

b9017f6

Clamp zoomed scale output

8bee435

Add drag-to-zoom and brush integration

d4cb761

Update applyZoomToScale.ts

f7f5654

feat(zoom): add follow line option

c42d3e2

Improve zoom follow line and examples

d776757

Fix zoom offset and smooth brush

1a4ac02

Update Brush.tsx

2141b23

Update applyZoomToScale.ts

5bb4a62

feat(brush): emit incremental updates

0d5c825

fix: correct touch typing and lint

2561896

Update zoomPanContext.tsx

1745ed6

update

e760360

Merge branch 'codex/ajouter-support-zoom-et-pan-sur-graphiques-cartes…

183d9ff

…ian' ofhttps://github.com/Fefedu973/recharts into codex/ajouter-support-zoom-et-pan-sur-graphiques-cartesian

final-update

1ca0f59

ckifer requested changes

Jun 9, 2025

View reviewed changes

Copy link

Member

ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Wow@Fefedu973 this is a lot. Really appreciate you taking this on!

I think this is too much to change and review at once. Would you be able to split this into smaller PRs?
We'll also need to add tests with each change, we can't just add all of this untested.

The video looks really good although I'll definitely pull it down and play with it.

Copy link

Author

Fefedu973 commentedJun 9, 2025•
edited
Loading

@ckifer I won't be able to change a lot of things before ~2 weeks because I have my finals but i can try after that. However all the changes are deeply interconnected to one another so it will be tricky

Copy link

Member

ckifer commentedJun 9, 2025

Ok no worries, I will review the PR as is when I get a chance so that you can incorporate feedback but won't be comfortable merging since its so large

Copy link

Member

ckifer commentedJun 9, 2025

Will also need to fix the merge conflicts

Copy link

Author

Fefedu973 commentedJun 9, 2025

@ckifer I will maybe have some time to clean a little bit the PR and fix the merge conflicts they are not that big.
Btw during dev something very annoying was the time of compilation of the storybook is there a hot reload or smth like that ?

Copy link

Member

ckifer commentedJun 9, 2025

storybook should always auto-reload on save. Not sure what it could be if it isn't working for you

Copy link

Author

Fefedu973 commentedJun 9, 2025

@ckifer my setup is a bit weird I use wsl and not everything was setup property but yea I had to restart the storybook like 1000 times and waited 2 min everytime

Copy link

Member

ckifer commentedJun 9, 2025

Weird, it hit reloads like any other app for me on Mac/Linux. Sorry about that, not sure there's anything we can do about it though unless you want to cut a bug to storybook

PavelVanecek reviewed

Jun 9, 2025

View reviewed changes

src/chart/CategoricalChart.tsx

		if(React.isValidElement(child)){
		// The child is cast to any to allow passing width and height props.
		// This is a specific solution for the compact chart scenario.
		returnReact.cloneElement(childasany,{ width, height});

Copy link

Collaborator

PavelVanecekJun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

No cloning please. Think of another solution that doesn't involve cloning.

Copy link

Author

Fefedu973Jun 10, 2025•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

This is the only option I found to prevent the too many re-enter issue. Do you know any other way ?

Copy link

Collaborator

PavelVanecekJun 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

What other options have you considered? I am positive that there is something else. We have hooks to read the chart dimensions, have you tried that? React context exists. Redux store and selectors are available.

Why does this need to inject width, height everywhere? What happens if some of the children are nested inside another children? What happens when there are some other components that receive width, height from elsewhere? This would overwrite that.

PavelVanecek reviewed

Jun 10, 2025

View reviewed changes

src/state/selectors/axisSelectors.ts

		padding,
		brushDimensions:BrushDimensions,
		{padding:brushPadding},
		allBrushSettings:Record<string,any>,

Copy link

Collaborator

PavelVanecekJun 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Noany please

Copy link

Author

Fefedu973 commentedJun 10, 2025

Concerning the issue with hot relaoding this is due to WSL 2 that does not allow the apps to monitor files changes on windows mounted drives.
An easy fix for me was to create a .env file and adding "WATCHPACK_POLLING=true"
(i wish I new that earlier)
Also I used to get a giant amount of modified files in git. This is due to the fact that the line end character is not the same on windows and linux. I created a ".gitattributes" file and added

* text=auto eol=lf*.{cmd,[cC][mM][dD]} text eol=crlf*.{bat,[bB][aA][tT]} text eol=crlf

This could be nice to add into the DEVELOPING.md

Copy link

Member

ckifer commentedJun 10, 2025

Someone had to be the one to figure that out first, thanks for that but sorry for the pain.

We can document it for others sure

Copy link

Author

Fefedu973 commentedJun 10, 2025

no problem !

BoomchainLabs approved these changes

Jun 11, 2025

View reviewed changes

ckifer mentioned this pull request

Jul 4, 2025

Vertical Brush similar to Horizontal Brush#2259

Open

1 task

Copy link

paologaleotti2 commentedSep 16, 2025

Any updates?

Copy link

Member

ckifer commentedSep 16, 2025

We need to do this in smaller chunks than this PR does and it would need to incorporate any feedback

Copy link

Author

Fefedu973 commentedSep 16, 2025

I'm extremely busy rn,
However my PR is only adding a single feature which is the ability to zoom into charts, every change is bound to the other which makes the split in small chunks impossible, everything needs everything to work, the work on the brushes were only done to make them work with the zoom feature. I know this PR is huge but I don't think there is any other way.
If anyone is able to help it would be appreciated but I can't do much more on my side I think

Copy link

Member

ckifer commentedSep 16, 2025

Yep, totally get being busy and no worries at all. Appreciate the effort here!

Labels

None yet

5 participants

Movatterモバイル変換

Uh oh!

Feature/add zoom and pan support improved brush (vertical) and minimap#5934

Are you sure you want to change the base?

Feature/add zoom and pan support improved brush (vertical) and minimap#5934

Uh oh!

Conversation

Fefedu973 commentedJun 9, 2025

feat: Implement Advanced Zoom, Pan, and Interaction Controls

Description

Core changes

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots

Types of changes

Checklist

Uh oh!

ckifer left a comment

Choose a reason for hiding this comment

Uh oh!

Fefedu973 commentedJun 9, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

ckifer commentedJun 9, 2025

Uh oh!

ckifer commentedJun 9, 2025

Uh oh!

Fefedu973 commentedJun 9, 2025

Uh oh!

ckifer commentedJun 9, 2025

Uh oh!

Fefedu973 commentedJun 9, 2025

Uh oh!

ckifer commentedJun 9, 2025

Uh oh!

PavelVanecekJun 9, 2025

Choose a reason for hiding this comment

Uh oh!

Fefedu973Jun 10, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PavelVanecekJun 10, 2025

Choose a reason for hiding this comment

Uh oh!

PavelVanecekJun 10, 2025

Choose a reason for hiding this comment

Uh oh!

Fefedu973 commentedJun 10, 2025

Uh oh!

ckifer commentedJun 10, 2025

Uh oh!

Fefedu973 commentedJun 10, 2025

Uh oh!

paologaleotti2 commentedSep 16, 2025

Uh oh!

ckifer commentedSep 16, 2025

Uh oh!

Fefedu973 commentedSep 16, 2025

Uh oh!

ckifer commentedSep 16, 2025

Uh oh!

Uh oh!

Fefedu973 commentedJun 9, 2025•
edited
Loading

Fefedu973Jun 10, 2025•
edited
Loading