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

plotly.js
1

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?

2

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)

3

It returns this error

“Error: Something went wrong with axis scaling plotly-latest.js:127334:19
setScale https://cdn.plot.ly/plotly-latest.js:127334
…”

which is the same as before. Could it be that bootstrap interferes with the rendering of the heatmap?

5

Was a fix ever found for this? I am running into a similar issue with a heatmap I’m trying to display. Error below:

react-dom@16.v1_2_2m1581976633.8.6.min.js:117
Error: Something went wrong with axis scaling
    at Object.t.setScale (async~plotlyjs.v1_8_0m1580836772.js:1)
    at async~plotlyjs.v1_8_0m1580836772.js:1
    at SVGGElement.<anonymous> (async~plotlyjs.v1_8_0m1580836772.js:1)
    at async~plotlyjs.v1_8_0m1580836772.js:1
    at ut (async~plotlyjs.v1_8_0m1580836772.js:1)
    at Array.W.each (async~plotlyjs.v1_8_0m1580836772.js:1)
    at draw (async~plotlyjs.v1_8_0m1580836772.js:1)
    at Object.r.drawMarginPushers (async~plotlyjs.v1_8_0m1580836772.js:1)
    at A (async~plotlyjs.v1_8_0m1580836772.js:1)
    at Object.l.syncOrAsync (async~plotlyjs.v1_8_0m1580836772.js:1)

My code:

import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash_table import DataTable

app = dash.Dash()
application = app.server

app.layout = html.Div([
    html.Div([
        dcc.Graph(
            id='graph',
            style={'display': 'inline-block', 'width': '48%'},
        ),
    ],
        id='graph-label-div',
        style={
            'display': 'none'
        }
    ),
    html.Button(
        'This is a BUTTON',
        id='analyze-button'
    ),
])

@app.callback(
    [Output('graph', 'figure'),
     Output('graph-label-div', 'style')],
    [Input('analyze-button', 'n_clicks')]
)
def update_chart(n_clicks):
    if n_clicks is None:
        raise dash.exceptions.PreventUpdate

    z_data = [[0.50, 0.10], [0.25, 0.15]]

    fig_data = go.Heatmap(z=z_data, x=['X1', 'X2'], y=['Y1', 'Y2'], zmin=0, zmax=1)
    layout = go.Layout(width=480, height=480, title='Chart Title')

    fig = go.Figure(data=fig_data, layout=layout)
    style = dict(display='initial')

    return fig, style

if __name__ == '__main__':
    application.run(debug=True, port=8080)

I’m using plotly==4.5.0

6

Upon further review, the issue seems to be in this part of the code:

        id='graph-label-div',
        style={
            'display': 'none'
        }

By setting the display to none and then using the callback to display the chart (i.e. changing the display parameter to inline-block), Dash produces the supplied error.

However, if the code is changed to:

        id='graph-label-div',
        style={
            'display': 'inline-block'
        }

The code runs just fine. The downside is that there is now an unaesthetic, empty chart that now displays before the callback triggers the actual graph.

3 Likes
7

Thanks, just met the same problem.

8

had same problem. Temporary fix was to use visibility=hidden instead of display=None. I think what’s happening is the graph callback is getting hit before the div callback so when the graph gets built it has nowhere to get stored because the tag is None, then the tag switches from None back to visible and it’s just an empty graph.

9

Just happened with me. My heatmap was inside a div which was nested by other divs. The top div of the hierarchy was ‘display’: ‘none’, causing the issue.