•  


Zoom and pan · Issue #710 · recharts/recharts · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom and pan #710

Open
serializable opened this issue May 27, 2017 · 27 comments
Open

Zoom and pan #710

serializable opened this issue May 27, 2017 · 27 comments
Labels
feature request Issues that are feature requests

Comments

@serializable
Copy link

This is a feature request

It would be nice if the charts had a zoom and pan feature (per axis).
If there is a way to achieve this, please let me know. Otherwise, can you think of a "creative way" to add this in? Or if you give me a few pointers I might fork and try to add it in

Thanks

@0xAl3xH
Copy link

Also interested in this

@oliverwatkins
Copy link

also interested

@appsmehta
Copy link

Also Interested in this

@angulo
Copy link

Interested too

@matepaiva
Copy link

+1

@matepaiva
Copy link

Oh, now I see that Brush does the job. So I dont think this feature is really necessary.

@swapbuk
Copy link

@matepaiva What is Brush? Is it component in rechart or configuration in component ?

@xile611
Copy link
Member

Check this demo .

@hueitan
Copy link

hueitan commented Nov 10, 2017

If you are still interested in a smoothly way to zoom the graph, here's the solution

  1. update the Axis padding style with the animation
    OR
  2. update the Axis Domain with the animation

Here's the example of update Axis Padding

jsfiddle : http://jsfiddle.net/udrq0h2d/
screen gif demo:
recharts-zoom-in-out-example

@golestanirad
Copy link

Oh, now I see that Brush does the job. So I dont think this feature is really necessary.

what is that?

@matepaiva
Copy link

matepaiva commented Nov 28, 2018

I don't actually remember, but I think this is it: http://recharts.org/en-US/api/Brush @golestanirad

@gmilette
Copy link

this feature is still necessary, in case the user wants to pan the chart without using the brush component

@leonardolessa
Copy link

I think pan and brush are completely different features, is there any way to achieve the result of zooming Y axis?

@jtiagodev
Copy link

Have you considered the following example?
http://recharts.org/en-US/examples/HighlightAndZoomLineChart

@howdyhyber
Copy link

Also interested in this feature, its hassle to use brush and its much easier to just pan or zoom

@Jarrio
Copy link

+1

@sseira
Copy link

Would love to be able to zoom into a specific area in the scatter plot

@aniketmore311
Copy link

did anyone figure out zooming and panning? I can use the brush to pan the chart but how do I implement zoom? I don't think domains work on the category chart.

@robertgutu
Copy link

Does anyone found a better implementation for zooming other than the brush component or the highlighted zoom example from de docs( http://recharts.org/en-US/examples/HighlightAndZoomLineChart ) ?

@aniketmore311
Copy link

Does anyone found a better implementation for zooming other than the brush component or the highlighted zoom example from de docs( http://recharts.org/en-US/examples/HighlightAndZoomLineChart ) ?

doesn't seem like there is any other way to do that, you can look at the highlighted zoom example and try to add your own event listeners to act on mouse wheel events if you really need scroll-based zoom.

@Revan99
Copy link

what about panning how can I do panning

@Badbreaddead
Copy link

Victory has in implemented in comfortable way
https://formidable.com/open-source/victory/gallery/brush-and-zoom

@roro9
Copy link

roro9 commented Jan 23, 2022

Here's my take, hopefully this helps!
@serializable @robertgutu @aniketmore311 @leonardolessa @sseira

Screen Recording 2022-01-23 at 7 02 05 PM

https://codesandbox.io/s/recharts-scatter-plot-zoom-and-click-v68gk
https://medium.com/@rohanbajaj/recharts-scatter-plot-with-zoom-and-selection-112d82b26f43

@OmarOmeiri
Copy link

OmarOmeiri commented Nov 13, 2022

I made a "zoom-pan" feature on wheel events which is ok for x-axis zoom and pan, but it could be improved for x-y.

video.mp4

UPDATE

Actually made it a little better by adding full x-panning

video2.mp4

You can check it out here

@widianapw
Copy link

+1

@ckifer ckifer reopened this Mar 15, 2023
@ckifer
Copy link
Member

Re-opened this as it was never implemented as an actual feature, but rather just given an example on how to do it yourself.

This most likely won't get touched anytime soon since we're working on stability and documentation right now, but it'll be open.

@skorphil
Copy link

Use Echarts - they have simple native support of this

Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Labels
feature request Issues that are feature requests
Projects
None yet
Development

No branches or pull requests

- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본