hoverData changing pie chart size

Dash Python
1

Hello!

I have two charts:

i. the first one is a line chart with two bar charts as traces
ii. the second one is a pie chart that changes everytime a user hover the data on the bars of the first chart

In my code of the callback I set that all of the possible pie charts will be the same size, the same color. the same everything. This is the code for the pie chart:

pie.fig = px.pie(data_frame = df,
                           values=hov_data,
                           names='index',
                           width=315,
                           height=220,
                           template='plotly_white',
                           color_discrete_sequence=['#011b69', '#00b5a9'],
                           hole=0.7
                            )

                pie.fig.update_traces(hovertemplate=None, textfont={'size':14}, insidetextorientation='horizontal', showlegend=True)
                pie.fig.update_layout(margin=dict(l=0, r=0, t=0, b=0),
                              legend = dict(orientation = 'h', xanchor = "center", x = 0.5, y= 0, font=dict(size=14)))

The problem is that. when I hover the first chart, the pie chart don’t follow the code and change the size and how the legend are display.

This is the pie chart when I hover one of the bars:
1

And this is the same pie chart when I hover the another bar
2

What is causing this problem?

2

Hi, I would inspect with f12 developer tools to check for différences in actual representation between the two. This will give you a better understanding what’s wrong. You can even manually adjust to better catch what’s going on

3

Hey!

What should I actually search for?

Tryed to use f12 but saw nothing relevant.

4

Hi, well it’s hard to say really since it’s not an exact science. The idea is that you select (in F12 dev mode) an item in the layout of the page (like the graph / legend / … or whatever has the deviant behavior) and you see in real time what CSS attributes change when hovering over it. This way you can also compare with the working on. Sorry I can’t be more precise, but there are video’s online about chrome f12 dev tools and css troubleshooting. it’s a good skillset to have.

5

BTW most likely it’s because in the second graph the percentage is outside of the graph to the left and the legend might be calculated on the size of the actual pie, which looks smaller in the second picture, causing the legend to be on top of each other instead of side by side

1 Like
6

I think problem comes from legend styling and I think you should try to add entrywidth in your legend = dict(orientation = 'h', xanchor = "center", x = 0.5, y= 0, font=dict(size=14)) (Plotly must be higher than version 5.11)

1 Like
7

@jcuypers you were right about the legend going outside of the graph causing the resize of the chart

for future references, I got it fixed with:

fig.update_traces(textposition='inside')
fig.update_layout(uniformtext_mode='hide', uniformtext_minsize=12)
1 Like