Sunburst Diagram - Intelligent Hover Data

📊 Plotly Python
1

Hi all,

I was wondering whether there is an option to make the hover data on my plotly express sunburst diagram a bit more intelligent, and only display certain elements depending which segment my mouse is over. See the code I am using below to create the diagram:

import plotly.express as px
import pandas as pd

data = {'first_column':  ['value_1', 'value_2', 'value_3', 'value_4', 'value_5', 'value_6'],
        'second_column': ['North', 'East', 'South', 'West', 'North', 'North'],
        'third_column': [11, 1, 7, 9, 5, 2],
        'fourth_column':[9,9,7,6,5,4]
        }

df = pd.DataFrame(data)

fig = px.sunburst(
    data_frame=df,
    path=["first_column", "second_column"],
    color = "first_column",
    values="third_column",
    color_discrete_sequence=px.colors.qualitative.Pastel,
    maxdepth=2,
    custom_data=['fourth_column'],
    hover_name="first_column",
    # hover_data={"fourth_column":True},
    template='ggplot2',
)
fig.update_traces(hovertemplate=('<br><b>The third_column is</b>: %{value}<br>'+\
                                '<br><b>The third_column is</b>: %{customdata[0]}<br>'))

fig.show()

Is there a way for instance to stop the hover data displaying the custom data, if the mouse is over a certain segment?

image
image976×789 41.9 KB

Thanks in advance for any help.

1 Like
2

Hi @BenArnold - I have been looking into this very same problem; hiding data at certain outter layers - did you manage to find a solution!?

3

Hello, unfortunately not. I moved on to building the info-graphic in a react graphing library as I couldn’t find the exact display options that I needed. I would be interested in knowing the answer if you find it. Sorry I can’t be of more help!

1 Like
4

@BenArnold @LouizZanjroz

To change the hovertemplate, just print:

fig.data[0].hovertemplate

to inspect how hovertemplate is defined by the px code. In this case we get:

'<br><b>The third_column is</b>: %{value}<br><br><b>The third_column is</b>: %{customdata[0]}<br>'

Now redefine it as follows or in any other form:

fig.update_traces(hovertemplate="<br><b>The third_column is</b>: %{value}")

To be able to modify a plotly.express plot, an user should have experience with plotly.py i.e. the original python plotly version.
Starting to work directly with plotly express amounts to memorize a long list of attributes to be passed as arguments and keywords for plotly express functions, without knowing what is going on behind the scenes. But if you know plotly.py you can creatively modify the initial plot.

1 Like
5

Thanks @empet - I appreciate your input on object inspection and manipulation, and totally see your point about diving first into plotly.py.