Dash Plot 'SelectData' with px.imshow

Dash Python
1

I am creating a heatmap using px.imshow and a matrix. I want to make it interactive where users can select multiple pixels of the heatmap. I found the plotly page on interactive graphing: Part 4. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly
but I can’t seem to get it to work with my plot. Here is some sample code replicating the problem. Anyone have any ideas how to get this to work? Thank you in advance!

from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import numpy as np
import json

app = Dash(__name__)


df_pivot = np.array(np.linspace(0, 100, 100)).reshape(10, 10)
fig = px.imshow(
    df_pivot,
    color_continuous_scale=px.colors.sequential.Agsunset,
)


app.layout = html.Div(
    children=[
        dbc.Row(
            [
                dcc.Graph(
                    id="plot",
                    figure=fig,
                ),
            ]
        ),
        html.Div(id="selected-data"),
    ]
)


@app.callback(
    Output("selected-data", "children"),
    Input("plot", "selectedData"),
)
def display_selected_data(selected_data):
    return json.dumps(selected_data, indent=2)


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

Hello @lspen,

imshow doesnt have selections, because you cannot select on the graph. However, you can access clickData, which through a clientside_callback and a dcc.Store you could build it if you really needed to compile your selections. :slight_smile:

3

HI @lspen,

you could use an annotation do define the pixel region. Pretty much like this example:

1 Like