How can you make arrows shown at all zoom levels?

📊 Plotly Python
1

This code will only show the arrow when zooming closely around x=50. Trying huge arrow sizes won’t show the arrow at all. How would you get an arrow on a line trace to show at all zoom levels?

In my real code (not the MRE below) I would like to have one or two large arrows at specific points on each line trace, where each line trace is 60-200 indices long. I’d like the arrows to show when no zoom is applied, as well as when zooming. While having them point in the direction of the two plot elements by which the arrow is defined using the annotation api (or the gradient of the chart at that point when the zoom level does not differentiate each data point).

Can that be accomplished?

import numpy as np
import pandas as pd
import plotly.express as px

# Sample data
np.random.seed(42)
df = pd.DataFrame({
    'X': np.linspace(0, 200,200),
    'Y1': np.random.randn(200).cumsum(),
    'Y2': np.random.randn(200).cumsum()
})

# Create a line plot using Plotly Express
fig = px.line(df, x='X', y=['Y1', 'Y2'], title='Line Plot with Arrow Heads')

# Add arrows to the Scatter trace (Y1)
arrow_indices = [50]  # Define arrow positions
for i in arrow_indices:
    fig.add_annotation(
        x=df['X'][i], y=df['Y1'][i],
        ax=df['X'][i + 1], ay=df['Y1'][i + 1],
        xref='x', yref='y', axref='x', ayref='y',
        arrowhead=3, arrowsize=5, arrowwidth=3
    )

# Show the figure
fig.show()

Or can we create an arrow shape without the annotation object (but same color as the trace it should be one) if that would afford a more natural solution?

Thanks!

2

Hi @matan3 !

I think the main issue is the length of the arrow compare to the arrowwidth and arrowsize.

arrowwidth and arrowsize are constant when zooming and when there is no zoom the length is too short to display an arrow with arrowsize=5, arrowwidth=3.
You can try smaller values for those parameters.

If you want to adapt arrowwidth and arrowsize while zooming, you should use Dash callbacks.

3

Thanks.

My objective had been to show the arrows mainly when not zoomed, and if you increase the arrowsize to much larger values it does not show either, when not zoomed at least in my trials. Maybe I should somehow draw an arrow using some plain graphics primitives for that goal.

Given the lack of a clear path, I had abandoned this in favor of placing a text annotation with an arrow character in it, above the traces. This doesn’t scale to all scenarios of course, such as to the scenario where there’s more than just a very small number of line traces.

As to dash, I have not used it as of yet, but am curious to learn ― as a case in point ―about the complexity of such callbacks’ contents in the case at hand.