Hovertext in all bars together in stacked bar plot

Dash Python
1

Hi,
I need help regarding the hover functionality in Plotly Dash. According to the below provided code below, I can see the hover on the stacked bars once I am over the X-axis value ‘B‘. I want the hover to also show for A and C together with B once I am hovering anywhere amongst A,B and C. Is this possible in Plotly?
I want to have a solution to show the values of each stacked bar together for my report and for a very dense stacked barplot, I see that only with this hovertext I can show it clearly otherwise I tried showing the values inside the bars using text and also using Annotations but its not looking good for very crowdly stacked bar plot. Is there a better solution you can suggest? Please help.

import plotly.graph_objects as go

x = ['A', 'B', 'C']
trace1_y = [10, 20, 30]
trace2_y = [5, 15, 25]

hovertext1 = ['Trace 1 - A: 10', 'Trace 1 - B: 20', 'Trace 1 - C: 30']
hovertext2 = ['Trace 2 - A: 5', 'Trace 2 - B: 15', 'Trace 2 - C: 25']

fig = go.Figure()

fig.add_trace(go.Bar(
    x=x,
    y=trace1_y,
    name='Trace 1',
    hovertext=hovertext1,
    hovertemplate='%{hovertext}<extra></extra>',
))

fig.add_trace(go.Bar(
    x=x,
    y=trace2_y,
    name='Trace 2',
    hovertext=hovertext2,
    hovertemplate='%{hovertext}<extra></extra>',
))

fig.update_layout(
    barmode='stack',
    hovermode='x',
    title='Stacked Bar with Custom Hover on All Bars at x',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
)

fig.show()

image
image1827×889 64.8 KB

2

I would suggest adding a div above or on the side of the graph; and then a callback that is triggered by hovering, uses the full Figure as a State (or the original data used by the figure), and then Outputs the desired information on this div. This requires some work to set up this, however…

3

Just find by chance, this may help you