Downloading image from the dcc.Graph component

Hi all,
I have made an app that uses dropdown menus to select the features and then the user can choose which chart to plot using tabs components.
Below that is my dcc.Graph component which shows the chart and then I have a download button to download that image.

But I don’t understand the callback for saving that picture.

I have tried this, but this doesn’t work


# tab figures

@app.callback(Output('figure','figure'),[Input('store','data'),Input('d1','value'),Input('d2','value'),Input('tabs','active_tab')])

def graph(stored_data,a,b,at):
    df = pd.read_json(stored_data, orient='split')
    
    if at=='tab-1':
        
        return px.bar(data_frame=df,x=a,y=b)
    
    elif at=='tab-2':
        return px.scatter(data_frame=df,x=a,y=b)
    
    
    elif at=='tab-3':
        return px.line(data_frame=df,x=a,y=b)
    
    else:
        
        return px.histogram(data_frame=df,x=a,y=b)
    


#downloading img

@app.callback(Output('down','data'),[Input('Download_img','n_clicks'),Input('figure','value')])

def f(clicks,fig):
    if clicks is None:
        raise PreventUpdate
        
    else:
        return dcc.send_file(fig,type='png')
    
    



#>..............>........................>.................>...

The layout for button and dcc.download is same as given in the documentation of Downloading Images
Can someone help me out in this

Tabs:

Any updates on this are highly appreciated.

The last example here shows how it can be done,

1 Like