Plotly scatter charts show no color when running on dash app

Hello, I am new to Dash app, and trying to run a simple scatter plot on the app. Somehow, there is no colorful dots showing up even setting up the specific dataframe column. Anybody has this kind issue? Many thanks!

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(children=[
    dbc.Row([
                dbc.Col(),
                dbc.Col(html.H1('Charts'),width = 9, style = {'margin-left':'7px','margin-top':'7px'})
        ]),
    html.Hr(className="my-2"),
    dbc.Row(
            [
                dbc.Col(dcc.Graph(id = 'graph'), width = 9, style = {'margin-left':'5px', 'margin-top':'7px', 'margin-right':'5px'}),
            ]),
        ])

@app.callback(
    Output('graph', 'figure'),
    Input('dropdown','value')
)
def update_graph(selected_df):
    df = dfs[selected_df]
    fig = px.scatter(df,
        labels=dict(x='Date', y='User'),
        x="date",
        y="username",
        color="sample_name",
        hover_data=["sample_name","username"],
        width=1200, height=800
        )
    fig.update_traces(marker_size=10)
    fig.update_layout(
        xaxis_title='Date/Time',
    fig.update_yaxes(automargin='left+top')
    fig.update_xaxes(automargin='bottom')
    return fig

    
if __name__ == '__main__':
    app.run_server(debug=True)

Hi @IOSky welcome to the forums. Looking at the x-axis it seems that you’re plotting strings. Check the dtypes of your DataFrame dfs.

Hey @AIMPED . Thank you for your reply. Good catch for x axis sorting. They are dtype(‘O’) and now sorted by datetime. But the chart is still black and white. Are there any hidden settings should be paid more attentions?

Could you provide the dataframe?

dfs = {“Single sample” : df_1,
“Double samples”: df_2,
“After analyzed”: df_3,
“Archived samples” : df_4,
“Loaded samples” : df_5,
“Exported samples” : df_6,
“Reanalyzed samples” : df_7,
“Dumped samples” : df_8}

df_1~df_8 are different dataframes.

Do you observe this for all of the 8 df?

Yes. All of them are colorless.

The y values are cotegorical, right? This could be the reason for it. Take a look at this:

Hello @IOSky,

Have you tried reinstalling plotly? This indeed looks very strange.

@AIMPED Thank you for the info. I didn’t realize plotly scatter have to be quantitative for both x and y axis, since it works well with Jupyter (y axis: categorical, x axis: quantitative). The solution you shared did work! However, I really want to keep the identity for yaxis and use the third column for color. Do you have any suggestions?

Hello @jinnyzor, Thanks for the suggestion. I did uninstall and install again, still black and white.

1 Like

If you provided one of the df_1-8 I could take a look at it. It depends on the data really…

I dont think this is a data error, I could be mistaken, but its almost like a styling issue.

Try passing a template='plotly_dark' to the layout.

Now it is dark with colors! @jinnyzor Thank you so much!

1 Like

Still strange why your default styling isnt loading…

What version of dash are you running?

HI @IOSky I checked again to make sure:

px.scatter() does also work with non- numeric values:

import pandas as pd
import plotly.express as px
import random

random.seed(42)

categories = 7
samples = 100

df = pd.DataFrame(
    {
        'x': [*range(samples)], 
        'y': [f'string_{i}' for i in range(samples)], 
        'color': [random.choice([f'cat_{i}' for i in range(categories)]) for _ in range(samples)]
    }
)

fig = px.scatter(df,x='x', y='y', color='color')
fig.show()

creates:

Agree, still weird for the default.
I am using dash 2.8.1

@AIMPED Thank you for the update! Good to know!