# Watermarks

## Overview

Watermarks provide a visual text overlay on the chart.
Users can manage the visibility and color of watermarks in the *Settings → Canvas → Watermark*.
A default watermark contains a symbol ticker, interval, and description.

TradingView recommends letting users enable the watermark themselves.
This ensures their preferences are always respected.
However, you can also programmatically manage watermarks in two ways:

- Using the [Watermark API](#watermark-api-recommended) for dynamic changes.
- Using the [settings adapter](#settings-adapter) to set the initial state.

## Watermark API (recommended)

The [Watermark API] allows you to either customize the default watermark or implement a custom one.

To access the API, use the [`watermark`] method of the `IChartingLibraryWidget` interface.

```js
// Get an instance of IWatermarkApi
widget.onChartReady(() => {
    const watermarkApi = widget.watermark();
});
```

### Color and visibility

To manage the watermark color, use the [`color`] method.

```js
watermarkApi.color().setValue("rgba(0, 150, 0, 0.5)");
```

To control the visibility of the ticker, description, and interval of the watermark,
use the [`tickerVisibility`], [`descriptionVisibility`], and [`intervalVisibility`] methods.

```js
watermarkApi.descriptionVisibility().setValue(false);
```

### Custom content

To replace the default watermark with your own custom content, use the [`setContentProvider`] method.
The provider function receives a `WatermarkContentData` object and should return an array of `WatermarkLine` objects.
Each `WatermarkLine` defines a line of text with the following properties:

- Text to be displayed
- Font size
- Line height
- Vertical offset distance

See the Pen 
  Add custom watermark by TradingView (@tradingview)
  on CodePen.

## Settings adapter

If you only need to control the initial visibility and color of the default watermark, you can use the [settings adapter] in your [Widget Constructor].
This method doesn't support custom text.
It only applies to the default built-in watermark.

To make the watermark visible, set the `symbolWatermark` property within the `initialSettings` of your [`settings_adapter`].
Note that defining `setValue` and `removeValue` functions is required.

```js
new TradingView.widget({
    /* Other Widget Constructor properties */

    settings_adapter: {
        initialSettings: {
            "symbolWatermark": '{ "visibility": "true", "color": "rgba(244, 67, 54, 0.25)" }',
        },
        setValue: function (key, value) {
            console.log(`set value: ${key} ${value}`);
        },
        removeValue: function (key) {
            console.log(`remove value: ${key}`);
        },
    }
})
```

[`color`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi#color
[`descriptionVisibility`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi#descriptionvisibility
[`intervalVisibility`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi#intervalvisibility
[`setContentProvider`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi#setcontentprovider
[`settings_adapter`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#settings_adapter
[settings adapter]: https://charting-library-docs.xstaging.tv/latest/saving_loading/user-settings.md#settings-adapter
[`tickerVisibility`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi#tickervisibility
[`watermark`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#watermark
[Watermark API]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IWatermarkApi
[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)