Watermark

Lightweight Charts™ has a built-in feature for displaying simple text watermarks on your chart. This example shows how to configure and add this simple text watermark to your chart. If you are looking to add a more complex watermark then have a look at the image watermark example included below.

Short answer

A simple text watermark can be configured and added by using the createTextWatermark function exported from the library as follows:

import { createTextWatermark } from 'lightweight-charts';

const firstPane = chart.panes()[0];
const textWatermark = createTextWatermark(firstPane, {
    horzAlign: 'center',
    vertAlign: 'center',
    lines: [
        {
            text: 'Watermark Example',
            color: 'rgba(171, 71, 188, 0.5)',
            fontSize: 24,
        },
    ],
});

The options available for the watermark are: TextWatermark Options.

You can see full working examples below.

Resources

• createTextWatermark function.
• TextWatermark Options

Examples

import UsageGuidePartial from "../_usage-guide-partial.mdx";

import CodeBlock from "@theme/CodeBlock";

Simple Watermark Example

import codeSimple from "!!raw-loader!./watermark-simple.js";

Image Watermark Example

If a simple text watermark doesn't meet your requirements then you can use the Image watermark via createImageWatermark function exported from the library as follows:

import { createImageWatermark } from 'lightweight-charts';

const firstPane = chart.panes()[0];
const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', {
    alpha: 0.5,
    padding: 20,
});

The options available for the watermark are: ImageWatermark Options.

You can see full working examples below.

Resources

• createImageWatermark pane primitive.
• ImageWatermark Options

:::tip

Since the watermark image is black content with a transparent background, it may not be visible when viewing the documentation site in dark mode.

:::

import codeAdvanced from "!!raw-loader!./watermark-advanced.js";