Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

zoom on y

See original GitHub issue

I took a stab at the zoom on y-axis, and writing plunkr with react is a bit challenging, but this small component works for my use-case scenario. Any comments/suggestions welcome…

Cheers!

Plunkr

http://embed.plnkr.co/1pkiYEumHka5H4d7MeNk/

Added the following CSS

.draggable {
  stroke-width: 4;
  cursor: move;
}
.hover_group_drag:hover rect {
  fill-opacity: .3;
  stroke-width: 4;
  opacity: .3;
  fill: #000;
}

Screenshot

Issue Analytics

State:
Created 7 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

1reaction

rragcommented, Aug 3, 2016

Thanks @WaiSiuKei for the idea of magnification based on center on y. Your library looks very promising, especially since it is framework agnostic.

I have used your idea of zoom based on center y for changes in 0.6

Here is an work in progress version

http://rrag.github.io/react-stockcharts-next/documentation.html#/edge_coordinate

Once you zoom on y, the pan becomes 2 dimensional. Change to svg and back to canvas, and the yAxis is reset. you could also zoom on x by dragging the x axis.

0reactions

rragcommented, Oct 13, 2016

merged to master and 0.6.0-beta.2 published to npm