# Plotly modebar not displaying properly

**URL:** <https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860>\
**Category:** plotly.js\
**Created:** [May 31, 2024, 9:19am UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860 "2024-05-31T09:19:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![loic.bn](https://avatars.discourse-cdn.com/v4/letter/l/da6949/32.png) [@loic.bn](https://community.plotly.com/u/loic.bn)\
**Post date:** [May 31, 2024, 9:19am UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860/1 "2024-05-31T09:19:50Z")

</div>

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)

 ![bug](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/d/1daafff31c1cffae4095a45277ba30447c1b8a3c.png)

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 ?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [June 4, 2024, 7:27pm UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860/2 "2024-06-04T19:27:14Z")

</div>

Hey @loic.bn, welcome to the forums.

I have never seen that before, could you provide some sample code which reproduces this behavior?

---

<div class="post-metadata">

**Author:** ![loic.bn](https://avatars.discourse-cdn.com/v4/letter/l/da6949/32.png) [@loic.bn](https://community.plotly.com/u/loic.bn)\
**Post date:** [June 5, 2024, 8:06am UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860/3 "2024-06-05T08:06:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [June 6, 2024, 2:07pm UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860/4 "2024-06-06T14:07:20Z")

</div>

Still not enough information to possibly help you.

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [June 6, 2024, 4:05pm UTC](https://community.plotly.com/t/plotly-modebar-not-displaying-properly/84860/5 "2024-06-06T16:05:48Z")

</div>

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.

```auto
<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">

```