Plot lot of vertical lines in plotly

📊 Plotly Python
1

I have a timeseries plot in plotly and list of timestamps for which I want to create a vertical line on my plotly plot. I understand that vertical line can be drawn using shape as follow:

‘shapes’: [
# Line Vertical
{
‘type’: ‘line’,
‘x0’: 1,
‘y0’: 0,
‘x1’: 1,
‘y1’: 2,
‘line’: {
‘color’: ‘rgb(55, 128, 191)’,
‘width’: 3,
},
}

But this method doesn’t scale if the number of vertical lines is more like 10 or so. In matlotlib I use to plot vertical line as follow:

xcoords = [timestamp1, timestamp2, timestamp3]
for xc in xcoords:
plt.axvline(x=xc)

Is there any equivalent command in plotly such that I can draw a vertical line from a list over plotly plots.

2

Hi @kshitij,

I believe the shapes approach is currently the only way to get a truly infinite vertical line. So if this is what you need, then I’d recommend opening a issue in the plotly.js repository regarding the performance problems you’re seeing.

The only real alternative is to model a vertical line with one or more scatter or scattergl traces. This would require you to choose explicit min/max y-coordinates for the vertical lines. If you need to draw a whole bunch of these lines, I’d recommend modeling them as a single scatter(gl) trace by interspersing None values to break the line and setting connectgaps to False (see https://plot.ly/python/line-charts/#connect-data-gaps).

If this last paragraph isn’t clear, feel free to share a proof-of-concept example of what you’re trying to do (using the slow method above), and I can show you what it could look like using a scatter trace.

Hope that helps!

3

Hi @jmmease ,
I used plotly to plot sensor data and i used the shapes feature to draw a grid like engineering graph paper. and everything working alright when the number of points plotted is less because when the points are less number of grid lines are drawn in other words less , lesser number of shapes are drawn because each gridline is a shape .I have to plot lakhs of data now so tens of thousands of shapes should be drawn to form the grid. the html is generated but it takes forever to load the graph. Is there any way to improve the performance when tens of thousands of shapes(lines) are drawn .so that graph loads . Any help will be appreciated.
Thank you

4

cross reference discussion in: Loading the html takes ages while the HTML include more shapes

1 Like