# Snapshots

## Overview

The library allows users to take chart snapshots via buttons located on the top toolbar.
By default, the menu contains two options: *Download image* and *Copy image*.
You can [extend this menu](#enable-additional-menu-options) to also include the *Copy link*, *Open in new tab*, and *Tweet image* options.

### Snapshot storage

Snapshots taken through *Copy link*, *Open in new tab*, and *Tweet image* options are stored **on your servers**.
The server URL used on the [TradingView demo website] only works on TradingView domains.
For details on how to set up your own server, see our guide to [implementing a snapshot server][snapshot-server-guide].

## Enable additional menu options

You can extend the default snapshots menu with the *Copy link*, *Open in new tab*, and *Tweet image* options.
To enable them, follow the steps below.

1. Implement your own server for storing snapshots. For more information, refer to the [Implement snapshots server][snapshot-server-guide] guide.
    - Your server should have an endpoint that accepts `POST` requests and returns saved image URLs to the library.
    - The data storage period is not limited in time. You have to implement a policy on your end.
2. Specify the [`snapshot_url`] property in your [Widget Constructor].

    ```javascript
    const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com");
    new TradingView.widget({
        container: "chartContainer",
        locale: "en",
        library_path: "charting_library/",
        datafeed: datafeed,
        symbol: "AAPL",
        interval: "1D",
        // highlight-next-line
        snapshot_url: "https://myserver.com/snapshot",
    })
    ```

Note that you cannot add custom options to this menu.
Only the five predefined ones are available.
However, you can [remove any of these options](#remove-button-options) if you don’t need them.

## Remove button options

Depending on what you are interested in showing to your end users, you may want to hide some options.
To do this, use custom CSS defined within the [`custom_css_url`] property of the [Widget Constructor].
The example below shows how to remove the *Tweet image* option from the menu.

```js
// highlight-start
// Custom CSS properties
var customCSS = `div[data-name="open-image-in-new-tab"],div[data-name="tweet-chart-image"],div[data-name="copy-link-to-the-chart-image"] { display: none; } `;

function initOnReady() {
    const cssBlob = new Blob([customCSS], {
    type: "text/css",
  });
  const cssBlobUrl = URL.createObjectURL(cssBlob);
  // highlight-end

  const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com");
  new TradingView.widget({
    container: "chartContainer",
    locale: "en",
    library_path: "charting_library/",
    datafeed: datafeed,
    symbol: "AAPL",
    interval: "1D",
    snapshot_url: "https://myserver.com/snapshot",

    // highlight-start
    custom_css_url: cssBlobUrl,
    // highlight-end
  })
}
```

## Hide button

Disable the [`header_screenshot`] featureset to hide the snapshot button.

```javascript
const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com");
new TradingView.widget({
    container: "chartContainer",
    locale: "en",
    library_path: "charting_library/",
    datafeed: datafeed,
    symbol: "AAPL",
    interval: "1D",
    snapshot_url: "https://myserver.com/snapshot",
    // highlight-next-line
    disabled_features: ["header_screenshot"],
})
```

## Display trading lines

If you want snapshots to include orders, positions, and executions, enable the [`snapshot_trading_drawings`] featureset.

```javascript
const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com");
new TradingView.widget({
    container: "chartContainer",
    locale: "en",
    library_path: "charting_library/",
    datafeed: datafeed,
    symbol: "AAPL",
    interval: "1D",
    snapshot_url: "https://myserver.com/snapshot",
    // highlight-next-line
    enabled_features: ["snapshot_trading_drawings"],
})
```

## Implement your logic

If you want to implement your logic for taking snapshots, use the [`takeClientScreenshot`] method.
This method creates a snapshot of the chart and returns it as a canvas.
You can then take the canvas element and create an image from it.
The code sample below saves a snapshot as a PNG.

```js
async function saveChartToPNG() {
  const screenshotCanvas = await widget.takeClientScreenshot();
  const linkElement = document.createElement('a');
  linkElement.download = 'screenshot';
  linkElement.href = screenshotCanvas.toDataURL(); // Alternatively, use `toBlob` which is a better API
  linkElement.dataset.downloadurl = ['image/png', linkElement.download, linkElement.href].join(':');
  document.body.appendChild(linkElement);
  linkElement.click();
  document.body.removeChild(linkElement);
}
saveChartToPNG(); // Call the screenshot function
```

Additionally, you can configure snapshot parameters listed in [`ClientSnapshotOptions`](../api/interfaces/Charting_Library.ClientSnapshotOptions.md). To do this, specify the desired parameters and pass them to [`takeClientScreenshot`].
For example, you can hide indicators from the legend with `hideStudiesFromLegend`:

```javascript
const screenshotCanvas = await widget.takeClientScreenshot({ hideStudiesFromLegend: true });
```

[`custom_css_url`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#custom_css_url
[`header_screenshot`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#header_screenshot
[snapshot-server-guide]: https://charting-library-docs.xstaging.tv/latest/tutorials/how-to-guides/implement-snapshots-server.md
[`takeClientScreenshot`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#takeclientscreenshot
[TradingView demo website]: https://charting-library.tradingview-widget.com/
[`snapshot_trading_drawings`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#snapshot_trading_drawings
[`snapshot_url`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#snapshot_url
[Widget Constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md

---

## Sitemap

- [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt)
- [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)