Mouse Cursor Effect/Change on Graph and Legend

📊 Plotly Python
1

Hi there!
I have a pie chart where I implemented clickable slices. The legend however is disabled from being clickable.

What I would like to have is to have the hand-mouse-icon while I am on the pie chart. However, when I hover over the legend I dont want to have this behavior, so that the user gets the indication that the slices of the pie are clickable, while the legend is not.

See below a video on the behavior as it is at the moment. I would want to have the hand icon that I have when hovering over the legend upon hovering over the pie. How do I do that?

clickbehavior

2

I solved this via css and

#pie-chart > div.js-plotly-plot > div > div > svg:nth-child(1) > g.pielayer{
    cursor: pointer;
}
3

I have a similar requirement to implement the hand cursor.
Can you please share some materials so that i can refer that for my implementation ?

4

Well I basically opened the dashboard in chrome and inspected the element (the pie chart). I then copied the selector as mentioned above.

A rather minimum working example would be this:

import json
from pprint import pprint
import dash_table
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from plotly import graph_objs as go
import plotly.express as px
import pandas as pd


app = dash.Dash(__name__)

labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500, 2500, 1053, 500]
data = {'Gas': labels, 'Values': values}
df = pd.DataFrame(data)

# pull is given as a fraction of the pie radius
fig = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5)])
fig.update_layout(clickmode='event+select')


app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions'
    ),
    dash_table.DataTable(
            id='datatable-interactivity',
            columns=[
                {"name": i, "id": i, "deletable": False, "selectable": True} for i in df.columns
            ],
            data=df.to_dict('records'),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            row_deletable=True,
            selected_columns=[],
            selected_rows=[0],
            page_action="native",
            page_current=0,
            page_size=10,
        ),
        html.Div(id='datatable-interactivity-container')
])

@app.callback(
    Output('basic-interactions', 'figure'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData):
    if all([param is None for param in [clickData]]):
        figure = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5)])
        figure.plotly_relayout({'width': 500})
    else:
        choice = clickData['points'][0]['pointNumber']
        print(choice)
        if choice == 0:
            figure = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5, pull=[0.1, 0, 0, 0])])
        elif choice == 1:
            figure = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5, pull=[0, 0.1, 0, 0])])
        elif choice == 2:
            figure = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5, pull=[0, 0, 0.1, 0])])
        elif choice == 3:
            figure = go.Figure(data=[go.Pie(labels=labels, values=values, hole=.5, pull=[0, 0, 0, 0.1])])
    return figure


@app.callback(
    [Output('datatable-interactivity', 'data')],
    [Input('basic-interactions', 'relayoutData')])
def display_relayout_data(relayoutData):
    if "hiddenlabels" in relayoutData:
        info = relayoutData.get("hiddenlabels", "")
        filtered = df
        filtered = filtered.loc[-filtered['Gas'].isin(info)]
    else:
        filtered = df
    return (filtered.to_dict('records'),)


if __name__ == '__main__':
    app.run_server(debug=False)

in your .css (in a folder named “assets”), this would work for this specific example:

#basic-interactions > div.js-plotly-plot > div > div > svg:nth-child(1) > g.pielayer{
	cursor:pointer;
}

I hope this helps?

1 Like