When Using dcc.Dropdown plotly express ignores color map

Dash Python
1

Hello all,
So this has me puzzled.

I have a dcc.Dropdown with multi=True
Everything is working, the callback returns the expected data series, except that it always uses the first color defined in

resources_color_map={"HaZZ" : "#005c8d",
		"RHCP" : "#646ffa",
		"PZ SR" : "#1177a7",
		"Finančná správa" : "#588bff",
		"Ozbrojené sily SR - Celé územie od 07.04.2022" : "#565182",
		"DHZO" : "#60b2ff",
		"Okresný úrad" : "#534798",
		"Migračný úrad" : "#94b5ea",
		"Duchovná služba" : "#6a58ae",
		"Centrum právnej pomoci" : "#588cbb",
		"Zahraničné zložky" : "#8974d4",
		"MH SR" : "#355287",
		"SKR MV SR" : "#a6a4ff",
		"MK SR" : "#4b4c8f",
		"MDaV SR" : "#4a9bff",
		"MPaRV SR" : "#7a74a8",
		"Centrum podpory" : "#0074d6",
		"MPSVaR SR" : "#7d6eab",
		"Externý - Accenture" : "#0288d3",
		"Migračný úrad MV SR" : "#a38ee2",
		"Červený kríž" : "#EF1C24",
		"Dobrovoľníci" : "#EF1C24"}

Unexpected Result
Unexpected Result2968×1680 288 KB

I’m using plotly.express and, to me, this behaviour is not making any sense: Without the dropdown everything works fine, with the dropdown I’m always getting the same first color of the defined resources_color_map

no dropdown example
no dropdown example1568×525 39.2 KB

Is it something I’m doing wrong? Is there a solution for this? Any help would really be appreciated. Thank you in advance.

Disclaimer: This is for a non-for-profit NGO project. No commercial use of the solution will be made

2

Hi,

Could you share the callback that you are using to generate the graph, please?

3

Hi @jlfsjunior, sure

@callback(
    Output(component_id="resources_drop", component_property="figure"),
    Input(component_id="dropdown_resources", component_property="value")
)

def dropdownupdate(value):
	# -----------------------------------------------
	#               DATA TREATMENT
	# -----------------------------------------------

	# Create Specific Color Map for this section
	resources_color_map={"HaZZ" : "#005c8d",
		"RHCP" : "#646ffa",
		"PZ SR" : "#1177a7",
		"Finančná správa" : "#588bff",
		"Ozbrojené sily SR - Celé územie od 07.04.2022" : "#565182",
		"DHZO" : "#60b2ff",
		"Okresný úrad" : "#534798",
		"Migračný úrad" : "#94b5ea",
		"Duchovná služba" : "#6a58ae",
		"Centrum právnej pomoci" : "#588cbb",
		"Zahraničné zložky" : "#8974d4",
		"MH SR" : "#355287",
		"SKR MV SR" : "#a6a4ff",
		"MK SR" : "#4b4c8f",
		"MDaV SR" : "#4a9bff",
		"MPaRV SR" : "#7a74a8",
		"Centrum podpory" : "#0074d6",
		"MPSVaR SR" : "#7d6eab",
		"Externý - Accenture" : "#0288d3",
		"Migračný úrad MV SR" : "#a38ee2",
		"Červený kríž" : "#0164ac",
		"Dobrovoľníci" : "#EF1C24"
	}

	# Import Data - Resources

	df_state = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vSPMQhe0RziV-GvpZis8_8cN2TOPE6s2pSQ_1qpBiMORgVGeOI_UccexX3tOAZf_hipnekydIsQvWN3/pub?gid=951867680&single=true&output=csv')
	
	# Fill N/A with zero values 
	df_state = df_state.fillna(0)

	# Wide to Long 
	df_state_melt = pd.melt(df_state,id_vars='Počet štátnych zamestnancov',var_name='Dátum',value_name='Verejní zamestnanci alebo dobrovoľníci')


	print(df_state_melt.info())

	df_dropdown_graph = df_state_melt[df_state_melt['Počet štátnych zamestnancov'].isin(value)]

	

	dropdown_graph = px.bar(df_dropdown_graph,x='Dátum',y='Verejní zamestnanci alebo dobrovoľníci',color='Počet štátnych zamestnancov',template='plotly_white',
							color_discrete_map=resources_color_map, barmode='group')

	dropdown_graph.update_xaxes(tickangle=0, tickfont=dict(color='black', size=7))
	dropdown_graph.update_yaxes(tickangle=90, tickfont=dict(color='black', size=7))
	dropdown_graph.update_xaxes(nticks=5)
	dropdown_graph.update_traces(hovertemplate="Datúm:  %{x} <br><b>Celkom: %{y}</b>")
	dropdown_graph.update_traces(marker_color='rgb(39,59,128)', marker_line_color='rgb(8,48,107)',
                  marker_line_width=1.5, opacity=0.8)

	dropdown_graph.update_layout(
        hoverlabel=dict(
        bgcolor="#273B80",
        font_size=16,
        font_family="sans-serif"
    	)
    ) 

	dropdown_graph.update_layout(showlegend=False)

	dropdown_graph.update_xaxes(rangeslider_visible=True)


	return dropdown_graph
4

What happens if you remove this line?

2 Likes
5

It works fine… my bad. Thank you! Sometimes you need an extra pair of eyes to sort out a problem.
Thank you so much @jlfsjunior !

1 Like