Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Dcc.Graph Awkward modebar position

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 ?

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