How to add a config to a Plotly object?

Question

In Shiny for Python, how to add a config to a Plotly figure object as usually done by:

fig.show(config={
    'modeBarButtonsToRemove': [
        'autoScale2d', 'select2d', 'lasso2d', 'pan2d', 'zoom2d', 'zoomOut2d', 
        'hoverClosestCartesian', 'hoverCompareCartesian',
        'toggleSpikelines', 'sendDataToCloud', 'editInChartStudio'
    ],
    'displaylogo': False
})

As there is no show() command to be called, how to achieve this?

Answer 1

One smart you can do is convert the Python Plotly figure to JSON, then using JavaScript to render it in the browser with a custom configuration that removes unwanted toolbar buttons and hides the Plotly logo.

fig_json = fig.to_json()
Plotly.newPlot('plotly-div', plotlyData.data, plotlyData.layout, config);

Working example;

from shiny import App, ui, render
import plotly.express as px
import pandas as pd
import json

# Sample data
df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y': [2, 5, 3, 8, 7],
    'category': ['A', 'B', 'A', 'B', 'A']
})

# UI
app_ui = ui.page_fluid(
    ui.h2("Plotly with Custom Config in Py-Shiny"),
    ui.div(id="plotly-container"),
    ui.tags.script(src="https://cdn.plot.ly/plotly-latest.min.js"),
    ui.output_ui("my_plot")
)

# Server
def server(input, output, session):
    @render.ui
    def my_plot():
        # Create the figure
        fig = px.scatter(
            df, 
            x='x', 
            y='y', 
            color='category',
            title="Sample Scatter Plot with Custom Config"
        )
        
        # Configure the figure layout
        fig.update_layout(
            width=800,
            height=500
        )
        
        # Convert figure to JSON
        fig_json = fig.to_json()
        
        # Define the config
        config = {
            'modeBarButtonsToRemove': [
                'autoScale2d', 'select2d', 'lasso2d', 'pan2d', 'zoom2d', 'zoomOut2d', 
                'hoverClosestCartesian', 'hoverCompareCartesian',
                'toggleSpikelines', 'sendDataToCloud', 'editInChartStudio'
            ],
            'displaylogo': False,
            'displayModeBar': True
        }
        
        # Create HTML with embedded Plotly
        html_content = f"""
        <div id="plotly-div" style="width:100%;height:500px;"></div>
        <script>
            var plotlyData = {fig_json};
            var config = {json.dumps(config)};
            Plotly.newPlot('plotly-div', plotlyData.data, plotlyData.layout, config);
        </script>
        """
        
        return ui.HTML(html_content)

# Create and run the app
app = App(app_ui, server)

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

Output;