Is there a way to draw only the last annotation without redrawing them all?

plotly.js
1

Hi,

I am displaying a scatter plot in a high-rate real-time streaming context.
I have to highlight certain “special points” using an arrow starting from the point position and facing down (it’s a requirement of the software I am developing).
I am currently using annotations that allows me to draw arrows. When a new “special point” arrives, I push the new annotation in the layout.annotations array and I use relayout() to display it.
With this approach, each time a new “special point” arrives, I am forced to redraw all the annotations and it takes too much time (since the high rate of the stream that feeds the plot)

My questions are:

  1. Is there a way to draw only the last pushed annotation without redrawing all the annotations? (something like extendTraces for annotation array)
  2. If it’s not possibile, Is there a way to draw an arrow without using annotations but, for example, styling an error bar?
  3. Do you have other suggestions?

Thank you for the response,
Cheers.

2

Calling Plotly.relayout(gd, 'annotations[1]', {/* settings for new annotations */}) should not caused a full redraw except when your graph has autoranged axes. In this case, we redraw all annotations to make room for the new autorange (as annotations contribute to the autorange value).

If you’re concerned with performance more so than styling, I’d recommend using a scatter trace with mode: 'text' instead, which should perform much better.