Accessing figure as a State variable changes data attribute #3258
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?