Dcc.Graph Awkward modebar position

Dash Python
1

When i manually set the margins of a Dcc.graph to be smaller than default, it makes the modebar position awkwardly around the righthand corner.

Also when trying to hover a datapoint above the modebar it does not display any tooltip, however this does not concern me too much.

The following code will give an example of this happening:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
html.Div(dcc.Graph(
figure={‘data’: [{
‘type’: ‘scatter’,
‘y’: [1,2,3,4,5,6,7]
}],
‘layout’: {
‘height’:400,
‘margin’: {‘l’: 60, ‘r’:10, ‘b’:40, ‘t’: 40, ‘pad’: 4}
}
}),
id=‘graph1’,
)
])

if name == ‘main’:
app.run_server()

Is it possible to reposition the modebar to make it snug in the upper right corner ?

2

Related question:
Is possible to position the modebar in the area of graph, e.g., in the top of a map? Right now, it is positioned at the right top corner, takes a significant space. I saw some Dash examples did this.
THanks

1 Like
3

Just for documentation. This issue was caused by my css file. Which, unbeknownst to me, contained this:

.js-plotly-plot .plotly .modebar {
padding-top: 5%;
margin-right: 3.5%;
}

4

I can see the same thing when I do inspect in the browser. I’m trying to overwrite the padding-top and margin-right variables. Were you able to find the file that contained these and modify them? If so, where was the file located?

5

I am not sure about the “inspect in browser” part tbh. I just run the py file.

In my case the .css file is contained in a folder called assets (assets folder is within the folder of the py file i run). Mine was called styles.css, but i am pretty sure the name of the file does not matter as long as it is a .css file.