Is this fish or is this bird? how to restyle the modebar with the help of html elements?

Hello!
at the moment I am developing an application for a client and ran into some aesthetic problems, “the modebar isn’t good enough”, the modebar provided by dash is not looking fancy enough, the client sent me an example of what he wants:

sidebarmenu

as I have already read on the forum, there is no way to style the modebar besides JS or R, is there maybe some way to make a callback in Python for the drawline/drawrectangle button from an HTML button element? so just put the button outside of the plotly object to HTML…

maybe there is some param to modify the figure object after a drawline callback has been sent?

Thank you for your time and commitment to dash and everything around this great solution! It is the best thing I worked with in recent years!

As it turns out, the fig[“layout”][“dragmode”] parameter has to be changed to drawline to emulate a modebar drawline selection.

1 Like

Haha, you were faster than me. Here a MRE for people searching for the same:

from dash import Dash, html, dcc, Input, Output, State
import plotly.graph_objects as go

app = Dash(__name__)

app.layout = html.Div([
    html.Button(id='btn', children='draw_rect'),
    dcc.Graph(
        id='graph',
        figure=go.Figure(
            data=go.Scatter(
                x=[1, 2],
                y=[1, 2]
            ),
            # here I'm setting the dragmode to pan
            layout={'dragmode': 'pan'}
        ),
    )
])


@app.callback(
    Output('graph', 'figure'),
    Input('btn', 'n_clicks'),
    State('graph', 'figure'),
    prevent_initial_call=True
)
def update_dragmode(_, fig):
    figure = go.Figure(fig)
    # change dragmode to drawing a rectangle
    figure.update_layout(dragmode="drawrect")
    return figure


if __name__ == "__main__":
    app.run(debug=True)

Hey, @AIMPED, is there some reference to the figure object, which shows all of the available parameters for the dragmode? And maybe how different buttons are represented in the figure structure? Like “delete selected shape” button etc…

Or showing the currently selected shapes?

Hi @worker1,

if I find the time, I’ll search in the docs but I fear, this is buried in the source code. I included all possible annotation buttons into the modebar of this example and looked what happened in the relayoutData to learn about the different dragmodes.

The delete active shape button for example is not reflected in the relayoutData, so this must be hidden in JS somewhere.