Plotly scatter charts show no color when running on dash app

Dash Python
1

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)

Capture
Capture788×708 48 KB

2

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.

3

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?

4

Could you provide the dataframe?

5

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.

6

Do you observe this for all of the 8 df?

7

Yes. All of them are colorless.

8

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

9

Hello @IOSky,

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

10

@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?

11

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

1 Like
12

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

13

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.

14

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

Capture1
Capture1747×768 55.8 KB

2 Likes
15

Still strange why your default styling isnt loading…

What version of dash are you running?

16

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:

newplot (5)
newplot (5)782×360 23.1 KB

17

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

18

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