Plotly plot failed to automatically scale inside a modal

Question

I have an issue with Plotly.js and bootstrap. When inserting a graph within a modal, the plot is not automatically scaled to the modal width even if the plot width is set to 100%, and the plot layout option autosize set to true.

When opening the modal, the plot is 100px-wide (instead of 100%) and I have to programatically (or manually) click on the "autoscale" modebar button to correctly display the plot.

You can see this in action with this codepen:

https://codepen.io/anon/pen/PaGOWv?editors=1010

<div class="modal-body">
    <div id="myDiv" style="width: 100%;"></div>
 </div>
 <!-- with plotly option: var layout = {autosize: true}; -->

I would be very happy if someone has a clue of how to display the plot full-width without having to rescale it after render.

Thanks! Arnaud

PS: also posted on github

Md Nasir Fardoush · Accepted Answer · 2018-06-07 12:46:40Z

3

Issue happen because plot loading before modal opening.

You may generate plot or update plot layout on loading modal that's working fine.

$('#myModal').on('shown.bs.modal', function (e) {
  Plotly.newPlot('myDiv', data, layout);
})

or

$('#myModal').on('shown.bs.modal', function (e) {
  Plotly.relayout('myDiv',layout);
})

Example here

edited Jun 7, 2018 at 12:46

answered Jun 7, 2018 at 10:19

Md Nasir Fardoush

8204 silver badges16 bronze badges

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

2 Comments

Arnaud Over a year ago

Thanks! What if I have a tabpanel inside this modal? I still have issues going from one tab to the other. See this codepen

Arnaud Over a year ago

OK. Plotly.Plot.resize() seems to be enough.

Collectives™ on Stack Overflow

Plotly plot failed to automatically scale inside a modal

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related