✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar! # Create Overlapped/Superimposed Barchart

Hi,
I need to change stacked barchart width to be overlapped like the picture below.
I found this question and solution https://stackoverflow.com/questions/23293011/how-to-plot-a-superimposed-bar-chart-using-matplotlib-in-python and I would like to reproduce the same chart on DASH Plotly python framework.

The code is as below:

``````import matplotlib.pyplot as plt
import numpy as np

width = 0.8

highPower   = [1184.53,1523.48,1521.05,1517.88,1519.88,1414.98,
1419.34,1415.13,1182.70,1165.17]
lowPower    = [1000.95,1233.37, 1198.97,1198.01,1214.29,1130.86,
1138.70,1104.12,1012.95,1000.36]

indices = np.arange(len(highPower))

plt.bar(indices, highPower, width=width,
color='b', label='Max Power in mW')
plt.bar([i+0.25*width for i in indices], lowPower,
width=0.5*width, color='r', alpha=0.5, label='Min Power in mW')

plt.xticks(indices+width/2.,
['T{}'.format(i) for i in range(len(highPower))] )

plt.legend()
plt.show()
``````

Question: How to edit it to accomodate DASH principles?
For instance, on Dash, bar doesn’t accept width=0.5*width adn alpha=0.5

My own code is as below:

``````from plotly.offline import init_notebook_mode, iplot
from plotly import graph_objs as go
init_notebook_mode(connected = True)
import pandas as pd
import numpy as np

dfb=pd.read_csv('https://www.dropbox.com/s/90y07129zn351z9/test_data.csv?dl=1', encoding="latin-1", infer_datetime_format=True, parse_dates=['date'], skipinitialspace=True)
dfb["date"]=pd.to_datetime(dfb['date'])
dfb["site"]=dfb["site"].astype("category")
cm_inc=dfb[dfb.site == 5].pivot_table(index='date', values = 'site', aggfunc = {  'site' : 'count' }  )
dfb['cm_target'] = *len(dfb)
dfb.to_csv('test_data.csv', index=False)

data = [
go.Bar(x=cm_inc.index, y=cm_inc['site'], name='Enroll Site A',
#base=0
),
go.Bar(x=cm_inc.index, y=dfb['cm_target'], name='Target Site A',
#base=0,
#width=0.5
)]

layout = go.Layout(
barmode='stack',
)

fig = dict(data = data, layout = layout)
iplot(fig, show_link=False)
``````

Thanks.

You simply need to change the `barmode` argument to ‘overlay’.

Here is an example:

``````fig = {
'data': [go.Bar(x=[1, 2, 3], y=[3, 1, 2]),
go.Bar(x=[1, 2, 3], y=[0.3, 0.4, 0.1], width=[0.4, 0.6, 0.2])],
'layout': go.Layout(barmode='overlay')
}
plot(fig)
``````

Note that the `width` argument can be given as a list, to show different widths for different bars, or you can supply one value, which will be used for all the bars of the trace.

Hope this helps!

2 Likes

Thanks for your quick reply. Please, could you mind fixing using my code (provided above?). The way you fixed it doesn’t work to my code. Thanks

1 Like

It’s the exact same thing. While replacing code, if you get confused always try to trace which element it in located in. In case of plotly, ‘data’ is always a list of multiple plots (go.Bar, go.Scatter etc.)

Here is your code:

``````data = [go.Bar(x=[1, 2, 3], y=[3, 1, 2]),
go.Bar(x=[1, 2, 3], y=[0.3, 0.4, 0.1],width=[0.4, 0.6, 0.2])]

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

fig = dict(data = data, layout = layout)
pyo.plot(fig, show_link=False)``````
1 Like

@SantoshiT my code is as below.
Use it for fixing not the one you used. Thanks.

``````from plotly.offline import init_notebook_mode, iplot
from plotly import graph_objs as go
init_notebook_mode(connected = True)
import pandas as pd
import numpy as np

dfb=pd.read_csv('https://www.dropbox.com/s/90y07129zn351z9/test_data.csv?dl=1', encoding="latin-1", infer_datetime_format=True, parse_dates=['date'], skipinitialspace=True)
dfb["date"]=pd.to_datetime(dfb['date'])
dfb["site"]=dfb["site"].astype("category")
cm_inc=dfb[dfb.site == 5].pivot_table(index='date', values = 'site', aggfunc = {  'site' : 'count' }  )
dfb['cm_target'] = *len(dfb)
dfb.to_csv('test_data.csv', index=False)

data = [
go.Bar(x=cm_inc.index, y=cm_inc['site'], name='Enroll Site A',
#base=0
),
go.Bar(x=cm_inc.index, y=dfb['cm_target'], name='Target Site A',
#base=0,
#width=0.5
)]

layout = go.Layout(
barmode='stack',
)

fig = dict(data = data, layout = layout)
iplot(fig, show_link=False)
``````