Bokeh 100% Stacked Bar Chart

Question

What is the easiest way to make a 100% Stacked Bar Chart in Bokeh ?, for example, suppose I have the following columns

S    P
34   65
23   44
12   81
 9   23

In excel I can make this type of plot very easy, so I would obtain something like this:

However I want to have some interaction (like showing the values on hover) thus I want to make this kind of plot in Bokeh . I'm a beginner with Bokeh and I haven't found any example similar to this. So, what would be the best approach?

Answer 1

Data wrangling

df_comb = df.join(df.divide(df.sum(axis=1), axis=0), rsuffix='_w').join(df.divide(df.sum(axis=1) * 2, axis=0), rsuffix='_w_labelheights')
df_comb['P_w_labelheights'] += df_comb['S_w']
df_comb

to get the correct proportions and label heights

    S   P   S_w         P_w         S_w_labelheights    P_w_labelheights
0   34  65  0.343434    0.656566    0.171717    0.671717
1   23  44  0.343284    0.656716    0.171642    0.671642
2   12  81  0.129032    0.870968    0.064516    0.564516
3   9   23  0.281250    0.718750    0.140625    0.640625

Bokeh initiation

for a notebook

from bokeh.models import ColumnDataSource
from bokeh.plotting import show, output_notebook, figure as bf
output_notebook()

Plot creation

f = bf()
source = ColumnDataSource(df_comb)

s = f.vbar(x='index', bottom=0, top='S_w', width=0.5, source=source)
p = f.vbar(x='index', bottom='S_w', top=1, width=0.5, source=source, color='orange')

s_label = f.text(x='index', y='S_w_labelheights', source=source, text='S')
p_label = f.text(x='index', y='P_w_labelheights', source=source, text='P')

show(f)

You can afterwards add the HoverTool and correct the ticks and grid