# 'clickData' callback not called when multiple inputs

**URL:** <https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928>\
**Category:** Dash Python\
**Created:** [January 24, 2018, 2:44pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928 "2018-01-24T14:44:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![baris](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@baris](https://community.plotly.com/u/baris)\
**Post date:** [January 24, 2018, 2:44pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/1 "2018-01-24T14:44:02Z")

</div>

When I have an additional input other than just clickData, the callback isn’t called when the user clicks on the graph. The callback is called correctly after the user also updates the second input.

As an example, I have:  
@app.callback(  
Output(‘coin\_dist\_graph’, ‘figure’),  
[Input(‘average\_coins\_graph’, ‘clickData’), Input(‘coin\_type\_dropdown’, ‘value’)]  
)  
def display\_click\_data(click\_data, coin\_type):

display\_click\_data is only called if the user picks a value in the coin\_type\_dropdown after clicking on the graph.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 24, 2018, 11:46pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/2 "2018-01-24T23:46:23Z")

</div>

Can you please create a small, reproducable example? I can not replicate this issue. I tried:

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

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [{
                'x': [1, 2, 3],
                'y': [3, 1, 2]
            }]
        }
    ),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c']]
    ),
    html.Pre(id='output')
])

@app.callback(Output('output', 'children'), [
    Input('graph', 'clickData'),
    Input('dropdown', 'value')])
def update_output(*args):
    return json.dumps(args, indent=2)

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

```

 ![dash-clickData-multiple-inputs](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/058c42054f888974159170ce7b85f0aea1d40890.gif)

---

<div class="post-metadata">

**Author:** ![jtp](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jtp](https://community.plotly.com/u/jtp)\
**Post date:** [January 25, 2018, 3:33pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/3 "2018-01-25T15:33:24Z")

</div>

It’s possible to reproduce it when creating the figure with the `fixedrange: True` option (nearly same code as above):

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

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [{
                'x': [1, 2, 3],
                'y': [1, 10, 100]
            }],
            'layout': {
                'yaxis': {
                    'fixedrange': True,
                },
                'xaxis': {
                    'fixedrange': True,
                }
            }
        }
    ),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c']]
    ),
    html.Pre(id='output')
])

@app.callback(Output('output', 'children'), [
    Input('graph', 'clickData'),
    Input('dropdown', 'value')])
def update_output(*args):
    return json.dumps(args, indent=2)

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

```

After some investigation, it seems to be related to an issue with plotly.js itself: [https://github.com/plotly/plotly.js/issues/2272](https://github.com/plotly/plotly.js/issues/2272). A fixed has been merged 3 days ago: [https://github.com/plotly/plotly.js/pull/2279](https://github.com/plotly/plotly.js/pull/2279)

The `hoverData` event seems to work fine however.  
Any chance to get a new version of Dash Components (0.18.1) to include plotly.js 1.33.1? ([https://github.com/plotly/plotly.js/releases/tag/v1.33.1](https://github.com/plotly/plotly.js/releases/tag/v1.33.1))

---

<div class="post-metadata">

**Author:** ![jtp](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jtp](https://community.plotly.com/u/jtp)\
**Post date:** [January 25, 2018, 4:13pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/4 "2018-01-25T16:13:19Z")

</div>

PR ready! [https://github.com/plotly/dash-core-components/pull/150](https://github.com/plotly/dash-core-components/pull/150)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 25, 2018, 6:28pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/5 "2018-01-25T18:28:20Z")

</div>

Thanks so much for investigating. `dash-core-components==0.18.1` is now available.

---

<div class="post-metadata">

**Author:** ![baris](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@baris](https://community.plotly.com/u/baris)\
**Post date:** [January 26, 2018, 12:11pm UTC](https://community.plotly.com/t/clickdata-callback-not-called-when-multiple-inputs/7928/6 "2018-01-26T12:11:05Z")

</div>

Thanks a lot for looking into it! I’ve tried with 0.18.1 and this works fine with fixedrange

But my issue turned out to be, I was returning None for the figure output of a second graph when the page is first loaded with no clickData. When I return {} instead, it works fine

In case you want to see, here’s a test case:

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

from app import app

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [{
                'x': [1, 2, 3],
                'y': [3, 1, 2]
            }],
        }
    ),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c']],
        value='a'
    ),
    dcc.Graph(
        id='graph2'
    )
])

i = 0

@app.callback(Output('graph2', 'figure'), [
    Input('graph', 'clickData'),
    Input('dropdown', 'value')])
def update_output(*args):
    global i
    if i == 0:
        i = 1
        return None
    else:
        return {
            'data': [{
                'x': [1, 2, 3],
                'y': [3, 1, 2]
            }],
        }

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