Overlayed histograms with no fill color

[munal]

Hello,

I’m trying to overlay 3 histograms. I need 2/3 (trace2 and trace3) entries to be just lines around the histogram bars, but not filled with any colors. What’s the option for that? In the example picture which is the output of the following code, trace “Main” doesn’t appear in the right color unless it is added the last. I need the other to to be just lines, so that I don’t have to play with the order of traces each time.

My code is

  trace_hist1 = go.Histogram(x=df_com[df_com['time-point']<20]["time-point"], 
                             opacity=0.7, 
                             marker_color='green', 
                             name='Main',
                             nbinsx=int((20-0)/1)
                             )
  trace_hist2 = go.Histogram(x=match_results["matching_line_time_point"], 
                             opacity=0.5, 
                             marker=dict(color='blue', line=dict(color='blue', width=2)), 
                             name='Prediction',
                             nbinsx=int((20-0)/1)
                             )
  trace_hist3 = go.Histogram(
                            x=random_match_results["matching_line_time_point"],
                            histfunc='count',
                            opacity=0.5,
                            marker=dict(color='red', line=dict(color='red', width=2)),
                            name='Random Assignment',
                            nbinsx=int((20 - 0) / 1)
                            )

  layout = go.Layout(barmode='overlay')

  fig = go.Figure(data=[trace_hist1, trace_hist2, trace_hist3], layout=layout)

  fig.update_layout(
                  template = "ggplot2",
                  width=1000, height=400,
                  title=canvas_title,
                  title_x=0.1,  
                  title_y=0.9, 
                  title_font=dict(size=20), 
                    )

  fig.update_yaxes(type="log")

  fig.update_xaxes(title_text="Time points")  # Change the x-axis title
  fig.update_yaxes(title_text="Number of entries")  # Change the y-axis title

  fig.show()

[AIMPED]

Could you create a MRE for that?

I assume, the example from the bar-charts could be helpful:

Bar

Adapted:

import plotly.graph_objects as go

x = ['Product A', 'Product B', 'Product C']
y = [20, 14, 23]

# Use the hovertext kw argument for hover text
fig = go.Figure(data=[go.Bar(x=x, y=y,
            hovertext=['27% market share', '24% market share', '19% market share'])])
# Customize aspect
fig.update_traces(
    marker_color='rgba(158,202,225,0.0)', 
    # ^^ use a rgab string for the fillcolor and set the opacity to 0
    marker_line_color='rgb(8,48,107)',
    marker_line_width=3.0, 
)
fig.update_layout(title_text='January 2013 Sales Report')
fig.show()

[munal]

Thanks for the quick reply. But bar is not what I’m looking for. Here is an example in matplotlib.

n_bins=30
x1 = np.random.randn(1000, 1)
x2 = np.random.randn(1000, 1)

plt.hist(x1, n_bins, histtype='step', stacked=False, fill=True, label='blue')
plt.hist(x2, n_bins, histtype='step', stacked=False, fill=False, label='orange')
plt.legend(loc="upper right")
plt.title('Overlay 2 Histos')
plt.show()

results in something like this

Feel free to use these x1 and x2 as your MRE

[AIMPED]

@munal

But bar is not what I’m looking for

Well, I should have been mor explicit, it seems. Under the hood, bar-plot and histogram are pretty similar in plotly. I was refering to changing the appearance of the marker- that’s what you are after.

Here an example with an histogram trace:

import plotly.graph_objects as go
import numpy as np

fig = go.Figure(
    data=[  
        go.Histogram(x=np.random.randn(500), name='blue', marker_color='blue'),
        go.Histogram(x=np.random.randn(500), name='orange')
    ]
)

# overlay histograms
fig.update_layout(barmode='overlay')

# change marker of second histogram
fig.update_traces(
    marker_color='rgba(245, 157, 39, 0)', 
    # ^^ use a rgab string for the fillcolor and set the opacity to 0
    marker_line_color='rgba(245, 157, 39, 1)',
    marker_line_width=3.0,
    selector={'name': 'orange'}
    # selector=1 --> is equivalent to the line before
    # ^^ select the second histogram only
)

fig.show()