Hello,
In Plotly.js I’m trying to simply render a line chart, the graph is correct however the modebar placement is cursed and is on top of my color values. (see pic)
I also tried another type of graph and got the same result.
Also tried bunch of settings: changed margin, set displaModeBar to always visible, tried to change css property of the div etc…
any ideas ?
Hey @loic.bn, welcome to the forums.
I have never seen that before, could you provide some sample code which reproduces this behavior?
May have forgot to mention that i’m using Plotly inside svelte and importing plotly like this:
onMount(async () => {
Plotly = await import(“plotly.js-dist-min”);
});
and with any Plotly.newPlot I get this modebar
Still not enough information to possibly help you.
I doubt anyone here will be able to reproduce this, but your way in to finding a solution may be to search around in HTML Inspector, and try to spot what may be affecting the sizing and position of the modebar and its containers.
There should be divs like these, and it’s maybe that something in the styling or outer containers may be making one of them display too narrow.
<div class="modebar-container" style="position: absolute; top: 0px; right: 0px; width: 100%;">
<div id="modebar-426588" class="modebar modebar--hover ease-bg">
<div class="modebar-group">