plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.92k stars 1.86k forks source link

Rescale y-axis for graphs with x-axis rangeslider (Python) #6958

Open JuanRedondoHernan opened 6 years ago

JuanRedondoHernan commented 6 years ago

Related with the closed issue #912, I haven't found the functionality on Python Plotly library. I haven't been able neither to implement something similar as they did in R in the aforementioned issue. I would like to keep everything in Python since I do other parts of analysis and it is intended to be modified by other users. I would appreciate any hit about how to do it.

cldougl commented 6 years ago

Hi there, The range slider is intended to update the range of the control axis, the behaviour does not adjust the overall zoom or rescale the y-axis so this issue would not be considered a bug (please note we ask users to reserve this channel for issues and bugs with Plotly's python api).

As mentioned in the R issue- the range slider functionality is handled in our core graphing library: plotly.js so changes to this feature could be discussed there.

Alternatively, you may be interested in implementing Dash, this is a python tool similar to Shiny for R (mentioned in R issue that you noted above). Specifically you could take a look at the interactive graphing section to see how you can implement events based on zooming on the graph.

Don't forget you can always post questions and get feedback about individual projects that you're working on in our community forum: https://community.plot.ly which is free and open to all users!

kamal264 commented 6 years ago

Hi , I am also looking for similar functionality in python-django. I am working on finance application in django and using plotly to draw stock price. And want to enable auto range for y-axis else graph is not making any sense in my scenario. image

After narrowing x-axis range- not able to analyse any price movement

image

gersteing commented 5 years ago

I struggled with getting this to work so I developed a code example to share. Example provides automatic updates to the yaxis range when and x range slider is updated. Y axis is set to show only price range of bars that are in the chart with a two tick padding. This worked well for me and I can potentially add any number of trace overlays that I want on top of the chart. Plus, I can run it locally without having to use plotly services. See gitub repo here:

https://github.com/gersteing/DashCandlestickCharting/blob/master/README.md

For whom ever wants to try it out. Runs locally using Flask. Enjoy

jamescoverdale commented 5 years ago

I've ran into this same issue using the plotly js library.

I created a simple workaround using the relayout event. Its specific to the ohlc chart type, but can easily modify to work with the other chart types.

Plotly OHLC Rescale yAxis

Codepen Example

Hope it helps someone.

ernestocr commented 5 years ago

Any update on this request?

gioxc88 commented 4 years ago

please update this the chart is unusable without auto scaling of y axis

vinerich commented 4 years ago

I'd also like to have this feature in the main plotly.js. I have several x-range synchronized graphs that display varying data. Without scaling of y axis this is rather not usable depending on the data-range of the graph.

Atm I also use nearly the same workaround as @jamescoverdale to implement this by myself.

tumkik commented 4 years ago

I got some issue similar to this one when create candlestick chart using plotly. The problem is the rangeslider itself. To fix the issue, you simply remove the rangeslider. After that y axis will automaically scalling when you zoom. (however, you cannot use rangeslider anymore, but in my case, drag zoom works just fine for me)

just add below code for removing rangeslider in the 'layout' xaxis:{'rangeslider': {'visible': False}}

wuxian08 commented 4 years ago

Just to add some more information, I noticed that there was a community discussion (https://community.plotly.com/t/y-axis-autoscaling-with-x-range-sliders/10245) regarding to this and the proposed method (an 'xaxis.range' event registered in layout) seemed outdated.

This would be very appealing in some use cases

peter-hartmann commented 4 years ago

Setting yaxis fixedrange to false will allow to zooming while having a range slider. It's not autoscaling but it's easy and much better over having no zoom at all.

Hope this helps someone.

Credits: https://stackoverflow.com/a/52816021/10689649

{
    yaxis: {
      fixedrange: false
    }
}
eightbit commented 3 years ago

Single line: fig.update_yaxes(fixedrange=False)

valankar commented 2 years ago

Is there still no way to do this with rangeselector/slider and HTML plots? I do not want to use Dash.

Thomas-Heniart commented 11 months ago

I am also looking for an easier solution 🙏

LucaZiegler commented 10 months ago

Please fix that image

secsilm commented 5 months ago

Still no solu?

ndrezn commented 5 months ago

Re-opening as this is a valid feature request, but it was in the wrong place! Something we might consider for plotly.js which plotly.py would inherit.