4

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

Arnaud
  • 157
  • 1
  • 8

1 Answers1

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

Md Nasir Fardoush
  • 790
  • 3
  • 14
  • Thanks! What if I have a tabpanel inside this modal? I still have issues going from one tab to the other. See this [codepen](https://codepen.io/anon/pen/YvGJMe) – Arnaud Jun 07 '18 at 13:38
  • OK. Plotly.Plot.resize() seems to be enough. – Arnaud Jun 07 '18 at 13:59