Conditional updating of graphs in dash

Question

I have a basic dash app with two graphs which I would like to update based on the condition of a radio item selection. I want to choose which graph to update using the radio item:

html.Div([
    dcc.RadioItems(
        id='graph-selector',
        options=[{'label': i, 'value': i} for i in [1, 2]],
        value=1
     ),
])
dcc.Graph(id='graph1',
    clickData={'points': [{'x': fixed_df['Abs time'].values[0]}]}
),
dcc.Graph(id='graph2',
    clickData={'points': [{'x': fixed_df['Abs time'].values[0]}]}
)

I haven't been able to figure out how to use @app.callback to choose which graph to update based on the radio item condition:

@app.callback(
Output('graph???', 'figure'),
Input('graph-selector', 'value))

def update_graph(graph):
  etc....
  return figure

My first idea was to use classes, and call an instance function with the callback, but apparently this is impossible with dash? Callbacks seem to want raw functions.

@app.callback(
Output('graph', 'figure'),
Input('graph-selector', 'value))

graph1.update_graph(graph=1)

SyntaxError: invalid syntax

My second idea was to tell the callback to output to both graphs, but I don't know how to exclude one from updating.

@app.callback(
    Output('graph1', 'figure'),
    Output('graph2', 'figure'))
    Input('graph-selector', 'value'))
def update_graph(graph):
   # Updates both?
  return figure

I've also tried making a nested callback where the first is a function which initiates a callback based on radio item condition, but this didn't work.

@app.callback(
Input('graph-selector', 'value'))

def select_graph(selector):
    if selector==1:
    @app.callback(
    Output('graph1', 'figure'),
    Input('updater', 'value'))
    def update_graph(update):
        return figure
   if selector==2:
   @app.callback(
   Output('graph2', 'figure'),
   Input('updater', 'value'))
   def update_graph(update):
       return figure

I've resorted to not using the radio item at all and using two different callback systems with identical update functions. This is not an ideal solution.

@app.callback(
    Output('graph1', 'figure')
    Input('updater1', 'value'))
def update_graph(update):
  return figure

@app.callback(
    Output('graph2', 'figure')
    Input('updater2', 'value'))
def update_graph(update):
  return figure

Is there a better way to do this?

Answer 1

This is closest to what I would suggest in this case:

@app.callback(
    [
      Output('graph1', 'figure'),
      Output('graph2', 'figure'),
    ],
    Input('graph-selector', 'value'))
def update_graph(graph):
  return figure, dash.no_update

You can update just one using the no_update trick. Figure out which one should be updated, and then use that for the other one.