Show coordinates when there are no points

plotly.js
1

Hi,

I have created a graph in react-plotly.js.

I am looking to create the equivalent of spike lines but where the coordinate of any location is shown regardless of if there is a data point there. Does anyone know if this is possible? So far I’ve only been able to get it if there is a point in the location.

Thanks for the help!

2

Hi @bpolasek, not sure how to do this.

The only idea I have is adding a imshow trace with the same dimensions as your range. I’m aware that I’m posting a python example, JS should be similar tough.

import plotly.express as px
import numpy as np

# create image and plotly express object
fig = px.imshow(
    np.zeros(shape=(90, 160, 4))
)
fig.add_scatter(
    x=[5, 20, 50],
    y=[5, 20, 50],
    mode='markers',
    marker_color='white',
    marker_size=10
)

# update layout
fig.update_layout(
    template='plotly_dark',
    width=700,
    height=500,
    margin={
        'l': 0,
        'r': 0,
        't': 20,
        'b': 0,
    }
)

# hide color bar
fig.update_coloraxes(showscale=False)

# enable spike lines
fig.update_xaxes(showspikes=True)
fig.update_yaxes(showspikes=True)

gif