CODEWITHSUNDEEP
jquerytwitter-bootstrap-3bootstrap-modalplotly.js
Arnaud
Arnaud

Reputation: 157

Plotly plot failed to automatically scale inside a modal

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

Upvotes: 4

Views: 2352

Answers (1)

Md Nasir Fardoush
Md Nasir Fardoush

Reputation: 820

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

Upvotes: 3

Related Questions