plotly / plotly.js

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

Better rangeslider positioning #2453

Open alexcjohnson opened 6 years ago

alexcjohnson commented 6 years ago

As mentioned by @PavelGolodoniuc in #2443, rangesliders don't have very flexible positioning - they always go right below the associated axis (and tick labels if they're shown) and you can set their thickness as a fraction of plot area, but perhaps we could allow them to get a full domain: [bottom, top] or even domain: {x: [left, right], y: [bottom, top]} so you can control the width too, not be restricted to the same width as the x axis.

arlowhite commented 6 years ago

Does this issue also cover using a rangeslider along the yaxis? I want to use a rangeslider with {type: 'histogram', y: myData} Or should I create a new GitHub issue to cover that situation?

yaxis rangeslider not working: https://codepen.io/arlowhite/pen/rvxKwB

alexcjohnson commented 6 years ago

@arlowhite y-axis range sliders would be a separate effort - feel free to create a new issue for it.

dss010101 commented 3 years ago

is there a way to position the rangeslider under subplots? have 4 subplots..and it always appears just under the first and partially covers the 2nd subplot.

ludomitch commented 2 years ago

Is there a workaround to make this work?

flightmansam commented 2 years ago

Would love a good workaround for this

filipesmg commented 1 year ago

I did a small "hack" in js to move the slider (JQuery needed):

function move_slider(id,translation) {
    let slider = $(".rangeslider-container", `#${id}`)
    let regex = /\(([^)]+)\)/
    let translate = regex.exec(translation)[1].split(",").map((val) => { return parseInt(val); });
    let position = regex.exec(slider.attr("transform"))[1].split(",").map((val) => { return parseInt(val); });
    slider.attr("transform", `translate(${translate[0] + position[0]},${translate[1] + position[1]})`)

The id is the div.id of the plot and the translation variable should be something like '(0,-30)' to move it up by 30px (not sure about the units).