Help: How to use plotly's config

[xiaozhiagi]

Question

How to configure config in ui. plotly? The following code is a demo of configuring config in plotly。

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[1, 3, 1]))

config={
    'modeBarButtonsToRemove': ['zoom', 'pan']
}

fig.show(config=config)

[falkoschindler]

Hi @txhy2018,

There's currently no official way to set config options for ui.plotly, but a workaround:

fig = go.Figure()
fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 3, 1]))
plot = ui.plotly(fig)
plot._props['options']['config'] = {'modeBarButtonsToRemove': ['zoom', 'pan']}

[justiceamoh]

Hi @falkoschindler ,

Thanks for the amazing NiceGUI package. I really like it and have started transitioning many of my apps to it.

I wanted to check on this workaround for setting config options for ui.plotly. Does it still work? For some reason, it's having no effect in my app. I have something like this:

elements["plot"] = ui.plotly(elements["fig"]).classes("w-full")
elements["plot"]._props["options"]["config"] = {"modeBarButtonsToRemove": ["zoomIn", "zoomOut", "select", "lasso"]}

[falkoschindler]

Thanks, @liang-jacky!
As far as I can tell, the workaround is still working. Without setting "modeBarButtonsToRemove" there are more buttons in the mode bar.

[flooxo]

I want to enable scrollZoom but this workaround has no effect. Is there another way to enable this feature?
plot._props["options"]["config"] = {"scrollZoom": True}

[pylogger-html]

No scrollZoom with the mouse really bothered me, so I figured out a way to do it. It looks like the update() or update_figure() routines in nicegui and other charting routines will remove the config option you put, so you need to add this call every time you do something to the graph.

plot = ui.plotly(self.fig).classes('w-full h-96')
plot.update()
plot.props["options"]["config"] = {"scrollZoom": True}

If you add new series or alter anything in the plotly graph element, it will remove the scrollZoom parameter so make sure you add in the config change in props after.

Also, the panning/tool restrictions seem to carry through unless you have series with 2 y-axes defined.