plotly: do not connect gaps in plotly express line graph

Question

I have created the above plot using plotly express:

import plotly.express as px

fig = px.line(mini_df, 
              x=mini_df.index,
              y=mini_df[mini_df.columns[1]],
              color=mini_df[mini_df.columns[0]])

I am trying to make a line plot which has a changing color depending on the value of some column.

This works, but unfortunately, there is an ugly connection between the end of good status and the beginning of the 2nd good status phase.

Is it possible, using express, to remove this ugly connection? Or do I need to use plotly graph_objects to achieve this?

Beckham

Answer 1

You can append .update_traces(connectgaps=False) to mutate the figure that's generated with Plotly Express. PX uses graph_objects under the hood so any update method works here.

Ginglymus

I think this works if there is one gap, but not if the color column switches values back and forth multiple times. See this question – Unrelenting

It didn't work for me. – Theodolite

Answer 2

There are some other solutions mentioned here: Plotly: How to create a line plot of a time series variable that has a multiple-color label?

Unfortunately none are as simple as nicolaskruchten's suggestion above. However, I may be missing something but the connectgaps=False solution doesn't work for me. Perhaps because there are no NaNs in the data when dissecting a continuous time series like this. E.g. in the above example the x-axis data for the blue trace would be [..., 3750, 4250, ...]. There's a 'gap' between 3750 and 4250, but no NaN..

Pederasty

Answer 3

To make .update_traces(connectgaps=False) work you have to generate the missing dates for the all the colors, since that is how it figures out that data is missing (it does not understand the datetime gap automatically). An option is to put your date and color variable in the index and then reindex it with all the possible combinations of the two pd.MultiIndex.from_product, then the lines won't be connected.

Galaxy