Skip to main content

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:

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.

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

Color and visibility​

To manage the watermark color, use the color method.

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.

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

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.

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}`);
        },
    }
})