Black Lives Matter. Please consider donating to Black Girls Code today.

Symbols inside graphs

Hi!!

I’d like to do something like this with two graphs in Dash.
I need to draw arrows and other symbols inside graphs.

Is possible??

Thank you so much!

graph

Hi @Sampal you can combine the two graphs in one using subplots, and then use plotly shapes and annotations to add line, arrows, circles etc. See a basic example below

from plotly.subplots import make_subplots
import plotly.graph_objects as go
fig = make_subplots(1, 2)
fig.add_trace(go.Bar(x=[1, 2, 3], y=[1, 2, 3]), 1, 1)
fig.add_trace(go.Bar(x=[1, 2, 3], y=[1, 2, 4]), 1, 2)
fig.add_shape(
        # Line reference to the plot
        go.layout.Shape(
            type="line",
            xref="paper",
            yref="y",
            x0=0,
            y0=1,
            x1=1,
            y1=1,
            line=dict(
                color="DarkOrange",
                width=3,
            ),
        ),
)
fig.show()

Note that I’ve used a different reference for x (paper, that is all the graph without the outer margins) and for y (data coordinates). Some links for further information

2 Likes

It’s not exacly what I looking for but it’s close. Thak you very much @Emmanuelle for your time. :slight_smile:

@Sampal Just use this sample:

html.P(['▲'], style={'color': 'green'})
OR
html.P(['▼'], style={'color': 'red'})