Skip to main content

Watermark

The watermark is the large text overlay on the chart canvas. By default it shows instrument information; you can replace it with any text you want

Watermark modes​

ChartReactConfig has a watermark.mode property:

ModeBehavior
instrument (default)Chart sets watermark automatically from the selected instrument: firstRow = symbol, secondRow = description, thirdRow = aggregation period. Manual setWaterMarkData calls are overwritten.
customChart does not auto-update watermark text. You control rows via chart.watermark.setWaterMarkData().
chartReactConfig: {
  watermark: { mode: 'custom' },
},

Make the watermark visible on first load if needed:

initialChartConfig: {
  components: { waterMark: { visible: true } },
},

Custom display name​

To show a display name different from the symbol used for data (common with symbol search UIs):

  1. Set watermark.mode: 'custom'.
  2. In onAPICreated → api.onChartCreated, call chart.watermark.setWaterMarkData() with up to three rows:
import { ChartReactAPI } from '@dx-private/dxchart5-react';

// Map trading symbol → friendly label from your symbol search
const displayNames: Record<string, string> = {
  'AAPL': 'Apple Inc.',
  'MSFT': 'Microsoft Corp.',
};

const applyWatermark = (chart: /* chart-core instance */, symbol: string) => {
  chart.watermark.setWaterMarkData({
    firstRow: displayNames[symbol] ?? symbol,
    secondRow: symbol, // optional — show raw symbol on second row
    thirdRow: '',      // optional — e.g. aggregation label
  });
};

const charts = new Map(); // chartId → chart-core instance

const onAPICreated = (api: ChartReactAPI) => {
  api.onChartCreated((chartId, chart) => {
    charts.set(chartId, chart);
  });

  // Fires on initial load and when the user changes instrument
  api.onInstrumentChanged((chartId, instrument) => {
    const chart = charts.get(chartId);
    if (chart) {
      applyWatermark(chart, instrument.symbol);
    }
  });
};

Multichart: onChartCreated receives chartId ('0', '1', …). Apply watermark per chart instance.

Watermark customization example​

With custom mode enabled, watermark data can be changed freely. The live example below updates the watermark when the chart type changes:

import React from 'react';
import { ChartReactAPI } from '@dx-private/dxchart5-react/dist/chart/view-models/api/chart-react-api.view-model';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers';
import BrowserOnly from '@docusaurus/BrowserOnly';
export const WaterMarkChartExample = () => {
    return <BrowserOnly>{() => <WaterMarkChartExampleBase />}</BrowserOnly>;
}