✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Marker rotated at particular angle in js

hi there!
i want to rotate the triangle marker symbol at a particular angle.I am not getting any clue regarding that.

1 Like

We don’t expose a way to do that at the moment unfortunately.

is there any alternative because , am ploting vector lines in xy plot using trignometric functions and i need to show the directions using arrow head

Is there any tentative timeline for this. It is very useful and a conveneient parameter. Both bokeh and matplotlib can do it. Would love if plotly could do it too!

I needed this before too, here. https://community.plotly.com/t/rotate-markers-in-plotly/5456

1 Like

Do you want to rotate all of the triangles at one specific angle or specific triangles at specific angles?

I would like to use such a feature for showing wind direction; here[1] is an example of what we do already, using a different javascript charting tool.

[1] http://smartbay.marine.ie/Chart/GalwayWindSpeed?fullScreen=True

I wanted to do the same thing. Please, inform when you are able to do that.

Same here. In pyplot I manged to do something half decent using vectors. In plotly I have tried with quiver but the scaling causes problems and makes the arrows look whatever depending on what timescale I look at (e.g. one week of data or one month). Would be so much easier if there was an element you could place in a given position with a given rotation.

I have the same problem that most of you have. Have been enjoying plotly up until now but will have to scrap my project and try something else. Crazy this issue is 2 years old and would be simple to fix :frowning:

After having beein fighting with quiver to get some arrows/pointers showing, I discovered annotations. That did the trick! Used annotations arrows (without text). You can create a dictionary of annotations where you define the location of each annotation (tip of arrow). You also define the size and direction of each arrow. The good thing is that the arrows are defined in some kind of pixel coordinates so they look the same independently of zooming etc. For details look at this page (halfway down): https://plotly.com/python/text-and-annotations/
What I then did (well, in python…) was the following:

for winddir in yvalues:
    annotations.append(dict(
                                  x=date.num2date(xvalues[i]), #xvalues contains coordinates in my windspeed fig
                                  y= -1, # just to put the arrows below the windspeed curve
                                  #text="Point 2",
                                  #textangle=0,
                                  ax = xscale*np.cos(winddir), 
                                  ay = yscale*np.sin(winddir),
                                  #font=dict(
                                  #    color="black",
                                  #    size=12
                                  #    ),
                                  showarrow = True,
                                  arrowcolor="black",
                                  arrowsize=1,
                                  arrowwidth=2,
                                  arrowhead=2
                                  ))
    i = i+1
fig1.update_layout(annotations=annotations)