# Setting line color with seversl dropdowns **URL:** \ **Category:** Dash Python\ **Created:** [February 1, 2024, 1:28pm UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000 "2024-02-01T13:28:25Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![MichaelLBM](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@MichaelLBM](https://community.plotly.com/u/MichaelLBM)\ **Post date:** [February 1, 2024, 1:28pm UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000/1 "2024-02-01T13:28:25Z")
Hi, I’m trying to plot some data data using an interactive Dash app and I’m having some trouble with setting the right line colors. Basically I’m trying to create line plots of measurement data. I have a polars dataframe with the following columns: Subject: The subject ID as string Trial: The type of measurement as string Step: The current step of the measurement as float Parameter: The parameter from the measurement as string Resampled: Wether or not the data is resampled as boolean Value: The value of the parameter as float Each line in the dataframe contains one observation. I use polars because the callback is faster compared to pandas. I have created a Dash app with dropdowns for Subject, Trial, Parameter and Resampled and want to plot a line plot with Value on the y-axis and Step on the x-axis. Since the measurements vary in time I have each measurement as raw values with varying amout of steps and in a resampled format where all measurements have 1000 steps. Since I always want a subject to have the same color if I plot several subjects I have created a color\_map. This is my code: ```auto # load df df = pd.read_pickle('df.pkl') # convert to polars df_pl = pl.from_pandas(df) # function for plotting def plot_all(df, port=np.random.randint(8000,8050), mode='external'): appAll = JupyterDash( __name__ ) appAll.layout = html.Div( ['Subject:', dcc.Dropdown( id='subject', options = sorted([{'label': x, 'value': x} for x in df['Subject'].unique()], key = lambda x: x['label']), multi=True, placeholder='Subject'), 'Trial:', dcc.Dropdown( id='trial', options = sorted([{'label': x, 'value': x} for x in df['Trial'].unique()], key = lambda x: x['label']), placeholder='Trial'), 'Parameter:', dcc.Dropdown( id='param', options = sorted([{'label': x, 'value': x} for x in df['Parameter'].unique()], key = lambda x: x['label']), multi=False, placeholder='Parameter'), 'Resampling:', dcc.Dropdown( id='resampling', options = sorted([{'label': str(x), 'value': x} for x in df['Resampled'].unique()], key = lambda x: x['label']), multi=False, placeholder='Resampling'), dcc.Graph(id='graph') ] ) @appAll.callback( Output('graph', 'figure'), Input('subject', 'value'), Input('trial', 'value'), Input('param', 'value'), Input('resampling', 'value'), ) def update_graph(subject, trial, param, resampling): css_colors = ['AntiqueWhite', 'Aqua', 'Aquamarine', 'Black', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Charteuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Crimson', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'DarkRed', 'DarkOrange', 'DarkSlateGray', 'DeepPink', 'DodgerBlue', 'HotPink', 'GreenYellow', 'Purple', 'Yellow', 'Red'] # colors color_discrete_map = {subject: css_colors[i] for i, subject in enumerate(sorted(df['Subject'].unique()))} # plot figAll = px.line(data_frame=df.filter((df['Subject'].is_in(subject)) & (df['Trial'] == trial) & (df['Parameter'] == param) & (df['Resampled'].is_in(resampling))), x='Step', y='Value', color='Subject', color_discrete_map=color_discrete_map, line_dash='Parameter') figAll.update_layout() return figAll appAll.run_server(port=port, mode=mode) plot_all(df_pl) ``` Now this works for the first trial with the raw data: ![Screenshot 2024-02-01 141508](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/4/543dab7ce4f4d91ad4243d2bff8ba73fdbfe9569.png) However if I select another trial all lines are black, but the legend still shows the right colors: ![Screenshot 2024-02-01 141532](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/5/459f66493b2b1eac9b57eb06d5f56e97324189e0.png) Furthermore, if I select ‘True’ in the resampled dropdown the lines are again black, also for the first trial which has the right color for ‘False’: ![Screenshot 2024-02-01 141551](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/3/634fe999ff88353065d01fda256939c5304cb177.png) Im new to plotly and dash so I’m sorry if this is a stupid question, but I just cant figure out why the color works sometimes and sometimes not. I would really appreciate some help or feedback on this matter as it’s driving me crazy. Thank you in advance! Best regards Michael ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 1, 2024, 3:35pm UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000/2 "2024-02-01T15:35:18Z")
Hi @MichaelLBM, welcome to the forums. I did some testing. It seems, that plotly has some problems with capital letters within the color strings. Try converting your colors to `str.lower()` and try again. `css_colors = [color.lower() for color in css_colors]` I think, this might be a bug. ```python import plotly.express as px css_colors = ['AntiqueWhite', 'Aqua', 'Aquamarine', 'Black', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Charteuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Crimson', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'DarkRed', 'DarkOrange', 'DarkSlateGray', 'DeepPink', 'DodgerBlue', 'HotPink', 'GreenYellow', 'Purple', 'Yellow', 'Red'] css_colors = [color.lower() for color in css_colors] # colors color_discrete_map = {subject: css_colors[i] for i, subject in enumerate(sorted(df['continent'].unique()))} df = px.data.gapminder() fig = px.line(df, x="year", y="lifeExp", color='continent', color_discrete_map=color_discrete_map) fig.show() ``` ![newplot](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/e/5eaf4434f1ed903a658f676a486d47aa29aa2070.png) mrep colors ---
**Author:** ![MichaelLBM](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@MichaelLBM](https://community.plotly.com/u/MichaelLBM)\ **Post date:** [February 2, 2024, 6:16am UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000/3 "2024-02-02T06:16:21Z")
Hi @AIMPED, thanks for your reply. I just tried your solution and it works! Just by adding this line my code now works exactely as intended: ```auto css_colors = [color.lower() for color in css_colors] ``` I never would have thought of that on my own. ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 2, 2024, 6:58am UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000/4 "2024-02-02T06:58:12Z")
Perfect, glad I could help. You actually found a bug, a github issue is on the way. 🙃 ---
**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\ **Post date:** [February 2, 2024, 7:49pm UTC](https://community.plotly.com/t/setting-line-color-with-seversl-dropdowns/82000/5 "2024-02-02T19:49:29Z")
thank you for reporting this, @MichaelLBM and thank you @AIMPED for the solution. I just reported the bug on the [Plotly.js repo](https://github.com/plotly/plotly.js/issues/6883).