Trying to get Legend Titles to work

Dash Python
1

I’m trying to get legend titles to work. I’ve upgraded to Dash 1.9 and Plotly 4.5.

I have this in my callback:

...
fig['layout']['legend'] = dict(
                title=dict(text="Alert Level"),
                x=-0.02,
                y=0.8
            )
...

The legend positioning works fine. The title isn’t rendering. What am I missing?

2

Hi @millercommamatt, this is weird indeed. Could you please try a few things:

  • try the example from https://plot.ly/python/legend/#legend-titles in a Jupyter notebook (or a browser renderer) to check that the figure looks like the one of the doc
  • try title="Alert level" (the syntax you’ve used should work I guess, but for the sake of debugging…)
  • check the web console to check whether there are error messages in Javascript
3

After some restarting of software, I now have the legend title showing. Something must have still been holding onto my pre-upgrade environment.

4

I am encountering the same problem. When I draw the plotly graph without dash - the legend has a title. When I draw the graph within dash - the legend doesn’t have a title. Minimum example:

Without dash:

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4, 5],
    y=[1, 2, 3, 4, 5],
    name="Increasing"
))

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4, 5],
    y=[5, 4, 3, 2, 1],
    name="Decreasing"
))

fig.update_layout(legend_title_text='Trend')
fig.show()

With dash:

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4, 5],
    y=[1, 2, 3, 4, 5],
    name="Increasing"
))

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4, 5],
    y=[5, 4, 3, 2, 1],
    name="Decreasing"
))

fig.update_layout(legend_title_text='Trend')

app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(host='0.0.0.0', port=8080, debug=True)

My packages:
dash 1.19.0 pyhd3eb1b0_0
plotly 4.14.3 pyhd3eb1b0_0

5

Hi, Patryk!

Have you been able to solve that problem? I’m dealing with a very similar issue…

6

Hey @cinthia welcome to the Dash community :slightly_smiling_face:

Can you say what version you are using? I just ran the code above for Dash and the legend has title:

image

7

Hi, @AnnMarieW!

Thank you for the fast answer, but looking again I believe my reply is actually off-topic…
I’m using Plotly 5.1.0. I actually have no problem when displaying a single legend, but when i use the legendgroup property the legends have no title. I’ve posted this issue in a different topic that seems more fit. Should I delete my reply in here?

8

Oh, I see. You can keep the post here too. If someone is having the same issue, it will help them find the right answer.

If you can create a minimal example with some sample data, I might be able to help.

9

Sure! I’ve made a simple example:

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({"x": [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5], 
                   "y1": [11, 9, 14, 10, 7, 12, 10, 13, 8, 11, 13, 17, 10, 15, 8], 
                   "y2": [8, 12, 10, 13, 8, 11, 9, 14, 10, 7, 15, 13, 8, 7, 11],
                   "type": ["A", "A", "A", "A", "A", "B", "B", "B", "B", "B", "C", "C", "C", "C", "C"]})

fig = go.Figure()

for i in df.type.unique():
    dff = df[df.type == i]
    fig.add_trace(
        go.Bar(name = i, x = dff.x, y=dff.y1, legendgrouptitle_text="First Group", legendgroup="g1"))

    fig.add_trace(
        go.Bar(name = i, x = dff.x, y=dff.y2, legendgrouptitle_text="Second Group", legendgroup="g2"))
fig.show()

Running the code in Jupyter I have this image in return:

image
image1032×374 5.07 KB

Now doing the same, but using Dash:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({"x": [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5], 
                   "y1": [11, 9, 14, 10, 7, 12, 10, 13, 8, 11, 13, 17, 10, 15, 8], 
                   "y2": [8, 12, 10, 13, 8, 11, 9, 14, 10, 7, 15, 13, 8, 7, 11],
                   "type": ["A", "A", "A", "A", "A", "B", "B", "B", "B", "B", "C", "C", "C", "C", "C"]})
fig = go.Figure()

for i in df.type.unique():
    dff = df[df.type == i]
    fig.add_trace(
        go.Bar(name = i, x = dff.x, y=dff.y1, legendgrouptitle_text="First Group", legendgroup="g1"))

    fig.add_trace(
        go.Bar(name = i, x = dff.x, y=dff.y2, legendgrouptitle_text="Second Group", legendgroup="g2"))

app = dash.Dash(__name__)
app.title = "app"
app.layout = html.Div([
    dcc.Graph(id="bars", figure=fig)
])
if __name__ == "__main__":
    app.run_server(debug=False)

The graph looks like this in my browser:

image
image1366×471 9.12 KB

The legend works and it is separated in groups, but the title is missing.

I’m using dash 1.20.0.

10

Hi @cinthia

If you upgrade to Dash 1.21.0 and make sure that you are also on Plotly version, 5.1.0 then it works:

image

1 Like
11

Hi, @AnnMarieW

Thank you so much! It worked!

1 Like