search

plotly / plotly.js

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

Is it possible to make slider take up the entire width of the layout? #6372

Closed GeorgeFlorian closed 2 months ago

GeorgeFlorian commented 1 year ago

I am trying to use a horizontal bar chart in React Plotly with slider steps: https://codesandbox.io/s/relaxed-brahmagupta-es7kb8

I have some long label names for the Y axis so I need to set up a big left margin in the layout: layout.margin: { b: 200, l: 150, r: 20, t: 100, pad: 10 },.
The issue is that by setting a big left margin, I end up pushing not only the plot but also the slider bar and the legend.

I've tried using layout.sliders.x and layout.sliders.y properties to place it, but x and y are relative to the width of the layout, so the bar won't stay centered on all viewport sizes.
Adding layout.sliders.len makes the slider bar longer, but for some reason it makes the plot shorter.

How can I position the slider bar in the center of the layout or how can I make it ignore margins ?

alexcjohnson commented 1 year ago

Rather than making room for the labels via layout.margin you could change xaxis.domain. If the plot width is variable this can be annoying as you need to convert between px and plot fraction, but if you know the width ahead of time it's easy.

GeorgeFlorian commented 1 year ago

Rather than making room for the labels via layout.margin you could change xaxis.domain. If the plot width is variable this can be annoying as you need to convert between px and plot fraction, but if you know the width ahead of time it's easy.

I won't know the width of the layout before. I'm trying to create a responsive design.

alexcjohnson commented 1 year ago

OK - sounds like the best option would be to implement container vs paper positioning (adding attributes slider.xref and slider.yref) like we did with the main plot title in https://github.com/plotly/plotly.js/commit/66a8154fd31f976fd86c42b315eb6ef233be09c2 ( 👋 @rmoestl )

@GeorgeFlorian If you're interested to make a PR, this would probably be a fairly easy one!

gvwilson commented 2 months ago

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson