Hovering text in Stacked BarChart

📊 Plotly Python
1

Hello!

New data scientist here!

I am triyng to create a stacked bar chart with certain extra info in the hovering text. However customdata does not allows introdcuing np.dstack data on it, and I can not get all my data with just a one dimmensional array.

my code:

yreadsPFRel = np.around(100*(readsPFTot/readsTot), 2)
dataPF = np.dstack((readsPFTot, yreadsPFRel))

fig = go.Figure()
fig.add_trace(go.Bar(x=x1,
                     y=yreadsAbs,
                     customdata=readsRel,
                     marker=dict(color='rgba(0,153,76,1)'),
                     name='Reads Assigned to an Index',
                     hovertemplate =
                     '<b>%{x}</b><br>'+
                     '<b>PF Reads assigned to Index</b>: %{y:.3str}<br>'+
                     '<b>Percentage over PF reads: </b> %{customdata} %')
              )
fig.add_trace(go.Bar(x=x1,
                     y=yreadsPFTot,
                     customdata=dataPF,
                     marker=dict(color='rgba(0,153,76,0.5)'),
                     name='Total PF Reads',
                     hovertemplate =
                     '<b>%{x}</b><br>'+
                     '<b>PF reads</b>: %{customdata[0]:.3str}<br>'+
                     '<b>Percentage over Total Reads:</b> %{customdata[1]:.3str} %'
                     )
              )
fig.add_trace(go.Bar(x=x1,
                     y=yreadsTot,
                     customdata=readsTot,
                     marker=dict(color='rgba(0,153,76,0.25)'),
                     name='Total Clusters',
                     hovertemplate=
                     '<b>%{x}</b><br>'+
                     '<b>Total Reads</b>: %{customdata:.3str}'
                     )
              )

fig.update_layout(barmode='relative', title_text='Reads assigned to an Index')
fig.show()

the Result i am getting is

Captura de pantalla 2020-02-11 a las 12.30.13 (2)
Captura de pantalla 2020-02-11 a las 12.30.13 (2)1440×900 203 KB

2

Hi @ralozNim, welcome to the forum! I think the problem is with the dimensions of your customdata here, with dstack you get too many dimensions (3 instead of 2). The format of customdata should be so that the most inner dimension correspond to the different data if you have many customdata per point, and the rest (outer) of the dimensions correspond exactly to the dimension of x and y. Please the example below which is working.

import plotly.graph_objects as go
import numpy as np
hover = np.arange(6).reshape((3, 2))
# works also with np.squeeze(np.dstack((np.arange(3), np.arange(3, 6))))
# or np.vstack((np.arange(3), np.arange(3, 6))).T
fig = go.Figure(go.Bar(
    x=[1, 2, 3], y=[2, 1, 2], 
    customdata=hover,
    hovertemplate="%{customdata[0]}, %{customdata[1]}"
))
fig.show()
3

Thank you very much! problem solved!