Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

As when clicking on a legend, filter several graphs?

Hello everybody!
I have this problem
How to make that when you click on the legend SF the bars are filtered on both diagrams, and not on one ??
Help me please((

-- coding: utf-8 --

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
html.H1(children=‘Hello Dash’),

html.Div(children='''
    Dash: A web application framework for Python.
'''),

dcc.Graph(
    id='example-graph1',
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'
        }
    }
),
   dcc.Graph(
    id='example-graph2',
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'
        }
    }

])

if name == ‘main’:
app.run_server(debug=True)

1 Like

Try grouped legends - see the docs here: https://plot.ly/python/legend/#grouped-legend

1 Like

Hello!
See, I want to clip on the SF sign on the first diagram
She removes bars relating to SF
But I want to close SF bars and on the second diagram when pushing on SF
How do this be realized bro??

Chris, please look at this example.
When we click on the legend on the histogram, automatic filters are filtered and other diagrams
How to achieve this?

https://plot.ly/~etpinard/4916/nyc-car-wrecks/#plot

That example uses grouped legends. See the documentation link that I posted above.

dcc.Graph(
id=‘example-graph1’,
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [4, 1, 2], ‘type’: ‘bar’, ‘name’: ‘SF’,‘legendgroup’: ‘group1’, },
{‘x’: [1, 2, 3], ‘y’: [2, 4, 5], ‘type’: ‘bar’, ‘name’: u’Montréal’,‘legendgroup’: 'group2’, },
],
‘layout’: {
‘title’: ‘Dash Data Visualization’,

}
}
),
dcc.Graph(
id=‘example-graph2’,
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [4, 1, 2], ‘type’: ‘bar’, ‘name’: ‘SF’,‘legendgroup’: ‘group1’, ‘showlegend’: False},
{‘x’: [1, 2, 3], ‘y’: [2, 4, 5], ‘type’: ‘bar’, ‘name’: u’Montréal’,‘legendgroup’: ‘group2’, ‘showlegend’: False},
],
‘layout’: {
‘title’: ‘Dash Data Visualization’,

}
}
),

This does not work for my examples

If you read the code from the example you linked it shows that subplots were used to achieve the grouped legends. The data is being plotted on a single figure with a shared layout.

In the code that you modified above, you have two distinct dcc.Graph objects, that is, two separate figures/layouts. That’s probably why it doesn’t work.