Pie chart crossfilter - clickmode

Dash Python
1

Hello,

Is click mode on pie chart supported?

I am trying to use a pie chart in cross-filtering, but ‘clickmode’: ‘event+select’, is not working as it does on bar charts.

edit: To provide clarity on “not working”, when using a bar chart the ‘selected’ callback works fine, but on the pie chart, the ‘selected’ call back never triggers.

Thanks,
Kevin

2

Hi @notincontrol, yes it is supported as shown in the demo below adapted from the dash docs and the plotly pie tutorial. However it’s possible that it’s been added only in recent versions of plotly.py, which one are you using?

import json
from textwrap import dedent as d

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly.express as px
df = px.data.gapminder().query("year == 2007").query("continent == 'Europe'")
df.loc[df['pop'] < 2.e6, 'country'] = 'Other countries' # Represent only large countries
fig = px.pie(df, values='pop', names='country', title='Population of European continent')


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        config={'editable':True},
        figure=fig
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
                **Hover Data**

                Mouse over values in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre'])
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Click Data**

                Click on points in the graph.
            """)),
            html.Pre(id='click-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Selection Data**

                Choose the lasso or rectangle tool in the graph's menu
                bar and then select points in the graph.

                Note that if `layout.clickmode = 'event+select'`, selection data also 
                accumulates (or un-accumulates) selected data if you hold down the shift
                button while clicking.
            """)),
            html.Pre(id='selected-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Zoom and Relayout Data**

                Click and drag on the graph to zoom or click on the zoom
                buttons in the graph's menu bar.
                Clicking on legend items will also fire
                this event.
            """)),
            html.Pre(id='relayout-data', style=styles['pre']),
        ], className='three columns')
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)


@app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


@app.callback(
    Output('selected-data', 'children'),
    [Input('basic-interactions', 'selectedData')])
def display_selected_data(selectedData):
    return json.dumps(selectedData, indent=2)


@app.callback(
    Output('relayout-data', 'children'),
    [Input('basic-interactions', 'relayoutData')])
def display_relayout_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


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

image
image1091×812 81.9 KB

4

Hi, thank you for the response.

I am using versions:
dash==1.8.0
dash-bootstrap-components==0.8.2
dash-core-components==1.7.0
dash-html-components==1.0.2
dash-renderer==1.2.3
dash-table==4.6.0
dask==2.10.1
Flask==1.1.1
Flask-Compress==1.4.0

Please let me know if anything seems out of date and I will try to update and try again.

I have edited my original question to help explain what I meant by not working.

When using a bar chart (or scatter chart in the example), and data is clicked on, both the click data and selection data trigger callbacks. Additionally, the plot is updated such that only the selected data is colored on the bar chart or scatter chart and all other datapoints have their opacity changed.

My issue right now is that it appears that clickdata works on pie chart, but the selection does not (implemented with control+click) nor does the graph change to highlight only the selected data.

5

Ah ok. Unfortunately, I don’t think that box or lasso selections are possible in plotly pie charts at the moment…

6

Thank you, do you know where I can find the documentation that shows which plot types support ‘SelectedData’ callbacks.

I have personally tested bar and see the example with scatter but struggling to find documentation for others. My dashboard will be limited to those charts that support multiple selection.

Thanks,
Kevin

7

Not exactly documentation but there is an open issue for this here https://github.com/plotly/plotly.js/issues/170 (it’s not completely up to date since for example some polar charts and choropleth charts also have box/lasso selection). You can also take a quick look at the plotly express intro page https://plot.ly/python/plotly-express/ to see for which charts multi selection is working.

9

thanks, mam I got what I wanted. thanks to you a lot

1 Like
10

has anyone found the answer I’m facing a similar problem