Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Hovering text in Stacked BarChart

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

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()

Thank you very much! problem solved!