title: How to update plotly/dash figure from editable table?
body: <p>I have a dash DataTable object with deleteable rows and columns. I would like to update a figure based on the visible rows. I am not sure how to create the callback and what arguments to pass. The data stored in the table object might actually not change when deleting the rows in the browser.</p>
  
  <pre><code>from dash_table import DataTable
  
  def lineplot(id, df, cols, title=None, xlabel=None, ylabel=None, x=None, 
               xaxis_type=None, yaxis_type=None, plotly_config=plotly_config,
              ):
  
      if x is None:
          x_values = df.index
          xlabel = df.index.name
      else:
          x_values = df[x]
  
      data = [{
          'x': x_values,
          'y': df[col],
          'name': col }  for col in cols]
  
      layout = go.Layout(
          title=go.layout.Title(
              text=title,
              xref='paper',
              xanchor='center'
          ),
          xaxis = go.layout.XAxis(
              title=go.layout.xaxis.Title(
                  text=xlabel,
                  font=plotly_config['font'],
  
              ),
              type=xaxis_type
          ),
          yaxis=go.layout.YAxis(
              title=go.layout.yaxis.Title(
                  text=ylabel,
                  font=plotly_config['font'],
              ),
          type=yaxis_type
          ),
          showlegend=True
      )
  
  
      return dcc.Graph(
          id=id,
          figure={'data': data,
                  'layout': layout},
          style={"max-width": "600px", 
                 "margin": "auto", 
                 "display": "inline-block"})
  
  def table(id, df):
      dt = DataTable(
          id=id,
          data=df.to_dict('records'),
          columns=[{"name": i, 
                    "id": i, 
                    "deletable": True, 
                    "searchable": True} for i in df.columns], 
          sorting=True, 
          style_cell={
              'minWidth': '0px', 
              'maxWidth': '180px',
              'whiteSpace': 'no-wrap',
              'overflow': 'hidden',
              'textOverflow': 'ellipsis'},
          style_table={'overflowX': 'scroll'},
          row_deletable=True,
          pagination_mode="fe",
          pagination_settings={
                  "displayed_pages": 1,
                  "current_page": 0,
                  "page_size": 15},
          navigation="page"
          )
      return dt
  
  app = dash.Dash(__name__)
  app.layout = html.Div(children=[
      table(id='table', df=pd.DataFrame(...)),
      lineplot(id='plot',...)
  ])
  
  @app.callback(Output('plot', 'data'),
                [Input('table', 'data')])
  def update_graph(data):
      return pd.DataFrame(data)
  
  if __name__ == '__main__':
      app.run_server(port=8888, debug=True)
  </code></pre>