🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Issue with Positioning of modebar


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.

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

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

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

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?