Can't show heatmap inside div ( Error: Something went wrong with axis scaling )

HI
I am using plotly to create some heatmap but I came across this problem.
Suppose that my HTML file is made like this

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
      <script src="https://cdn.plot.ly/plotly-latest.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" data-toggle="pill" href="#pills-profile" aria-controls="pills-home" aria-selected="false">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">ciao</div>
      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
          {{plot|safe}}
      </div>
      <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">stai</div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-latest.js"></script>
  </body>
</html>

and i create my heatmap like this

trace = go.Heatmap(
            y=y1,
            x=x1,
            z=z,
            colorscale = [
                            [0.0, 'rgb(255,0,0)'],
                            [0.5, 'rgb(255,255,255)'],
                            [1.0, 'rgb(0,191,255)']
                        ],
        )
        layout = dict(
            title='boh',
            autosize=True,
        )

        fig = go.Figure(data=[trace], layout=layout)

        plot_div = plot(fig, output_type='div', include_plotlyjs=False)

when i put the plot (represented by {{plot|safe}} ) inside a div of the tab it gives the error on the title which is Error: Something went wrong with axis scaling but as soon i put it out it shows the plot.

Is there something obviously wrong that I’m doing?

Could you please check whether upgrading to the latest version of plotly.py solves the issue? The syntax for the Python code would be

import plotly.graph_objects as go
import plotly.io as pio
trace = go.Heatmap(
            y=[1, 1, 2, 2],
            x=[1, 2, 1, 1],
            z=[0.1, 0.3, 0.5, 0.7],
            colorscale = [
                            [0.0, 'rgb(255,0,0)'],
                            [0.5, 'rgb(255,255,255)'],
                            [1.0, 'rgb(0,191,255)']
                        ],
        )
layout = dict(
            title='boh',
            autosize=True,
        )

fig = go.Figure(data=[trace], layout=layout)
div_str = pio.to_html(fig, full_html=False, include_plotlyjs=False)

(we’ve made some major chances to the API in plotly v4)

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online