Accessing state of traces in Plotly Dash

Question

I'm using Plotly Dash to build a stacked bar chart with 3 trace values.

I'm trying to access the state of the trace values so that I can filter a dataframe and pass the resulting DF back to the plot, as opposed to simply hiding the traces on de-select.

for example, I have a dataframe :

Item    Status    Value
1        First    2000
1        Second   3490
1        Third    542    
2        First    641    
2        Second    564        
3        First      10

My traces are 3 values (first, Second, Third) pertaining to a linear process where each value is a status marking the advancement of an item.

My intention is to be able to select statuses from further down the progression so only those items that have advanced to a certain step are plotted.

As I select more advanced statuses in the trace legend, my plotted x-values should drop off since fewer advance that far, even though they all share the majority of the statuses

The only solution I can think of is to make checkboxes for each trace value and use those inputs in a callback, but that seems redundant to the select/de-select traces functionality built in.

Answer 1

You looking for something like that?

Code:

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({'Item': [1, 1, 1, 2, 2, 3],
                   'Status': ["First", "Second", "Third",
                              "First", "Second", "First"],
                   'Value': [2000, 3490, 542, 641, 564, 10]})

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}
df1 = df.loc[df["Status"] == "First"]
df2 = df.loc[df["Status"] == "Second"]
df3 = df.loc[df["Status"] == "Third"]
trace1 = go.Bar(
                x=df1["Item"],
                y=df1["Value"],
                name='First',
)
trace2 = go.Bar(
                x=df2["Item"],
                y=df2["Value"],
                name='Second',
)
trace3 = go.Bar(
                x=df3["Item"],
                y=df3["Value"],
                name='Third',
)

app.layout = html.Div(children=[
        html.Div([
            html.H5('Your Plot'),
            dcc.Graph(
                id='cx1',
                figure=go.Figure(data=[trace1, trace2, trace3],
                                 layout=go.Layout(barmode='stack')))],)])


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

Output: