Cannot read property 'x' of undefined when using Carpet and Contourcarpet

📊 Plotly Python
1

Hello Everyone,

So i have been working with Contourcarpet. Everything was working fine for the first set of data I got. However, I have some issues when trying to plot the new data and I cant figure out the problem. Using the following code:

def top_view(data):

    x_end = data[-1][0]
    y_start, y_end = data[-1][1], data[-1][2]
    Ev, Eh, Eq = clean_data(data)
    

    # Create a and b arrays which determines the x and y axis
    a = []
    b = []
    for i in range(Ev.shape[0]): 
        a.extend(np.arange(0, Ev.shape[-1]).tolist())
        b.extend(np.full((Ev.shape[-1]), i))
    
    # Change a,b to numpy arrays
    a, b = np.array(a), np.array(b)

    # Set x, y and z data
    x = Ev.flatten()
    y = Eh.flatten()
    z = Eq.flatten()
    
    fig = go.Figure()
    fig.update_layout(
        xaxis_title="Vertical length in meters",
        yaxis_title="Horizontal length in meters",
        font=dict(
            size=12,
            color="#000000"
        ),
        # hovertemplate='<b>z:%{z:.2f}</b><br>x:%{x:.2f} <br>y: %{y:.2f} ',
        # hoverlabel=dict(
        #     bgcolor="white", 
        #     font_size=10, 
        # )
    )

    fig.add_trace(go.Carpet(
        a = a,
        b = b,
        x = x,
        y = y,
        aaxis = dict(
            showticklabels = "none",
            showgrid = False,
        ),
        baxis = dict(
            showticklabels = "none",
            showgrid = False,
        )
    ))

    fig.add_trace(go.Contourcarpet(
        a = a,
        b = b,
        z = z,
        name = 'Lux',
        contours = dict(
            showlabels = True,
            start = 1,
            end = np.max(Eq),
            size = 50
        ),
        colorbar = dict(
            title = 'E in Lux',
            titleside = "right",
        ),
        colorscale='Jet'
    ))
    # Add street lines
    fig.add_shape(
        type= 'line',
        line=dict(dash="dash", color='#000000', width=2),  
        yref= 'y', y0=-1.5, y1=-1.5,
        xref= 'x', x0=0, x1=x_end
    )
    fig.add_shape(
        type= 'line',
        line=dict(dash="solid", color='#000000', width=2),      
        yref= 'y', y0=-4.5, y1=-4.5,
        xref= 'x', x0=0, x1=x_end
    )
    fig.add_shape(
        type= 'line',
        line=dict(dash="solid", color='#000000', width=2),   
        yref= 'y', y0=1.5, y1=1.5,
        xref= 'x', x0=0, x1=x_end
    )
    # Set range of x and y axis
    fig.update_xaxes(range=[0, x_end])
    fig.update_yaxes(range=[y_start, y_end])  
    # fig.update_traces(hovertemplate='<b>z:%{z:.2f}</b><br>x:%{x:.2f} <br>y: %{y:.2f}')

    return fig

I get the following error message

TypeError: Cannot read property ‘x’ of undefined

at Object.r.getVisibleSegment (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:2239986)

at SVGPathElement.<anonymous> (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:2891326)

at http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:315661

at ut (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:312027)

at Array.Y.each (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:315634)

at SVGGElement.<anonymous> (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:2891300)

at http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:315661

at ut (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:312027)

at Array.Y.each (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:315634)

at http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_2m1595872686.js:2:2891213

I am not sure how to fix this problem since it seems to be and issue in JS.

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)

However, I have tried to plot it offline using plotly.offline.plot(fig, auto_open = True) and it worked.

Plotly
Plotly1876×915 65.8 KB

I hope if someone can explain to me what the issue is and maybe how to fix it.
Thanks!

2

I was able to find the issue. It seems like when setting showlabels = True in contour, it would trigger the following error TypeError: Cannot read property ‘x’ of undefined. Unfortunally I was not able to find the exact problem. However, I dont have to show them so setting it to showlabels = False is also a solution for me.

I have another question regarding Carpet and Contourcarpet. Is there a way to add hoverdata like in the contourplots https://plotly.com/python/contour-plots/. Usually, I should combine customdata with hovertemplate . However hovertemplate is neither a property of Carpet nor of Contourcarpet. any help is appreciated thank you in advance.