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

Some dropdown callback options disable others in graph

Hi. I have a problem with a graph generated via a dropdown callback. This is the app I’m trying to build:
https://vacantesmex.herokuapp.com/

The dropdown options are States (mexican), and individually, they work just fine. And for most, the multiple selection options work fine as well. But when I select some of them jointly with others, the selection sometimes yields only one of them or neither.

This is my code:

app.layout = html.Div(children=[
html.H1(children=‘México’,
style={‘textAlign’: ‘center’
}
),
html.H3(children=‘Tablero-resumen de vacantes en línea’,
style={‘textAlign’: ‘center’
},
),
html.Div([
dcc.Dropdown(
id=‘xaxis-column’,
options=[{‘label’: i, ‘value’: i} for i in table.Estados],
placeholder=‘Seleccione una Ciudad’,
value = [‘Ciudad de México DF’,‘Jalisco’, ‘Puebla’],
multi =True),
],
style={‘width’: ‘48%’, ‘display’: ‘inline-block’,
‘marginTop’: ‘1em’,‘marginBottom’: ‘1em’}),
html.Div([
dcc.Dropdown(
id=‘yaxis-column’,
options=[{‘label’: i, ‘value’: i} for i in Data_test.date.unique()],
placeholder=‘Seleccione un mes’),
],
style={‘width’: ‘48%’, ‘display’: ‘inline-block’,
‘marginTop’: ‘1em’,‘marginBottom’: ‘1em’}),

html.Div([
dcc.Graph(id='graph1',
          style={'width': '48%', 'display': 'inline-block'}),
    
    dcc.Graph(id='graph2',
              style={'width': '48%', 'display': 'inline-block'})
    ] ),

html.H5(children='Resumen de principales variables por ciudad',
style={'textAlign': 'left'
        }),

dash_table.DataTable(
        style_data={
    'whiteSpace': 'normal',
    'height': 'auto',
    },
data=table.to_dict('records'),
    sort_action="native",
    filter_action='native',
    sort_mode="multi",
    columns=[{'id': c, 'name': c} for c in table.columns],
    style_table={'overflowX': 'scroll'},
    style_as_list_view=True,
    style_cell={'padding': '5px','textAlign': 'center',
                },
    style_header={
        'fontWeight': 'bold',
        'backgroundColor': 'rgb(230, 230, 230)',
        },
        style_cell_conditional=[
            {'if': {'column_id': 'Ciudades'},
                'textAlign': 'left',
                'width': '170px'},
             {'if': {'column_id': 'Años de experiencia (en media)'},
               'width': '15px'},
            ],
            style_data_conditional=[
    {
        'if': {'row_index': 'odd'},
        'backgroundColor': 'rgb(248, 248, 248)'
    }
]
)
])

@app.callback(
Output(‘graph2’, ‘figure’),
[Input(‘xaxis-column’, ‘value’)])

def update_graph2(xaxis_column_name):
table3 = anuncios_empresa[anuncios_empresa[‘localidad’].isin(xaxis_column_name)]
data = go.Scatter(
x=[random.random() for i in range(30)],
y=random.choices(range(30), k=30),
mode=‘text’,
text=table3[‘empresa’][~(table3[‘empresa’].str.len() <4)].unique(),
marker={‘opacity’: 0.3},
textfont={‘size’: table3[‘conteo’]*5,
‘color’: colors})

return {'data': [data],'layout' : go.Layout(xaxis={'showgrid': False, 'showticklabels': False, 'zeroline': False},
                                            yaxis={'showgrid': False, 'showticklabels': False, 'zeroline': False},
                                            title={'text': "Principales empresas",'y':0.9,'x':0.5, 'xanchor': 'center','yanchor': 'top'})

        }

@app.callback(
Output(‘graph1’, ‘figure’),
[Input(‘xaxis-column’, ‘value’)])

def update_graph(xaxis_column_name):
table2 = table[table[‘Estados’].isin(xaxis_column_name)]
return {
‘data’: [dict(
x=xaxis_column_name,
y=table2[table2[‘Estados’] == xaxis_column_name][‘Total de anuncios’].unique(),
type=‘bar’,
)],
‘layout’: dict(
xaxis={
‘title’: ‘Portal’},
yaxis={
‘title’: ‘Número’},
title={
‘text’: ‘Vacantes en:
{}’.format(’, '.join(xaxis_column_name)),
‘xanchor’: ‘center’,
‘yanchor’: ‘top’})
}

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