As when clicking on a legend, filter several graphs?

Dash Python
1

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
2

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

1 Like
4

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??

5

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

6

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

8

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

9

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.