Open
Description
dash 3.0.2
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0
plotly 6.0.1
Describe the bug
When passing a figure as a State variable in a callback, the data attribute of the figure seems to be modified. This results in it being difficult to access the x, y data from the figure and use it within the callback.
Expected behavior
Previously, the data attribute had the same structure as accessing the data attribute from the figure object itself which allowed for access to the data in the trace. The example below should make this explanation clearer.
Example
from dash import Dash, html, dcc, callback, Output, Input, State
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import plotly.express as px
import json
app = Dash(__name__)
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
app.layout = html.Div(
[
html.Div(dcc.Graph(id="plot", figure=fig)),
dbc.Button(id="button-id", children="Callback!"),
html.H1("Raw Plot Data:"),
html.Div(children=json.dumps(fig["data"][0].to_json(), indent=2)),
html.H1("Plot Data Through Callback:"),
html.Div(id="callback-output")
]
)
@callback(
Output("callback-output", "children"),
Input("button-id", "n_clicks"),
State("plot", "figure"),
prevent_initial_call=True
)
def display_data(n_clicks, figure):
if n_clicks > 0:
return json.dumps(figure["data"][0], indent=2)
else:
raise PreventUpdate
if __name__ == '__main__':
app.run(debug=True, dev_tools_hot_reload=False)The example is a simple Dash app which displays the data attribute of the figure directly from the figure object and after it is used as a State variable in the callback.
The output of fig["data"][0] is the trace as expected, however, accessing figure["data"][0] within the callback gives the following:
{
"hovertemplate": "sepal_width=%{x}<br>sepal_length=%{y}<extra></extra>",
"legendgroup": "",
"marker": {
"color": "#636efa",
"symbol": "circle"
},
"mode": "markers",
"name": "",
"orientation": "v",
"showlegend": false,
"x": {
"dtype": "f8",
"bdata": "AAAAAAAADEAAAAAAAAAIQJqZmZmZmQlAzczMzMzMCEDNzMzMzMwMQDMzMzMzMw9AMzMzMzMzC0AzMzMzMzMLQDMzMzMzMwdAzczMzMzMCECamZmZmZkNQDMzMzMzMwtAAAAAAAAACEAAAAAAAAAIQAAAAAAAABBAmpmZmZmZEUAzMzMzMzMPQAAAAAAAAAxAZmZmZmZmDkBmZmZmZmYOQDMzMzMzMwtAmpmZmZmZDUDNzMzMzMwMQGZmZmZmZgpAMzMzMzMzC0AAAAAAAAAIQDMzMzMzMwtAAAAAAAAADEAzMzMzMzMLQJqZmZmZmQlAzczMzMzMCEAzMzMzMzMLQGZmZmZmZhBAzczMzMzMEEDNzMzMzMwIQJqZmZmZmQlAAAAAAAAADEDNzMzMzMwIQAAAAAAAAAhAMzMzMzMzC0AAAAAAAAAMQGZmZmZmZgJAmpmZmZmZCUAAAAAAAAAMQGZmZmZmZg5AAAAAAAAACEBmZmZmZmYOQJqZmZmZmQlAmpmZmZmZDUBmZmZmZmYKQJqZmZmZmQlAmpmZmZmZCUDNzMzMzMwIQGZmZmZmZgJAZmZmZmZmBkBmZmZmZmYGQGZmZmZmZgpAMzMzMzMzA0AzMzMzMzMHQJqZmZmZmQVAAAAAAAAAAEAAAAAAAAAIQJqZmZmZmQFAMzMzMzMzB0AzMzMzMzMHQM3MzMzMzAhAAAAAAAAACECamZmZmZkFQJqZmZmZmQFAAAAAAAAABECamZmZmZkJQGZmZmZmZgZAAAAAAAAABEBmZmZmZmYGQDMzMzMzMwdAAAAAAAAACEBmZmZmZmYGQAAAAAAAAAhAMzMzMzMzB0DNzMzMzMwEQDMzMzMzMwNAMzMzMzMzA0CamZmZmZkFQJqZmZmZmQVAAAAAAAAACEAzMzMzMzMLQM3MzMzMzAhAZmZmZmZmAkAAAAAAAAAIQAAAAAAAAARAzczMzMzMBEAAAAAAAAAIQM3MzMzMzARAZmZmZmZmAkCamZmZmZkFQAAAAAAAAAhAMzMzMzMzB0AzMzMzMzMHQAAAAAAAAARAZmZmZmZmBkBmZmZmZmYKQJqZmZmZmQVAAAAAAAAACEAzMzMzMzMHQAAAAAAAAAhAAAAAAAAACEAAAAAAAAAEQDMzMzMzMwdAAAAAAAAABEDNzMzMzMwMQJqZmZmZmQlAmpmZmZmZBUAAAAAAAAAIQAAAAAAAAARAZmZmZmZmBkCamZmZmZkJQAAAAAAAAAhAZmZmZmZmDkDNzMzMzMwEQJqZmZmZmQFAmpmZmZmZCUBmZmZmZmYGQGZmZmZmZgZAmpmZmZmZBUBmZmZmZmYKQJqZmZmZmQlAZmZmZmZmBkAAAAAAAAAIQGZmZmZmZgZAAAAAAAAACEBmZmZmZmYGQGZmZmZmZg5AZmZmZmZmBkBmZmZmZmYGQM3MzMzMzARAAAAAAAAACEAzMzMzMzMLQM3MzMzMzAhAAAAAAAAACEDNzMzMzMwIQM3MzMzMzAhAzczMzMzMCECamZmZmZkFQJqZmZmZmQlAZmZmZmZmCkAAAAAAAAAIQAAAAAAAAARAAAAAAAAACEAzMzMzMzMLQAAAAAAAAAhA",
"_inputArray": {
"0": 3.5,
"1": 3,
"2": 3.2,
"3": 3.1,
"4": 3.6,
"5": 3.9,
"6": 3.4,
"7": 3.4,
"8": 2.9,
"9": 3.1,
"10": 3.7,
"11": 3.4,
"12": 3,
"13": 3,
"14": 4,
"15": 4.4,
"16": 3.9,
"17": 3.5,
"18": 3.8,
"19": 3.8,
"20": 3.4,
"21": 3.7,
"22": 3.6,
"23": 3.3,
"24": 3.4,
"25": 3,
"26": 3.4,
"27": 3.5,
"28": 3.4,
"29": 3.2,
"30": 3.1,
"31": 3.4,
"32": 4.1,
"33": 4.2,
"34": 3.1,
"35": 3.2,
"36": 3.5,
"37": 3.1,
"38": 3,
"39": 3.4,
"40": 3.5,
"41": 2.3,
"42": 3.2,
"43": 3.5,
"44": 3.8,
"45": 3,
"46": 3.8,
"47": 3.2,
"48": 3.7,
"49": 3.3,
"50": 3.2,
"51": 3.2,
"52": 3.1,
"53": 2.3,
"54": 2.8,
"55": 2.8,
"56": 3.3,
"57": 2.4,
"58": 2.9,
"59": 2.7,
"60": 2,
"61": 3,
"62": 2.2,
"63": 2.9,
"64": 2.9,
"65": 3.1,
"66": 3,
"67": 2.7,
"68": 2.2,
"69": 2.5,
"70": 3.2,
"71": 2.8,
"72": 2.5,
"73": 2.8,
"74": 2.9,
"75": 3,
"76": 2.8,
"77": 3,
"78": 2.9,
"79": 2.6,
"80": 2.4,
"81": 2.4,
"82": 2.7,
"83": 2.7,
"84": 3,
"85": 3.4,
"86": 3.1,
"87": 2.3,
"88": 3,
"89": 2.5,
"90": 2.6,
"91": 3,
"92": 2.6,
"93": 2.3,
"94": 2.7,
"95": 3,
"96": 2.9,
"97": 2.9,
"98": 2.5,
"99": 2.8,
"100": 3.3,
"101": 2.7,
"102": 3,
"103": 2.9,
"104": 3,
"105": 3,
"106": 2.5,
"107": 2.9,
"108": 2.5,
"109": 3.6,
"110": 3.2,
"111": 2.7,
"112": 3,
"113": 2.5,
"114": 2.8,
"115": 3.2,
"116": 3,
"117": 3.8,
"118": 2.6,
"119": 2.2,
"120": 3.2,
"121": 2.8,
"122": 2.8,
"123": 2.7,
"124": 3.3,
"125": 3.2,
"126": 2.8,
"127": 3,
"128": 2.8,
"129": 3,
"130": 2.8,
"131": 3.8,
"132": 2.8,
"133": 2.8,
"134": 2.6,
"135": 3,
"136": 3.4,
"137": 3.1,
"138": 3,
"139": 3.1,
"140": 3.1,
"141": 3.1,
"142": 2.7,
"143": 3.2,
"144": 3.3,
"145": 3,
"146": 2.5,
"147": 3,
"148": 3.4,
"149": 3,
"bdata": "AAAAAAAADEAAAAAAAAAIQJqZmZmZmQlAzczMzMzMCEDNzMzMzMwMQDMzMzMzMw9AMzMzMzMzC0AzMzMzMzMLQDMzMzMzMwdAzczMzMzMCECamZmZmZkNQDMzMzMzMwtAAAAAAAAACEAAAAAAAAAIQAAAAAAAABBAmpmZmZmZEUAzMzMzMzMPQAAAAAAAAAxAZmZmZmZmDkBmZmZmZmYOQDMzMzMzMwtAmpmZmZmZDUDNzMzMzMwMQGZmZmZmZgpAMzMzMzMzC0AAAAAAAAAIQDMzMzMzMwtAAAAAAAAADEAzMzMzMzMLQJqZmZmZmQlAzczMzMzMCEAzMzMzMzMLQGZmZmZmZhBAzczMzMzMEEDNzMzMzMwIQJqZmZmZmQlAAAAAAAAADEDNzMzMzMwIQAAAAAAAAAhAMzMzMzMzC0AAAAAAAAAMQGZmZmZmZgJAmpmZmZmZCUAAAAAAAAAMQGZmZmZmZg5AAAAAAAAACEBmZmZmZmYOQJqZmZmZmQlAmpmZmZmZDUBmZmZmZmYKQJqZmZmZmQlAmpmZmZmZCUDNzMzMzMwIQGZmZmZmZgJAZmZmZmZmBkBmZmZmZmYGQGZmZmZmZgpAMzMzMzMzA0AzMzMzMzMHQJqZmZmZmQVAAAAAAAAAAEAAAAAAAAAIQJqZmZmZmQFAMzMzMzMzB0AzMzMzMzMHQM3MzMzMzAhAAAAAAAAACECamZmZmZkFQJqZmZmZmQFAAAAAAAAABECamZmZmZkJQGZmZmZmZgZAAAAAAAAABEBmZmZmZmYGQDMzMzMzMwdAAAAAAAAACEBmZmZmZmYGQAAAAAAAAAhAMzMzMzMzB0DNzMzMzMwEQDMzMzMzMwNAMzMzMzMzA0CamZmZmZkFQJqZmZmZmQVAAAAAAAAACEAzMzMzMzMLQM3MzMzMzAhAZmZmZmZmAkAAAAAAAAAIQAAAAAAAAARAzczMzMzMBEAAAAAAAAAIQM3MzMzMzARAZmZmZmZmAkCamZmZmZkFQAAAAAAAAAhAMzMzMzMzB0AzMzMzMzMHQAAAAAAAAARAZmZmZmZmBkBmZmZmZmYKQJqZmZmZmQVAAAAAAAAACEAzMzMzMzMHQAAAAAAAAAhAAAAAAAAACEAAAAAAAAAEQDMzMzMzMwdAAAAAAAAABEDNzMzMzMwMQJqZmZmZmQlAmpmZmZmZBUAAAAAAAAAIQAAAAAAAAARAZmZmZmZmBkCamZmZmZkJQAAAAAAAAAhAZmZmZmZmDkDNzMzMzMwEQJqZmZmZmQFAmpmZmZmZCUBmZmZmZmYGQGZmZmZmZgZAmpmZmZmZBUBmZmZmZmYKQJqZmZmZmQlAZmZmZmZmBkAAAAAAAAAIQGZmZmZmZgZAAAAAAAAACEBmZmZmZmYGQGZmZmZmZg5AZmZmZmZmBkBmZmZmZmYGQM3MzMzMzARAAAAAAAAACEAzMzMzMzMLQM3MzMzMzAhAAAAAAAAACEDNzMzMzMwIQM3MzMzMzAhAzczMzMzMCECamZmZmZkFQJqZmZmZmQlAZmZmZmZmCkAAAAAAAAAIQAAAAAAAAARAAAAAAAAACEAzMzMzMzMLQAAAAAAAAAhA",
"dtype": "f8",
"shape": "150"
}
},
"xaxis": "x",
"y": {
"dtype": "f8",
"bdata": "ZmZmZmZmFECamZmZmZkTQM3MzMzMzBJAZmZmZmZmEkAAAAAAAAAUQJqZmZmZmRVAZmZmZmZmEkAAAAAAAAAUQJqZmZmZmRFAmpmZmZmZE0CamZmZmZkVQDMzMzMzMxNAMzMzMzMzE0AzMzMzMzMRQDMzMzMzMxdAzczMzMzMFkCamZmZmZkVQGZmZmZmZhRAzczMzMzMFkBmZmZmZmYUQJqZmZmZmRVAZmZmZmZmFEBmZmZmZmYSQGZmZmZmZhRAMzMzMzMzE0AAAAAAAAAUQAAAAAAAABRAzczMzMzMFEDNzMzMzMwUQM3MzMzMzBJAMzMzMzMzE0CamZmZmZkVQM3MzMzMzBRAAAAAAAAAFkCamZmZmZkTQAAAAAAAABRAAAAAAAAAFkCamZmZmZkTQJqZmZmZmRFAZmZmZmZmFEAAAAAAAAAUQAAAAAAAABJAmpmZmZmZEUAAAAAAAAAUQGZmZmZmZhRAMzMzMzMzE0BmZmZmZmYUQGZmZmZmZhJAMzMzMzMzFUAAAAAAAAAUQAAAAAAAABxAmpmZmZmZGUCamZmZmZkbQAAAAAAAABZAAAAAAAAAGkDNzMzMzMwWQDMzMzMzMxlAmpmZmZmZE0BmZmZmZmYaQM3MzMzMzBRAAAAAAAAAFECamZmZmZkXQAAAAAAAABhAZmZmZmZmGEBmZmZmZmYWQM3MzMzMzBpAZmZmZmZmFkAzMzMzMzMXQM3MzMzMzBhAZmZmZmZmFkCamZmZmZkXQGZmZmZmZhhAMzMzMzMzGUBmZmZmZmYYQJqZmZmZmRlAZmZmZmZmGkAzMzMzMzMbQM3MzMzMzBpAAAAAAAAAGEDNzMzMzMwWQAAAAAAAABZAAAAAAAAAFkAzMzMzMzMXQAAAAAAAABhAmpmZmZmZFUAAAAAAAAAYQM3MzMzMzBpAMzMzMzMzGUBmZmZmZmYWQAAAAAAAABZAAAAAAAAAFkBmZmZmZmYYQDMzMzMzMxdAAAAAAAAAFEBmZmZmZmYWQM3MzMzMzBZAzczMzMzMFkDNzMzMzMwYQGZmZmZmZhRAzczMzMzMFkAzMzMzMzMZQDMzMzMzMxdAZmZmZmZmHEAzMzMzMzMZQAAAAAAAABpAZmZmZmZmHkCamZmZmZkTQDMzMzMzMx1AzczMzMzMGkDNzMzMzMwcQAAAAAAAABpAmpmZmZmZGUAzMzMzMzMbQM3MzMzMzBZAMzMzMzMzF0CamZmZmZkZQAAAAAAAABpAzczMzMzMHkDNzMzMzMweQAAAAAAAABhAmpmZmZmZG0BmZmZmZmYWQM3MzMzMzB5AMzMzMzMzGUDNzMzMzMwaQM3MzMzMzBxAzczMzMzMGEBmZmZmZmYYQJqZmZmZmRlAzczMzMzMHECamZmZmZkdQJqZmZmZmR9AmpmZmZmZGUAzMzMzMzMZQGZmZmZmZhhAzczMzMzMHkAzMzMzMzMZQJqZmZmZmRlAAAAAAAAAGECamZmZmZkbQM3MzMzMzBpAmpmZmZmZG0AzMzMzMzMXQDMzMzMzMxtAzczMzMzMGkDNzMzMzMwaQDMzMzMzMxlAAAAAAAAAGkDNzMzMzMwYQJqZmZmZmRdA",
"_inputArray": {
"0": 5.1,
"1": 4.9,
"2": 4.7,
"3": 4.6,
"4": 5,
"5": 5.4,
"6": 4.6,
"7": 5,
"8": 4.4,
"9": 4.9,
"10": 5.4,
"11": 4.8,
"12": 4.8,
"13": 4.3,
"14": 5.8,
"15": 5.7,
"16": 5.4,
"17": 5.1,
"18": 5.7,
"19": 5.1,
"20": 5.4,
"21": 5.1,
"22": 4.6,
"23": 5.1,
"24": 4.8,
"25": 5,
"26": 5,
"27": 5.2,
"28": 5.2,
"29": 4.7,
"30": 4.8,
"31": 5.4,
"32": 5.2,
"33": 5.5,
"34": 4.9,
"35": 5,
"36": 5.5,
"37": 4.9,
"38": 4.4,
"39": 5.1,
"40": 5,
"41": 4.5,
"42": 4.4,
"43": 5,
"44": 5.1,
"45": 4.8,
"46": 5.1,
"47": 4.6,
"48": 5.3,
"49": 5,
"50": 7,
"51": 6.4,
"52": 6.9,
"53": 5.5,
"54": 6.5,
"55": 5.7,
"56": 6.3,
"57": 4.9,
"58": 6.6,
"59": 5.2,
"60": 5,
"61": 5.9,
"62": 6,
"63": 6.1,
"64": 5.6,
"65": 6.7,
"66": 5.6,
"67": 5.8,
"68": 6.2,
"69": 5.6,
"70": 5.9,
"71": 6.1,
"72": 6.3,
"73": 6.1,
"74": 6.4,
"75": 6.6,
"76": 6.8,
"77": 6.7,
"78": 6,
"79": 5.7,
"80": 5.5,
"81": 5.5,
"82": 5.8,
"83": 6,
"84": 5.4,
"85": 6,
"86": 6.7,
"87": 6.3,
"88": 5.6,
"89": 5.5,
"90": 5.5,
"91": 6.1,
"92": 5.8,
"93": 5,
"94": 5.6,
"95": 5.7,
"96": 5.7,
"97": 6.2,
"98": 5.1,
"99": 5.7,
"100": 6.3,
"101": 5.8,
"102": 7.1,
"103": 6.3,
"104": 6.5,
"105": 7.6,
"106": 4.9,
"107": 7.3,
"108": 6.7,
"109": 7.2,
"110": 6.5,
"111": 6.4,
"112": 6.8,
"113": 5.7,
"114": 5.8,
"115": 6.4,
"116": 6.5,
"117": 7.7,
"118": 7.7,
"119": 6,
"120": 6.9,
"121": 5.6,
"122": 7.7,
"123": 6.3,
"124": 6.7,
"125": 7.2,
"126": 6.2,
"127": 6.1,
"128": 6.4,
"129": 7.2,
"130": 7.4,
"131": 7.9,
"132": 6.4,
"133": 6.3,
"134": 6.1,
"135": 7.7,
"136": 6.3,
"137": 6.4,
"138": 6,
"139": 6.9,
"140": 6.7,
"141": 6.9,
"142": 5.8,
"143": 6.8,
"144": 6.7,
"145": 6.7,
"146": 6.3,
"147": 6.5,
"148": 6.2,
"149": 5.9,
"bdata": "ZmZmZmZmFECamZmZmZkTQM3MzMzMzBJAZmZmZmZmEkAAAAAAAAAUQJqZmZmZmRVAZmZmZmZmEkAAAAAAAAAUQJqZmZmZmRFAmpmZmZmZE0CamZmZmZkVQDMzMzMzMxNAMzMzMzMzE0AzMzMzMzMRQDMzMzMzMxdAzczMzMzMFkCamZmZmZkVQGZmZmZmZhRAzczMzMzMFkBmZmZmZmYUQJqZmZmZmRVAZmZmZmZmFEBmZmZmZmYSQGZmZmZmZhRAMzMzMzMzE0AAAAAAAAAUQAAAAAAAABRAzczMzMzMFEDNzMzMzMwUQM3MzMzMzBJAMzMzMzMzE0CamZmZmZkVQM3MzMzMzBRAAAAAAAAAFkCamZmZmZkTQAAAAAAAABRAAAAAAAAAFkCamZmZmZkTQJqZmZmZmRFAZmZmZmZmFEAAAAAAAAAUQAAAAAAAABJAmpmZmZmZEUAAAAAAAAAUQGZmZmZmZhRAMzMzMzMzE0BmZmZmZmYUQGZmZmZmZhJAMzMzMzMzFUAAAAAAAAAUQAAAAAAAABxAmpmZmZmZGUCamZmZmZkbQAAAAAAAABZAAAAAAAAAGkDNzMzMzMwWQDMzMzMzMxlAmpmZmZmZE0BmZmZmZmYaQM3MzMzMzBRAAAAAAAAAFECamZmZmZkXQAAAAAAAABhAZmZmZmZmGEBmZmZmZmYWQM3MzMzMzBpAZmZmZmZmFkAzMzMzMzMXQM3MzMzMzBhAZmZmZmZmFkCamZmZmZkXQGZmZmZmZhhAMzMzMzMzGUBmZmZmZmYYQJqZmZmZmRlAZmZmZmZmGkAzMzMzMzMbQM3MzMzMzBpAAAAAAAAAGEDNzMzMzMwWQAAAAAAAABZAAAAAAAAAFkAzMzMzMzMXQAAAAAAAABhAmpmZmZmZFUAAAAAAAAAYQM3MzMzMzBpAMzMzMzMzGUBmZmZmZmYWQAAAAAAAABZAAAAAAAAAFkBmZmZmZmYYQDMzMzMzMxdAAAAAAAAAFEBmZmZmZmYWQM3MzMzMzBZAzczMzMzMFkDNzMzMzMwYQGZmZmZmZhRAzczMzMzMFkAzMzMzMzMZQDMzMzMzMxdAZmZmZmZmHEAzMzMzMzMZQAAAAAAAABpAZmZmZmZmHkCamZmZmZkTQDMzMzMzMx1AzczMzMzMGkDNzMzMzMwcQAAAAAAAABpAmpmZmZmZGUAzMzMzMzMbQM3MzMzMzBZAMzMzMzMzF0CamZmZmZkZQAAAAAAAABpAzczMzMzMHkDNzMzMzMweQAAAAAAAABhAmpmZmZmZG0BmZmZmZmYWQM3MzMzMzB5AMzMzMzMzGUDNzMzMzMwaQM3MzMzMzBxAzczMzMzMGEBmZmZmZmYYQJqZmZmZmRlAzczMzMzMHECamZmZmZkdQJqZmZmZmR9AmpmZmZmZGUAzMzMzMzMZQGZmZmZmZhhAzczMzMzMHkAzMzMzMzMZQJqZmZmZmRlAAAAAAAAAGECamZmZmZkbQM3MzMzMzBpAmpmZmZmZG0AzMzMzMzMXQDMzMzMzMxtAzczMzMzMGkDNzMzMzMwaQDMzMzMzMxlAAAAAAAAAGkDNzMzMzMwYQJqZmZmZmRdA",
"dtype": "f8",
"shape": "150"
}
},
"yaxis": "y",
"type": "scatter"
}so the data is there but it's now quite difficult to get at.
For comparison, running dash 2.17.0, plotly 5.22.0 gives the required behaviour. Is this something that was changed in plotly v6? Is there now an easy way to access the data in a callback?