Range Slider Anchoring

plotly.js
1

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.

RangeSliderOverlap.png969×917 62.4 KB

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.

2

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

v1.18.0 should be out tomorrow morning.

3

I still see this issue in v1.18.1

4

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.

5

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

6

Hmm ok. What is the desire behaviour here?

7

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

8

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 Ability to Provide Title to Legend/ Legend Groups · Issue #689 · plotly/plotly.js · GitHub. You may want to subscribe to this issue for the latest development info.

9

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

10

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