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

Dash Legend Label - extrange behavoiur scatterplot

Hi,

I have built a dashboard using different graph types and misteriously when I use the scatter type and “Aa” comes up below the legend labels.

It does not happen when I use other type of graphs - what could be the reason?

This is a sample of the code I use:

# create data list
traces = []
for i in cols:
    formattedList = ["{:,}".format(int(member)) for member in result[i]]
    text_hover = [dat + " , " + "{:,}".format(int(member)) for dat, member in zip(result['date'], result[i])]

    traces.append(go.Scatter(
        x=result.index,
        y=result[i],
        text=formattedList,
        textposition='bottom center',
        mode='lines+markers+text',
        hoverinfo='text',
        hovertext=text_hover,
        opacity=0.7,
        marker={
           'size': msize,
           'line': {'width': 0.5, 'color': 'white'}},
        name=i
         )
    )

For the layout I use a base layout that I modify for each graph:
This is the base layout:

layout_fig = dict(
height=gheight,
font={
“family”: “Raleway”,
“size”: ftxt_size
},
#titlefont=dict(color="#191A1A", size=‘14’),
margin=dict(
l=70,
r=40,
b=60,
t=60
),
#width=400,
hovermode=“closest”,
showlegend=True,
separators=’,.’,
legend={
“x”: -0.0228945952895,
“y”: 1.2,
“orientation”: “h”,
“yanchor”: “top”
},
xaxis=dict(
showgrid=False,
ticks=‘outside’,
automargin=True
),
yaxis=dict(
title=’’,
zeroline=False,
tickformat=’,2r’,
titlefont=dict(
size=ftxt_size,
color=‘rgb(107, 107, 107)’
),
tickfont=dict(
size=ftxt_size,
color=‘rgb(107, 107, 107)’
)
)

58

The Aa appears when you have a trace that has the text key inside it. We might end up removing this in future versions. For now, one workaround is to create a new trace with the same values but without text, and then hide the legend items from the original trace. That is:

[
    {x: [1, 2, 3], y: [3, 1, 2], text: ['a', 'b', 'c'], 'showlegend': False, 'legendgroup': 'trace-1', marker: {color: 'blue'}},
    {x: [1], y: [3], 'showlegend': True, 'legendgroup': 'trace-1', marker: {color: 'blue'}},
]

I’ve created an issue about removing this feature here: https://github.com/plotly/plotly.js/issues/2967

great!! thanks a lot for workaround! it was driving me crazy!!!..
and yes the client did not like it!

1 Like

Has this been implemented in some way by now? Saw an issue, but no direct solution. :slight_smile: