Plotly Python: Add alpha to predefined color

Question

I'm following this example from the Plotly documentation but I'm trying to set the color of the confidence region as the same chosen color for the line but with added transparency (alpha), unlike the docs example in which the fill color is defined manually. Is there a way to do it?

Below is an example of what I'm trying to do. In the function defined in the snippet, ideally I would be able to set color in any way acceptable by Plotly (e.g. color="red", or color="rgb(31, 119, 180)") and have alpha added for the fill.

import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv')

def gen_plot_ci(x, y, y_lo, y_hi, color):
    fig = go.Figure([
        go.Scatter(
            name='Measurement',
            x=x,
            y=y,
            mode='lines',
            line=dict(color=color),  # <-- Using the `color` argument for the line
        ),
        go.Scatter(
            name='Upper Bound',
            x=x,
            y=y_hi,
            mode='lines',
            marker=dict(color="#000"),
            line=dict(width=0),
            showlegend=False
        ),
        go.Scatter(
            name='Lower Bound',
            x=x,
            y=y_lo,
            marker=dict(color="#444"),
            line=dict(width=0),
            mode='lines',
            fillcolor='rgba(68, 68, 68, 0.3)',  # <-- Here I'd like to use the `color` argument and just add alpha
            fill='tonexty',
            showlegend=False
        )
    ])
    fig.update_layout(
        yaxis_title='Wind speed (m/s)',
        title='Continuous, variable value error bars',
        hovermode="x"
    )
    fig.show()

gen_plot_ci(
    df['Time'],
    df['10 Min Sampled Avg'],
    df['10 Min Sampled Avg']-df['10 Min Std Dev'],
    df['10 Min Sampled Avg']+df['10 Min Std Dev'],
    color='rgb(31, 119, 180)',
)

Do you mean that you'd like to use color="#444" again but with added transparency? — vestland
– vestland, Commented Jan 21, 2022 at 20:22
Not the color="#444", that's related to the marker and will not be displayed because of the zero line width (line=dict(width=0)). I'd like to use the color passed in the color argument from my function gen_plot_ci(), but with added alpha — foglerit
– foglerit, Commented Jan 21, 2022 at 20:33

vestland · Accepted Answer · 2022-01-21 22:52:25Z

If you use an rgbcolor like color="rgb(31, 119, 180)") for the initial line color, we're really just manipulating strings here. So after setting up your figure in you function definition, just include the following before you call fig.show()

fig.data[2].fillcolor = 'rgba' + fig.data[0].line.color[3:-1]  + ', ' + str(transparency) + ')'

And remeber to define transparency = 0.2 or another number somewhere in your code or as an argument in your function.

Plot:

Complete code:

import plotly.graph_objs as go
import pandas as pd
# from PIL import ImageColor

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv')

transparency = 0.2

def gen_plot_ci(x, y, y_lo, y_hi, color):
#     global fig
    fig = go.Figure([
        go.Scatter(
            name='Measurement',
            x=x,
            y=y,
            mode='lines',
            line=dict(color=color),  # <-- Using the `color` argument for the line
        ),
        go.Scatter(
            name='Upper Bound',
            x=x,
            y=y_hi,
            mode='lines',
            marker=dict(color="#000"),
            line=dict(width=0),
            showlegend=False
        ),
        go.Scatter(
            name='Lower Bound',
            x=x,
            y=y_lo,
            marker=dict(color="#444"),
            line=dict(width=0),
            mode='lines',
            fillcolor='rgba(68, 68, 68, 0.3)',  # <-- Here I'd like to use the `color` argument and just add alpha
#             fillcolor = 'rgba' + str(tuple(list(ImageColor.getcolor("#444", "RGB")) + [transparency])),
#             fillcolor = 'rgba' + fig.data[0].line.color[3:-1]  + ', ' + str(transparency) + ')',
            fill='tonexty',
            showlegend=False
        )
    ])
    
    fig.update_layout(
        yaxis_title='Wind speed (m/s)',
        title='Continuous, variable value error bars',
        hovermode="x"
    )
    fig.data[2].fillcolor = 'rgba' + fig.data[0].line.color[3:-1]  + ', ' + str(transparency) + ')'
    fig.show()

gen_plot_ci(
    df['Time'],
    df['10 Min Sampled Avg'],
    df['10 Min Sampled Avg']-df['10 Min Std Dev'],
    df['10 Min Sampled Avg']+df['10 Min Std Dev'],
    color='rgb(31, 119, 180)',
)

Collectives™ on Stack Overflow

Plotly Python: Add alpha to predefined color

1 Answer 1

Plot:

Complete code:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Plot:

Complete code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related