Issue with Positioning of modebar

plotly.js
1

Hello,

I’ve been trying to get the modebar of my graphs positioned flat above the graph exactly how it is in the Plotly.js tutorials. However, the modebar is currently appearing as a rectangle in the upper right hand corner of my graphs on top of the legend. Is there anyway to specify it to go on top?

I have searched high and low on this forum for an answer but to no avail. I have tried playing around with the CSS:

.js-plotly-plot .plotly .modebar {
height: 15px;
width: 100px;
}

But that only produced funky results. Any help would be greatly appreciated!

P.S: I tried to capture a screenshot of my graph with the modebar present but it is difficult because you need to hover the graph.

2

Hmm. That soundn’t happen. Would you mind sharing a reproducible example to help us debug?

3

Does anyone have answer to this question?? I have same problem and do not know how to fix

4

Hi, etienne. I have found the same error plotting a line chart that gets its modebar placed on the top left corner.
I have created a Codepen with an example of that behaviour:
Example of incorrect modebar postion

Don’t know if it’s related to the fact that it’s on an accordion div, but I set the height of the div and the chart. I also build it after it is expanded.

Hope it helps,
Best regards

6

when i tried on codepen code works, but in visual studio does not perfectly. when i clicked TDHF/TDDFT bar does not appear or nothing occurs but when cliked ev/cm/nm icons plot appears. probably i tried with missing libraries. how can fix this problem?