JupyterDash line shapes incorrect plotted

[nathansegers]

Plotting lines in Plotly and JupyterDash gives a problem. I don't know if the issue is related to Plotly or JupyterDash, depending on which is the expected behaviour.

It did work in a previous version of Plotly.

Versions:

dash==1.17.0
jupyter-dash==0.3.1
plotly==4.12.0

import plotly.graph_objects as go
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table

x_data = [ 54135, 12346, 75492, 64135, 748612, 31548 ]

fig = go.Figure(go.Scatter(x=x_data, y=[1, 2, 3, 4, 5, 6]))
fig.update_xaxes(
        title_text='Segments',
        type='category'
)
fig.add_shape(
      dict(
        type="line",
        xref='x', yref='y',
        x0=x_data[4], x1=x_data[4],
        y0=0, y1=10,
      )
)
fig.show()

app = JupyterDash(__name__)

app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(host='0.0.0.0', port=8003)

But apparently, this gives different results in Plotly as it does in Dash.

Plotly

Dash

(The small part on the left is the zoomed-out result, because the vertical-line was plotted at 31548 (which is the class of the X_data, but Dash seems to regard is as an integer) This only happened in the latest updates (I used to work with plotly=4.8.0 before this error)

[jordankbartos]

I am also encountering this bug. I'm working with plotly in jupyter notebooks. It appears shapes are not rendered correctly in a plot with a categorical x-axis if the shape's x0 and/or x1 values are numeric category values.

Versions:

jupyter core     : 4.6.3
jupyter-notebook : 6.0.3
ipython          : 7.25.0
Plotly           : 5.1.0

Incorrect behavior example: Code:

import plotly.graph_objects as go

category_array = ["a1", "2", "3", "a9"]

trace = go.Scatter(
    x=category_array,
    y=[1, 2, 3, 4],
)

layout = go.Layout(
    xaxis={
        "type": "category",
        "categoryarray": category_array
    }
)

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

fig.add_shape(
    {
        "x0": category_array[1],
        "x1": category_array[2],
        "y0": 1,
        "y1": 2,
    }
)

display(fig)

Output:

Expected behavior example: (shape x0 and x1 values are non-numeric) Code:

import plotly.graph_objects as go

category_array = ["1", "a2", "a3", "9"]

trace = go.Scatter(
    x=category_array,
    y=[1, 2, 3, 4],
)

layout = go.Layout(
    xaxis={
        "type": "category",
        "categoryarray": category_array
    }
)

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

fig.add_shape(
    {
        "x0": category_array[1],
        "x1": category_array[2],
        "y0": 1,
        "y1": 2,
    }
)

display(fig)

Output: