✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Can I use plotly express for this graph?

Hi,

I have just started to use plotly express and I love it.
At the moment, I have very specific requirements that I am not sure whether they can be fulfilled with plotly at all.

The sample code:

import pandas as pd
import numpy as np
import plotly.express as px

np.random.seed = 0

x = np.linspace(0, 6.5*np.pi, 200)
s1 = np.sin(x)
s2 = np.sin(np.random.rand()*x)
s3 = np.cos(x)
s4 = s1 + s2
s5 = s1 + s3
s6 = s2 + s3
df = pd.DataFrame(
{
‘x’ : x,
‘s1’ : s1,
‘s2’ : s2,
‘s3’ : s3,
‘s4’ : s4,
‘s5’ : s5,
‘s6’ : s6
}
)
df = df.melt(id_vars=‘x’, var_name=‘line’, value_name=‘val’)
fig = px.line(data_frame=df, x=‘x’, y=‘val’, line_group=‘line’, color_discrete_sequence=[‘black’])
fig.show()

…draws few lines that look like this:

Everything is OK with this image, but I have to define areas in which the signal is good (green), not so good (yellow), and orange (very bad). Let’s say if the image above have background like this, it will be ok:

image

Can it be done somehow?
Do I have create background like this and than add a new trace with the first graph with lines, or…?

Regards.

Hi @gluperegistracije welcome to the forum! Sure, you can create the traces using plotly.express as you did, and then add shapes to the layout for the colored rectangles. Below is an example adding one of the rectangles, you can extend the example in order to add the other ones. Note that I used the trick to have the y coordinates of the rectangle in data coordinates, while the x coordinates are in paper coordinates so that the rectangle is infinite in the x direction, ie you can zoom, pan etc. For more details about shape please see https://plotly.com/python/shapes/

import pandas as pd
import numpy as np
import plotly.express as px

np.random.seed = 0

x = np.linspace(0, 6.5*np.pi, 200)
s1 = np.sin(x)
s2 = np.sin(np.random.rand()*x)
s3 = np.cos(x)
s4 = s1 + s2
s5 = s1 + s3
s6 = s2 + s3
df = pd.DataFrame(
{
'x' : x,
's1' : s1,
's2' : s2,
's3' : s3,
's4' : s4,
's5' : s5,
's6' : s6
}
)
df = df.melt(id_vars='x', var_name='line', value_name='val')
fig = px.line(data_frame=df, x='x', y='val', line_group='line', 
              color_discrete_sequence=['black'])
fig.add_shape(type='rect', 
              layer='below',
              x0=0, x1=1, xref='paper',
              y0=-2.5, y1=2.5, yref='y',
              fillcolor='darkgreen')
fig.update_layout(xaxis_showgrid=False, yaxis_showgrid=False)
fig.show()

Hi Emanuelle,

I have executed your code and this is exactly what I needed. Thank you very very much.

Can you please tell me where I could find information like this one?
Before asking the question here for the problem above, I googled quite a lot, but I couldn’t find an answer.

For example, I have a new requirement for overlapping bar charts. Usually bars go from zero to the value, but I have requirement for barcharts to go from -60 to value (up to zero). If I just put the values as they are (negative), bars will go from zero to -x.

How to do it in the most elegant way?
For now, I have changed sign (make all positive values for bars) and plot them from zero up. Now I am trying a way to change y-axis labels to simulate range -60,0.
Maybe there is a better approach.

Where I would be able to find info for such requirement?

Best regards.

As of version 4.8 of Plotly.py, you can now plot this directly with a single Plotly Express call:

import pandas as pd
import numpy as np
import plotly.express as px

np.random.seed = 0

x = np.linspace(0, 6.5*np.pi, 200)
s1 = np.sin(x)
s2 = np.sin(np.random.rand()*x)
s3 = np.cos(x)
s4 = s1 + s2
s5 = s1 + s3
s6 = s2 + s3
df = pd.DataFrame({ 'x' : x, 's1' : s1, 's2' : s2, 's3' : s3, 's4' : s4, 's5' : s5, 's6' : s6 } )
fig = px.line(df, x='x', y=df.columns, color_discrete_sequence=['black'])
fig.show()