Unable to get a Plotly plot central in a modal

Question

I am aiming to load a modal and present a Plotly plot within that modal. This is successfully done, however, the alignment is all wrong. It looks as though the modal is being centred before the Plotly plot has finished being created, and therefore the modal does not take the size of the plot into account.

This is my HTML code (I am using Flask hence the templating):

{% extends "base.html" %}

{% block content %}


  <!-- Trigger the modal with a button -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Short modal
  </button>

<!-- Modal -->
  <!-- Modal -->
  <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->


<script type="text/javascript">

    var graphs = {{graphJSON | safe}};

    var layout = {
                  width: 1200,
                  height: 800
                };

    Plotly.plot('myDiv',graphs,layout);

</script>

{% endblock %}

This is the result and shows the incorrect alignment.

From my research I have found a few attempts to resolve something like this, however, none is these have worked, for example, Plotly plot failed to automatically scale inside a modal. My knowledge of Javascript is beginner level, which I think is half the issue. Any help would be much appreciated!