Trying to get Legend Titles to work

Dash Python
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.