Plotly: Interactive graph with 'lines+markers' mode using plotly.express

Question

df:

                        id      timestamp               data    Date            Start   
timestamp                                   
2020-01-15 06:12:49.213 40250   2020-01-15 06:12:49.213 20.0    2020-01-15      NaN 
2020-01-15 06:12:49.313 40251   2020-01-15 06:12:49.313 19.5    2020-01-15      0.0 
2020-01-15 08:05:10.083 40256   2020-01-15 08:05:10.083 20.0    2020-01-15      1.0 
2020-01-15 08:05:10.183 40257   2020-01-15 08:05:10.183 20.5    2020-01-15      0.0 
2020-01-15 09:01:50.993 40310   2020-01-15 09:01:50.993 21.0    2020-01-15      0.0 
2020-01-15 09:01:51.093 40311   2020-01-15 09:01:51.093 21.5    2020-01-15      0.0 
2020-01-15 09:51:01.890 40336   2020-01-15 09:51:01.890 22.0    2020-01-15      0.0

I want to plot an interactive graph using plotly.express, colour by Start(which is dummy variable), with mode='lines+markers'. But I couldn't add the line. At the moment, using code below

import plotly.express as px

fig = px.line(df, x="timestamp", y="data", title='xxx')
fig = px.scatter(df, x="timestamp", y="data",color='Start')   
fig.show()

I obtained plot

Update:

Tried:

import plotly.express as px

fig = px.line(x=df['timestamp'], y=df['data'])
fig.add_scatter(x=df['timestamp'], y=df['data'], marker_color=df['Start'])

which returned:

user11989081 · Accepted Answer · 2020-04-22 12:07:21Z

2

The issue is that in your code the figure object is being overwritten, i.e. the scatter plot is replacing the line plot rather than being added to it.

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'timestamp': ['2020-01-15 06:12:49.213', '2020-01-15 06:12:49.313', '2020-01-15 08:05:10.083', '2020-01-15 08:05:10.183',
                                 '2020-01-15 09:01:50.993', '2020-01-15 09:01:51.093', '2020-01-15 09:51:01.890'],
                   'data': [20.0, 19.5, 20.0, 20.5, 21.0, 21.5, 22.0],
                   'start': [0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0]})


fig = px.line(x=df['timestamp'], y=df['data'])
fig.add_scatter(x=df['timestamp'], y=df['data'], mode='markers', marker_color=df['start'], marker_size=10)

fig.update_layout(plot_bgcolor='#bababa', showlegend=False)

fig.show()

edited Apr 22, 2020 at 12:07

answered Apr 22, 2020 at 10:56

user11989081

8,75211 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nilsinelabore Over a year ago

Thank you for the answer. It achieved the line graph, but not the markers, or colour by column df['start']. Please see question update.

user11989081 Over a year ago

I updated my answer, try adding mode='markers' to the scatter trace.

nilsinelabore Over a year ago

It's working! Btw, may I ask why the previous issue in the update? And is it possible to change the background colour of the plot?

user11989081 Over a year ago

The issue was that in my case the px.scatter was using mode='markers' by default, while in your case it was using mode='lines' by default, that's why you were getting two line plots instead of a line plot and a scatter plot. This may be due to the fact that we are using different versions of plotly. You can change the plot background color in the layout dictionary, i.e. instead of setting plot_bgcolor='#bababa' (where #bababa is the hex code of a dark gray) you can set plot_bgcolor='white' or any other color.

Collectives™ on Stack Overflow

Plotly: Interactive graph with 'lines+markers' mode using plotly.express

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related