I am trying to use a horizontal bar chart in React Plotly with slider steps: relaxed-brahmagupta-es7kb8 - CodeSandbox
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.
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 ?