Plotly / python how to specify config options when displaying HTML?

Question

Am trying to remove the ModeBar in a plotly plot that's generated in Python and displayed in HTML with JS. Per the documentation, you can specify a config such as:

config = dict({'displayModeBar': False})
fig.show(config=config)

But am exporting the fig to json with graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder) (not using the .show() function)

And then displaying it with JS:

<script>
 var graphs = {{graphJSON | safe}};
 Plotly.newPlot('graph',graphs,{});
</script>

I tried specifying a config in the newPlot call but no luck, it seems to be ignored:

Plotly.newPlot('graph',graphs,{},{displayModeBar: false});

How can I specify config options when converting to json? Is there any other way to get rid of the ModeBar (the top bar that is displayed on mouseover)

Have you found a solution to this? The config in JavaScript is ignored as you reported. This must be an issue when plot is generated in Python. — bachree
– bachree, Commented Apr 12, 2021 at 21:23
I am using CSS to remove the toolbar as a temporary solution with a change to the following class: "modebar-container {display: none; }" — bachree
– bachree, Commented Apr 12, 2021 at 21:29

Jérôme · Accepted Answer · 2021-10-01 14:13:11Z

5

Had similar issue where config was ignored when using newPlot(). Attaching the config object straight to graph data worked for me.

<script>
 var graphs = {{graphJSON | safe}};
 graphs.config = {'displayModeBar': false}
 Plotly.newPlot('graph', graphs);
</script>

edited Oct 1, 2021 at 14:13

Jérôme

14.9k9 gold badges74 silver badges119 bronze badges

answered Apr 20, 2021 at 14:53

user15707222

511 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nils Over a year ago

This is pretty horrifying considering the documentation for newPlot(...)(plotly.com/javascript/plotlyjs-function-reference) which clearly states that you can provide the configuration as the last argument. I tried that but it was ignored, attaching a config property to the graphs object worked.

Naiyar Imam · Accepted Answer · 2022-06-14 08:35:39Z

1

Plotly.newPlot('graph', {...graphs, config: {displayModeBar: false}});

This is how, I was able to solve this issue.

answered Jun 14, 2022 at 8:35

Naiyar Imam

111 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

joelhoro · Accepted Answer · 2020-06-20 16:05:49Z

0

According to the reference, you want to remove that empty {} and write this instead

Plotly.newPlot('graph',graphs,{displayModeBar: false});

answered Jun 20, 2020 at 16:05

joelhoro

9201 gold badge10 silver badges21 bronze badges

1 Comment

bachree Over a year ago

The config in JavaScript is ignored for some reason. This must be an issue when plot is generated in Python.

szofar · Accepted Answer · 2022-06-03 18:29:36Z

You can get this to work for layout options and config options without any hacky extra code in the HTML. The key is remembering what render_template accepts as parameters (valid json).

Convert the image, layout, and config dictionaries to json. Your "image" here could also be a "graph_object" or "figure".

image = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
layout = json.dumps({'margin': dict(l=0, r=0, t=50, b=0)})
config = json.dumps({'displaylogo': False, 'modeBarButtonsToAdd': ['drawclosedpath', 'eraseshape']})

Pass those to render_template.

return render_template('example.html', image=image, layout=layout, config=config)

Use all three in your html template, following the safe convention if you trust the data.

<script>
Plotly.newPlot('image', {{ image | safe }}, {{ layout | safe }}, {{ config | safe }});
</script>

Put that all together, and your final code would look something like this

@app.route("/", methods=['GET', 'POST'])
def create():
    image = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    layout = json.dumps({'margin': dict(l=0, r=0, t=50, b=0)})
    config = json.dumps({'displaylogo': False, 'modeBarButtonsToAdd': ['drawclosedpath', 'eraseshape']})
    return render_template('example.html', image=image, layout=layout, config=config)

<body>
  <div class="chart" id="image">
    <script>
      Plotly.newPlot('image', {{ image | safe }}, {{ layout | safe }}, {{ config | 
safe }});
    </script>
  </div>
</body>

That's it! No need to set the config/layout somewhere other than the place where you set your figure.

Collectives™ on Stack Overflow

Plotly / python how to specify config options when displaying HTML?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related