# Downloading image from the dcc.Graph component

**URL:** <https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715>\
**Category:** Dash Python\
**Created:** [May 31, 2023, 6:09pm UTC](https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715 "2023-05-31T18:09:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![varun007](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@varun007](https://community.plotly.com/u/varun007)\
**Post date:** [May 31, 2023, 6:09pm UTC](https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715/1 "2023-05-31T18:09:41Z")

</div>

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

```auto

# 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](https://dash.plotly.com/dash-core-components/download)  
Can someone help me out in this

 ![Download-img](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/8/58eb27aa44662ea494a3ef4b815edbcb952c6d1e.png)

---

<div class="post-metadata">

**Author:** ![varun007](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@varun007](https://community.plotly.com/u/varun007)\
**Post date:** [May 31, 2023, 6:11pm UTC](https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715/2 "2023-05-31T18:11:34Z")

</div>

Tabs:

 ![tabs](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/e/ce787a3e5b52835eb76e65be8f18393a0d5f7796.png)

---

<div class="post-metadata">

**Author:** ![varun007](https://avatars.discourse-cdn.com/v4/letter/v/87869e/32.png) [@varun007](https://community.plotly.com/u/varun007)\
**Post date:** [June 1, 2023, 10:30am UTC](https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715/3 "2023-06-01T10:30:06Z")

</div>

Any updates on this are highly appreciated.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [June 1, 2023, 10:41am UTC](https://community.plotly.com/t/downloading-image-from-the-dcc-graph-component/75715/4 "2023-06-01T10:41:54Z")

</div>

The last example here shows how it can be done,

> **[Download](https://www.dash-extensions.com/components/download)**