Can someone Explain the second parameter in Dash Output/Input

Dash Python
1

Hi
consider this example

@app.callback(
Output(“my_graph”, “figure”),
Input(“my_button”, “value”)
def func(item):
return fig

I understand most of this code except for the second parameter of Output and Input.
Sometimes it is “figure”, sometimes “value” or “options”, “clickData”, “hoverData” or “children”
where does this come from.
It is not used when building for example the dcc.RadioItems, or dcc.Graph nor in the function that uses the callback decorator.

Where does this second parameter come from.
Long explanations are welcome :slight_smile:

2

For background, I’d recommend reading through:

  1. Part 2. Layout | Dash for Python Documentation | Plotly
  2. Part 3. Basic Callbacks | Dash for Python Documentation | Plotly

Here’s a quick summary:

The second value is the component’s “property”. Each component has a different set of properties that are used to configure the behavior or how that component is rendered.

The full list of component properties are available on each component’s reference page. For example, scroll to the bottom of Dropdown | Dash for Python Documentation | Plotly to the “Reference” section see the list of properties. Each component has its own dedicated page in the Documentation. You can find this by filtering in the sidebar of the documentation or by googling. You can also find the list of properties by calling help(<component>) e.g. help(dcc.Dropdown)

Some of the properties will “update” based off of user interaction. For example, when you select an item in a dropdown, the “value” property will update. The properties are meant to always represent the current state of the UI (the “value” property represents the currently selected item in a dropdown). By “update” I mean that if you have a callback with an Input where value is the property then Dash will call that callback.

All properties can be also be the target of Output as well.

If a property is both an Output and an Input, then when a callback update’s that property via an Output, the callback that “listens” to that property via an Input will get fired. This is common in things like the data property of dcc.Store.

2 Likes
3

There are many components and many properties, but the common ones are:

  • figure property in dcc.Graph - Represents the figure / graph of the graph. This property doesn’t update via user interaction
  • value property in dcc.Dropdown, dcc.Input, dcc.Slider, dcc.Textarea. Changes through user interaction. Represents the currently selected value of that control item.
  • n_clicks property in most components. Represents the number of times a component has been clicked on. Isn’t actually visible in the component at all
  • data property in dcc.Store - Arbitrary data that can held in dcc.Store. Commonly set as an Output and “read” in a separate callback as Input or State. Also not visible in the component.
  • pathname in dcc.Location - Used for multi-page apps. Represents the current “path” of the URL on the page. Updates through user interaction (page navigation)
  • children property in most components. Represents the text of the component or the set of components that “live within” that component. Often targeted as an Output in order to dynamically display or update a set of components.
1 Like
4

I probably should’ve mentioned this in the beginning, but the component properties are also declared when defining layouts in app.layout or returning a tree of components in a callback that has children as its Output. For example, in app.layout = html.Div(children='Hello'), the “children” is the property of the “html.Div” component. Or in app.layout = dcc.Graph(figure=px.scatter(...), style={'border': 'thin black solid'}), the “figure” and style are properties of the dcc.Graph component. Every word that precedes the = within a component is a “property” and can be updated by a callback’s Output or can be passed into a callback with Input or State. If that property happens to be able to be updated by user interaction, then interacting with that property in the UI will trigger the callback if the property is an Input.

1 Like
5

Thank you so much for this clear explanation.
Helps a lot.