Custom bar chart


Hi all,
I want to create bar chart something similar to image, where we have white bars with different colors on the top of bar.
Please help.
Thnaks,

You could create a bar plot with white/transparent background and an outline, then add bar plots with the colors:

np.random.seed(7)
x = pd.Timestamp("2021-06-24") + pd.Series(map(lambda x: pd.Timedelta(minutes=x), sorted(np.random.choice(np.arange(200), (12,)) * 30)))
y = np.random.rand(12) * 0.7 + 0.3
color = np.random.randint(1, 4, (12,))

px.bar(x=x, y=y, template="plotly", width=800, height=450)\
.update_traces(marker_color="rgb(255,255,255)", marker_line_color="#333", marker_line_width=1)\
.add_traces([
    go.Bar(x=x, y=[0.033 if cc == c else None for cc in color], name=f"Color: {c}")
    for c in sorted(np.unique(color))
])
1 Like

@impiyush
Another similar example just like @RenaudLN

import plotly.graph_objects as go

months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
data = [20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17]

fig = go.Figure()
fig.add_trace(go.Bar(
    x=months,
    y=data,
    marker_color='white',
    width=[0.3]*len(data),
    marker=dict(line=dict(color='black'))
))
fig.add_trace(go.Scatter(
    x=months,
    y=data,
    mode='markers',
    marker_color='steelblue',
    marker_symbol='square',
    marker_size=20,
    marker=dict(line=dict(color='black', width=0.8))
))
fig.update_layout(showlegend=False, plot_bgcolor='white')