Triangle symbol placed at the end of a line

plotly.js
1

I need to draw a line and a triangle. The triangle needs to be added to the end of the line, i.e. it ends at the end of the line, it does not extend beyond the line, it is placed straight on the line. It should look as follows

image

I tried to implement this using symbols or plain text but the triangle is not perfectly straight on the line. In addition, its end is beyond the end of the line.

var trace1 = {
  x: [5, 5],
  y: [20, 5],
  type: 'scatter'
};
var trace2 = {
  x: [5],
  y: [5],  
  type: 'markers',
  marker: {
    size: 15,
    symbol: 'triangle-right',
    line: {
      color: 'orange' 
    }
  }
};

var data = [trace1, trace2];
var layout = {showlegend: false};
Plotly.newPlot('myDiv', data, layout);

image
I added a red line to pinpoint where the triangle should end (on y-axis).
I tried to set x/y coordinates for the symbol such as

x: [5.01],
y: [5.49],

and it looks good as long as I do not zoom in. Once I do, the triangle is no more on the line
image

2

Hi @dr_steel_hammer welcome to the community.

Looking at the python docs, this should be possible. Eventough the javascript docs do not have the same examples, I assume the python examples to work in JS too.

Does this help?

3

How exactly? I tried drawing triangles using markers or text and both failed in meeting my requirements.

4

Hey @dr_steel_hammer, here an python example, JS should be pretty much the same. I hope I understood your issue correctly.

EDIT: I notcied just now, that you need to draw a triangle. I tried to achieve this but without success. It seems, that the center of the triangle is used for the symbol positioning whereas the tip of the arrow is used for the arrow symbols.

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

df = px.data.gapminder()

fig = go.Figure(
    data=go.Scatter(
        x=[1,1],
        y=[1,0],
        mode="lines+markers",
        marker=dict(
            symbol="arrow",
            size=15,
            angleref="previous",
        ),
    )
)
fig.show()

newplot
newplot996×360 1.47 KB