# When Using dcc.Dropdown plotly express ignores color map

**URL:** <https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 14, 2022, 7:10am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036 "2022-04-14T07:10:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgomes\_eu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jgomes_eu/32/14895_2.png) [@jgomes\_eu](https://community.plotly.com/u/jgomes_eu)\
**Post date:** [April 14, 2022, 7:10am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036/1 "2022-04-14T07:10:24Z")

</div>

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

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/e/9ef4dadf766feaf22d3f6cd32b1c5a8297618e66.png)

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/b/0b72ee4a94222c99d8b2269b0feb6638df0349f5.png)

**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_

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [April 14, 2022, 7:58am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036/2 "2022-04-14T07:58:10Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![jgomes\_eu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jgomes_eu/32/14895_2.png) [@jgomes\_eu](https://community.plotly.com/u/jgomes_eu)\
**Post date:** [April 14, 2022, 8:04am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036/3 "2022-04-14T08:04:40Z")

</div>

Hi @jlfsjunior, sure

```auto
@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

```

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [April 14, 2022, 8:29am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036/4 "2022-04-14T08:29:49Z")

</div>

What happens if you remove this line?

> [@jgomes\_eu](#):
>
> ```auto
> 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)
> 
> ```

---

<div class="post-metadata">

**Author:** ![jgomes\_eu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jgomes_eu/32/14895_2.png) [@jgomes\_eu](https://community.plotly.com/u/jgomes_eu)\
**Post date:** [April 14, 2022, 9:10am UTC](https://community.plotly.com/t/when-using-dcc-dropdown-plotly-express-ignores-color-map/63036/5 "2022-04-14T09:10:30Z")

</div>

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 !