Overlap 3 barcharts: Target, Actual, Performance

Dash Python
1

Hi,
I am able to create pivot table but is has been very hard to overlap/superimpose the resulting barchart. I have researched a lot but did get same result as I want. I have the below code in Jupyter Notebook:

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
from datetime import timedelta, datetime, tzinfo
import time
from datetime import datetime as dt

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' }) 
#cm_inc1=cm_inc.set_index('site')

#######################
cm_inc['cm_perc'] = cm_inc.loc[:] / 40 * 100
cm_inc['cm_target'] = [40]*len(cm_inc)
#######################

dfb.set_index('date', inplace=True)
dfb.to_csv('test_data.csv', index=True)

indexes =pd.to_datetime(cm_inc.index) 
dates_indexes = pd.to_datetime(cm_inc.index) 

data = [
    go.Bar(x=indexes, 
           y=cm_inc['cm_target'],
           text=cm_inc['cm_target'],
           textposition = 'auto',
           name='Target Site A', 
           base=0
          ),

     go.Bar(x=indexes, 
           y=cm_inc['site'],
           text=cm_inc['site'],
           textposition = 'auto',
           name='Achieved Site A', 
           base=0,
           ),

    go.Bar(x=indexes, 
           y=cm_inc['cm_perc'],
           text=cm_inc['cm_perc'],
           textposition = 'auto',
           name='Performance Site A', 
           base=0,
           #width=[0.1]*len(cm_inc)  
           )
]

layout = go.Layout(
    barmode='overlay',
    xaxis=dict(
        showticklabels=True,
        ticktext=dates_indexes,
        tickvals=[i for i in indexes],
    )
)

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

And the output is this:

Overlap%203%20barcharts
Overlap 3 barcharts.jpeg1858×853 92.6 KB

And when I activate this:

#width=[0.1]*len(cm_inc) #With any value

The output is this:

Overlap%203%20barcharts2
Overlap 3 barcharts2.jpeg1840×893 94.6 KB

QUESTION: How to overlap the 3 barcharts so that I can have the legend of the 3 barcharts: Target, Achieved and Performance (in the future, I will add “%” sign to performance to facilitate the understanding of this chart. Thanks in advance.

2

I am not sure what you are asking :question:

You already seem to have overlapped all three traces and they all appear in your legend? If it is because you want to see stuff which are overlapped you can use to opacity option to be able to look through the bars.

Or try in your layout to use barmode=‘group’ instead of barmode=‘overlay’ so one is able to relate the three bars for each date.