Dash datatable – bar plot when choosing/clicking one value of the table

I’m new using Dash and I wonder if it is possible to have a Dash table with 1 column of numeric values like this one:

Values
-------
1
2
3
4

And have the option to choose/click to one of the values and make a bar plot appear with the value clicked.

Hope you can help me. Thanks in advance.

Answer

You could use the active_cell property of dash_table.DataTable to get the clicked value in a callback. Then you can use this value to plot the graph:

import pandas as pd
from dash import Dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash_table import DataTable
import plotly.graph_objects as go

df = pd.DataFrame(
    {"values": [1, 2, 3, 4], "labels": ["value 1", "value 2", "value 3", "value 4"]}
)

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Graph(id="graph"),
        DataTable(
            id="table",
            columns=[{"name": "values", "id": "values"}],
            data=df.to_dict("records"),
        ),
    ]
)


@app.callback(
    Output("graph", "figure"), Input("table", "active_cell"), prevent_initial_call=True
)
def update_output_div(active_cell):
    selected_value = df.iloc[active_cell["row"], active_cell["column"]]
    num_values = len(df["values"])

    fig = go.Figure(go.Bar(x=[selected_value], y=[selected_value]))
    fig.update_layout(yaxis_range=[0, num_values])

    fig.update_layout(
        yaxis=dict(
            tickmode="array",
            tickvals=df["values"],
            ticktext=df["labels"],
        ),
    )
    fig.update_layout(
        xaxis=dict(
            tickmode="array",
            tickvals=[selected_value],
            ticktext=[selected_value],
        )
    )

    return fig


if __name__ == "__main__":
    app.run_server()