question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

change line opacity, leave markers opaque

See original GitHub issue

Is it possible to add an opacity to the line-attribute?change the line opacity but not the marker opacity? I found that I can set the opacity of the entire line including markers (opacity = .5) and the one of the marker (e.g. marker={"opacity":1}). However, it is seemingly impossible to reduce the opacity of just the line.

As shown in this example:

import plotly
import plotly.graph_objs as go
plotly.offline.init_notebook_mode(connected=True)  # I'm running in a jupyter notebook

x = np.arange(0,10)
ys = [np.random.rand(10) for _ in range(3)]

lines = []
for y in ys:
    line = go.Scatter(x=x, y=y, mode="markers+lines", opacity=.5, marker={'symbol': 'x', 'size': "15", "opacity":1},
        line={'opacity': 0.5}
    )
    lines.append(line)           
fig = go.Figure(
    data=lines,
    layout=go.Layout(showlegend=True)
)
plotly.offline.iplot(fig)

See result here: image

My problem is the following: My data points are important, the lines are just visual aid. I want to make the lines .5-opaque but have the markers fully opaque.
However, when I set opacity=.5, marker={'opacity':1} the opacity of the marker is also reduced. (I believe that the marker-opacity is defined in the range [0, line-opacity].

PS: If there is an existing solution/workaround for this issue, it might be interesting to (also) answer on my post on Stackoverflow

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

10reactions
hidaicommented, Aug 9, 2018

I have the same use-case. Any plan to address the original issue (adding line.opacity)?

1reaction
raffgcommented, Jun 9, 2020

+3

My use case is the bottom right chart here https://covid-19-raffg.herokuapp.com/

Workaround is this:

def hex_to_rgba(h, alpha):
    '''
    converts color value in hex format to rgba format with alpha transparency
    '''
    return tuple([int(h.lstrip('#')[i:i+2], 16) for i in (0, 2, 4)] + [alpha])


import pandas as pd
import plotly
import plotly.graph_objects as go
trace_data = pd.DataFrame({'base': [0, 1, 2, 3, 4],
                           'trace1': [1, 2, 3, 4, 5],
                           'trace2': [1.5, 1.9, 2, 3.9, 6],
                           'trace3': [2, 1, 3.3, 4.4, 4.5],
                           'trace4': [0, 3, 2, 1, 3]})

trace_colors = plotly.colors.qualitative.D3
color_idx = 0

fig = go.Figure()
for trace in ['trace1', 'trace2', 'trace3', 'trace4']:
    marker_size = [0] * (len(trace_data) - 1)
    marker_size.append(6)
    color = trace_colors[color_idx % len(trace_colors)]
    marker_color = 'rgba' + str(hex_to_rgba(color, 1))
    line_color = 'rgba' + str(hex_to_rgba(color, .25))
    # Perform a lot of data wrangling in Pandas here...
    fig.add_trace(go.Scatter(x=trace_data['base'],
                             y=trace_data[trace],
                             mode='lines+markers',
                             marker=dict(color=marker_color,
                                         size=marker_size),
                             line=dict(color=line_color, width=1),
                             name=trace))
    color_idx += 1
fig.show()
Read more comments on GitHub >

github_iconTop Results From Across the Web

plotly.py: change line opacity, leave markers opaque
Line objects don't have opacity attributes but you can assign colors using RGBA and set the alpha. You have to assign a color...
Read more >
Python – plotly.py: change line opacity, leave markers opaque
My problem is the following: My data points are important, the lines are just visual aid. I want to make the lines .5-opaque...
Read more >
plotly.py: change line opacity, leave markers opaque - DevPress
I found that I can set the opacity of the entire line including markers ( opacity = .5 ) and the one of...
Read more >
Four ways to change opacity of scatter markers - Plotly
Fully opaque. When there are many points they overlap · {opacity: 0.5} - lets you see traces behind this one, but · {marker:{opacity:0.5}}...
Read more >
opacity - CSS: Cascading Style Sheets - MDN Web Docs
0, The element is fully transparent (that is, invisible). ... To change the opacity of a background only, use the background property with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found