Branding and watermarks

The corner logo identifies the chart provider. The large background watermark identifies the instrument or displays your own text. They have separate settings: the OpenAlgo corner logo is on by default; the background watermark is off by default.

These options are available starting in 2.1.9.

el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;padding:8px;flex-shrink:0';
const wrap = document.createElement('div');
wrap.style.cssText = 'display:flex;justify-content:center;flex:1;min-height:0;overflow:hidden';
const stage = document.createElement('div');
stage.style.cssText = 'width:100%;max-width:100%;height:100%;min-height:0';
wrap.appendChild(stage);
el.append(controls, wrap);

const bars = Array.from({ length: 150 }, (_, index) => {
  const close = 23800 + Math.sin(index / 9) * 28;
  return { time: 1700000000 + index * 300, open: close - 3,
    high: close + 7, low: close - 6, close, volume: 650 + index * 65 };
});
const widget = lib.createWidget(stage, {
  symbol: 'NIFTY SIM', exchange: 'NSE', interval: '5m',
  intervals: ['5m', '15m', '1h'], persist: false,
  feed: { getBars: async () => bars, subscribeBars: () => () => {} },
  navigation: { defaultVisibleBars: 80 },
  rail: { tools: ['trend-line', 'horizontal-line', 'rectangle'] },
});
const listeners = new AbortController();
function button(label, action) {
  const node = document.createElement('button');
  node.type = 'button';
  node.textContent = label;
  node.style.cssText = 'min-height:44px;padding:5px 9px;border:1px solid var(--oac-card-border);border-radius:5px;background:var(--oac-card);color:inherit;font:12px system-ui;cursor:pointer';
  node.addEventListener('click', action, { signal: listeners.signal });
  controls.appendChild(node);
  return node;
}
button('Toggle watermark', () => {
  widget.chart.setWatermarkOptions({ visible: !widget.chart.watermarkOptions().visible });
});
button('Automatic or custom text', () => {
  widget.chart.setWatermarkOptions({ text: widget.chart.watermarkOptions().text ? '' : 'Research' });
});
let brand = true;
const logo = button('Logo: on', () => {
  brand = !brand;
  widget.chart.setBranding(brand);
  logo.textContent = 'Logo: ' + (brand ? 'on' : 'off');
  logo.setAttribute('aria-pressed', String(brand));
});
logo.setAttribute('aria-pressed', 'true');
let narrow = false;
const width = button('Width: desktop', () => {
  narrow = !narrow;
  stage.style.width = narrow ? '360px' : '100%';
  width.textContent = narrow ? 'Width: phone' : 'Width: desktop';
  width.setAttribute('aria-pressed', String(narrow));
});
width.setAttribute('aria-pressed', 'false');
button('Switch theme', () => widget.setTheme(widget.theme() === 'dark' ? 'light' : 'dark'));
button('Chart settings', () => widget.openSettings());
return { destroy() { listeners.abort(); widget.destroy(); } };

Corner logo

Every createChart displays the OpenAlgo glyph at the bottom-left of the visible plot. createWidget inherits the same behavior. The glyph uses bundled vector artwork, so it needs no image download and stays sharp in PNG and SVG exports. Its size adapts to narrow charts and its color follows the chart background. Adding or maximizing indicator panes keeps the logo at the visible bottom of the chart.

A completed click or tap opens the logo link. Dragging from the mark does not open it. The host can provide an accessible link alongside the chart for keyboard and screen-reader users. The packaged widget and reference host include that access.

import { createChart } from 'openalgo-charts'
 
const chart = createChart(container)
 
// Hosts can replace or hide the chart-owned mark.
chart.setBranding({
  src: '/broker-logo.svg',
  label: 'Broker chart',
  href: 'https://example.com/charts',
})
chart.setBranding(false)
chart.setBranding(true)

The equivalent constructor option is branding: false or branding: { ... }. chart.brandingOptions() returns the current options or false. Host branding is not saved in user chart layouts, so a restored layout cannot replace the broker’s logo or link. The synchronous branding:changed event carries a BrandingChangedEvent snapshot. Custom host links should subscribe to it and unsubscribe during teardown so their accessible destination follows live branding changes.

If your host previously added its own LogoWatermark, either remove that manual default mark or set branding: false to retain your existing implementation. Manually attached LogoWatermark primitives keep their existing host-managed click behavior.

Optional background watermark

const chart = createChart(container, { watermark: false })
chart.setDataContext({ symbol: 'NIFTY', exchange: 'NSE', interval: '5m' })
 
// Enable automatic symbol and interval text.
chart.setWatermarkOptions({ visible: true })
 
// Custom text replaces automatic text. An empty string restores automatic text.
chart.setWatermarkOptions({ text: 'Research', opacity: 0.08, fontSize: 64 })
chart.setWatermarkOptions({ text: '' })
 
// Hiding preserves the configured text and style.
chart.setWatermarkOptions({ visible: false })

ChartWatermarkOptions accepts visible, text, fontSize, opacity, color and the existing TextWatermarkOptions. watermark: true enables automatic text. Without a symbol, interval or custom text there is nothing to display. Widget hosts already update the data context when the symbol or interval changes; bare-chart hosts should call setDataContext as they change instruments.

The text draws behind the series, stays inside the plot and does not intercept taps, drawing placement or chart navigation. It is included in chart exports. The separate Replay mark still describes replay mode independently of this preference.

Settings and persistence

Open Chart settings > Appearance to configure the watermark. The same schema powers the packaged widget, reference demo and OpenAlgo /trading, with these flat keys:

import { applyChartSettings, readChartSettings } from 'openalgo-charts'
 
applyChartSettings(chart, { 'watermark.visible': true })
const values = readChartSettings(chart)
const saved = chart.getState()

The setting is opt-in on new charts and old layouts. Chart state saves watermark preferences; it does not save a symbol taken from the previous dataset as custom text. Restoring a layout and changing instruments therefore keeps automatic text current.

For additional independent text or image overlays, use the lower-level TextWatermark and LogoWatermark primitives.