Black Lives Matter. Please consider donating to Black Girls Code today.

Range Slider Anchoring

Good day. I can’t seem to position my range slider without overlapping the the legend. I re-positioned my legend at the bottom of the graph. Even if I adjust the y-anchor of my legend, somehow the top part is still overlapping the bottom of the range slider.

The image above, is just my test on moving the legend far down. Here’s the snippet of my layout using javascript:

var layout = {
        xaxis: {
            tickformat: "%b %e",              
            rangeslider: {}
        },
      
         yaxis: {
            title: "Views"
        },
      
        title: 'Top 1 to 10 Games By Daily Views (2016-10-03 to 2016-10-10)',
       
        hovermode: 'closest',

        legend: {
            xanchor: 'center',
            yanchor: 'top',
            y: -1,
            x: 0.5,
            orientation: 'h'
        }
    };

Any suggestions on how to fix this?
Thanks in advance.

I believe this will be fix in the next plotly.js release (v1.18.0).

v1.18.0 should be out tomorrow morning.

I still see this issue in v1.18.1

I was able to place the legend under the range slider in http://codepen.io/etpinard/pen/amxYZY

Maybe you can try to modify my codePen to better explain your problem.

Sorry for the wait.

when I add height and width to the div. Also I notice huge gap between chart and slider

Hmm ok. What is the desire behaviour here?

if you see, the legend is clearly overlapped by the range slider (from trace 6 I can see the legends while trace 0 to trace 5 are hidden behind slider). expecting a fix for that. In short what user iron59 has raised a issue for is still existing in v1.18.1

I see, but regardless of where they are put, there’s no room for both a range slider and a legend on a 300px x 300px graph. It is unclear how plotly.js is supposed to handle this scenario.

I believe part of what you’re describing relates to https://github.com/plotly/plotly.js/issues/689. You may want to subscribe to this issue for the latest development info.

Even though if I don’t specify height attribute it still overlaps with whatever default height plotly takes.

I see. You might want to look at How to move a big legend above the plot for a workaround.