Live examples

const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 160, 3600);
chart.addSeries('candlestick').setData(bars);
chart.fitContent();
return chart;

const chart = lib.createChart(el, {
navigation: { defaultBarSpacing: 8, mousePan: 'horizontal' },
});
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 300, 3600));
return chart;

const chart = lib.createChart(el, {
priceOnlyAutoScale: true,
legendOffset: { top: 42, left: 8 },
});
const bars = lib.generateBars(1700000000, 160, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('sma', { length: 20 });
chart.addSeries('line', { style: { color: '#f5a623', lineWidth: 1 } })
.setData(bars.map(bar => ({ time: bar.time, value: bar.close * 3 })));
chart.fitContent();
const button = document.createElement('button');
button.type = 'button';
button.textContent = 'Fit primary prices: on';
button.setAttribute('aria-pressed', 'true');
Object.assign(button.style, {
position: 'absolute', top: '8px', left: '8px', zIndex: '2',
padding: '4px 8px', border: '1px solid #777', borderRadius: '4px',
background: 'Canvas', color: 'CanvasText', fontSize: '12px', cursor: 'pointer',
});
button.addEventListener('pointerdown', event => event.stopPropagation());
button.addEventListener('click', () => {
const on = !chart.priceOnlyAutoScale();
chart.setPriceOnlyAutoScale(on);
button.textContent = 'Fit primary prices: ' + (on ? 'on' : 'off');
button.setAttribute('aria-pressed', String(on));
});
el.appendChild(button);
return chart;

el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 64px 8px 8px';
el.appendChild(controls);
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:0;width:100%';
el.appendChild(host);
const chart = lib.createChart(host, { movablePrimaryPane: true });
const bars = lib.generateBars(1700000000, 220, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('ema', { length: 21 });
chart.addIndicator('rsi');
chart.addIndicator('macd');
chart.addPriceLine({ price: bars[bars.length - 1].close, color: '#4f8cff', lineWidth: 1, id: 'level', leftLabel: 'Level' });
chart.timeScale.fitContent(bars.length);
const slot = document.createElement('span');
slot.style.cssText = 'color:light-dark(#686868,#94a3b8);font:12px system-ui, sans-serif;margin-left:6px';
const show = () => { slot.textContent = 'Price pane: slot ' + chart.primaryPaneIndex() + ' of ' + chart.panes().length; };
for (const [label, run] of [
['Price on top', () => chart.setPrimaryPaneIndex(0)],
['Up', () => chart.movePane(chart.primaryPaneIndex(), -1)],
['Down', () => chart.movePane(chart.primaryPaneIndex(), 1)],
['Price at the bottom', () => chart.setPrimaryPaneIndex(chart.panes().length - 1)],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onpointerdown = (event) => event.stopPropagation();
button.onclick = () => { run(); show(); };
controls.appendChild(button);
}
controls.appendChild(slot);
chart.setPrimaryPaneIndex(chart.panes().length - 1);
show();
return chart;

const bar = document.createElement('div');
bar.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:12px';
el.appendChild(bar);
const host = document.createElement('div');
host.style.cssText = 'height:330px';
el.appendChild(host);

lib.registerIndicator({
id: 'example-anchored-growth', name: 'Anchored growth', placement: 'onchart',
inputs: [
  { key: 'from', type: 'timestamp', label: 'Anchor time', default: 0, pick: true },
  { key: 'price', type: 'price', label: 'Anchor price', default: 0, pick: true, timeKey: 'from', anchor: true },
  { key: 'rate', type: 'number', label: 'Growth per bar (%)', default: 0.15 },
],
plots: [{ key: 'path', title: 'Growth path', type: 'line', style: { color: '#f59e0b', lineWidth: 2 } }],
calc(bars, s) {
  const start = bars.findIndex(b => b.time >= s.from);
  return { path: bars.map((_, i) => (start < 0 || i < start ? null : s.price * (1 + s.rate / 100) ** (i - start))) };
},
});

const chart = lib.createChart(host);
const bars = lib.generateBars(1700000000, 160, 3600);
chart.addSeries('candlestick').setData(bars);
chart.setVisibleLogicalRange({ from: 40, to: 165 });
// The drawing controller draws the anchor and holds its undo steps.
const draw = new lib.DrawingController(chart);
const study = chart.addIndicator('example-anchored-growth', { from: bars[90].time, price: bars[90].close });

const readout = document.createElement('span');
const show = () => {
const s = study.settings();
readout.textContent = 'Anchor: ' + new Date(s.from * 1000).toISOString().slice(0, 16).replace('T', ' ')
  + ' UTC at ' + s.price.toFixed(2);
};
const button = (label, run) => {
const b = document.createElement('button');
b.type = 'button';
b.textContent = label;
b.style.cssText = 'padding:4px 10px;border-radius:6px;border:1px solid light-dark(#e4e4e4,#2a3046);background:light-dark(#fff,#1c2030);color:light-dark(#151515,#c7ccd8);cursor:pointer';
b.onclick = run;
bar.appendChild(b);
};
// One click answers with the bar time and the price together, and moving the
// anchor through the drawing controller makes the pick an undo step like a drag.
button('Pick point', () => chart.beginPick('point', p => draw.moveInputAnchor(study.id, 'price', p)));
button('Undo', () => draw.undo());
button('Redo', () => draw.redo());
bar.appendChild(readout);
chart.on('objects:change', show);
show();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px 64px 8px 8px';
controls.addEventListener('pointerdown', event => event.stopPropagation());
el.appendChild(controls);
const status = document.createElement('div');
status.style.cssText = 'padding:0 8px 8px;font:12px sans-serif';
status.setAttribute('role', 'status');
el.appendChild(status);
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:0;width:100%;align-self:center';
el.appendChild(host);
const chart = lib.createChart(host, { priceAxisWidth: 64 });
const palette = chart.theme();
status.style.color = palette.axisText;
// Three simulated instruments an order of magnitude apart in price.
const closes = (price, seed) => stockBars(1700000000, 96, 60, price, seed)
.map(bar => ({ time: bar.time, value: bar.close }));
chart.addSeries('line', {
priceScaleId: 'right', style: { color: '#4385ef', lineWidth: 2 },
priceFormat: { type: 'price', precision: 1 },
}).setData(closes(100, 3));
chart.addSeries('line', {
priceScaleId: 'overlay:large', style: { color: '#26a69a', lineWidth: 2 },
priceFormat: { type: 'price', precision: 0 },
}).setData(closes(1200, 5));
chart.addSeries('line', {
priceScaleId: 'overlay:small', style: { color: '#d99126', lineWidth: 2 },
priceFormat: { type: 'price', precision: 2 },
}).setData(closes(5, 9));
chart.setPriceAxisPlacement(0, 'overlay:large', 'right');
chart.setPriceAxisPlacement(0, 'overlay:small', 'left');
chart.fitContent();
const names = { right: 'Blue', 'overlay:large': 'Green', 'overlay:small': 'Amber' };
let compact = false;
const buttons = new Map();
function render() {
const slots = chart.priceAxisLayout();
const selected = chart.priceAxisPlacement(0, 'overlay:large');
const side = slots.filter(slot => slot.side === selected.side);
const rank = side.findIndex(slot => slot.scaleId === 'overlay:large');
for (const [label, button] of buttons) {
  button.disabled = label === 'Green inward' ? rank === 0
    : label === 'Green outward' ? rank === side.length - 1 : false;
  button.style.opacity = button.disabled ? '0.45' : '1';
  button.style.cursor = button.disabled ? 'default' : 'pointer';
  if (label === 'Compact width') {
    button.textContent = compact ? 'Full width' : 'Compact width';
    button.setAttribute('aria-pressed', String(compact));
  }
}
status.textContent = ['left', 'right'].map(side => {
  const labels = slots.filter(slot => slot.side === side).map(slot => names[slot.scaleId]);
  return side + ' from plot: ' + labels.join(', ');
}).join(' | ');
}
for (const [label, action] of [
['Switch green side', () => {
  const { side } = chart.priceAxisPlacement(0, 'overlay:large');
  chart.setPriceAxisPlacement(0, 'overlay:large', side === 'right' ? 'left' : 'right');
}],
['Green inward', () => {
  const { side } = chart.priceAxisPlacement(0, 'overlay:large');
  chart.setPriceAxisPlacement(0, 'overlay:large', side, 0);
}],
['Green outward', () => {
  const { side } = chart.priceAxisPlacement(0, 'overlay:large');
  chart.setPriceAxisPlacement(0, 'overlay:large', side,
    chart.priceAxisLayout().filter(slot => slot.side === side).length - 1);
}],
['Compact width', () => {
  compact = !compact;
  host.style.width = compact ? 'min(100%, 420px)' : '100%';
  chart.applySize(host.clientWidth, host.clientHeight);
}],
]) {
const button = document.createElement('button');
button.type = 'button';
button.textContent = label;
button.style.cssText = 'padding:5px 9px;border:1px solid ' + palette.axisLine
  + ';border-radius:4px;background:' + palette.background + ';color:' + palette.axisText + ';font:12px sans-serif';
button.onclick = () => { action(); render(); };
buttons.set(label, button);
controls.appendChild(button);
}
render();
return chart;

const bar = document.createElement('div');
bar.style.cssText = 'display:flex;gap:6px;margin-bottom:8px';
el.appendChild(bar);
const host = document.createElement('div');
host.style.cssText = 'height:320px';
el.appendChild(host);

const chart = lib.createChart(host);
const bars = lib.generateBars(1700000000, 200, 3600);
chart.addSeries('candlestick').setData(bars);
chart.setVisibleLogicalRange({ from: 80, to: 200 });

const draw = new lib.DrawingController(chart);
// Pinned: fractions of the pane's plot, not a time and a price.
draw.add({ tool: 'text', paneIndex: 0, style: {}, points: [], space: 'viewport',
viewportPoints: [{ x: 0.02, y: 0.04 }],
text: { value: 'Plan: fade the open\nStop above the high', color: '#f5c542', fontSize: 13,
  background: true, backgroundColor: '#1c2030', backgroundOpacity: 0.9 } });
draw.add({ tool: 'rectangle', paneIndex: 0, points: [], space: 'viewport',
viewportPoints: [{ x: 0.62, y: 0.1 }, { x: 0.9, y: 0.32 }],
style: { color: '#f5a623', lineWidth: 2 }, text: { value: 'Watch zone', color: '#f5a623' } });
// On time and price, for comparison: a box around the bars it covers.
const span = bars.slice(130, 161);
draw.add({ tool: 'rectangle', paneIndex: 0, style: { color: '#4f8cff', lineWidth: 2 }, points: [
{ time: bars[130].time, price: Math.max(...span.map(b => b.high)) },
{ time: bars[160].time, price: Math.min(...span.map(b => b.low)) },
] });

const button = (label, space) => {
const b = document.createElement('button');
b.textContent = label;
b.style.cssText = 'padding:4px 10px;border-radius:6px;border:1px solid light-dark(#e4e4e4,#2a3046);background:light-dark(#fff,#1c2030);color:light-dark(#151515,#c7ccd8);cursor:pointer';
// One conversion for the whole selection; it keeps each drawing where it is on screen.
b.onclick = () => draw.updateMany(draw.selection().map(id => ({ id, patch: { space } })));
bar.appendChild(b);
};
button('Pin selected', 'viewport');
button('Unpin selected', 'data');
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const bar = document.createElement('div');
bar.style.cssText = 'display:flex;gap:6px;margin-bottom:8px';
el.appendChild(bar);
const host = document.createElement('div');
host.style.cssText = 'height:340px';
el.appendChild(host);

const chart = lib.createChart(host);
const series = chart.addSeries('candlestick');
const draw = new lib.DrawingController(chart);
// One drawing document per symbol, swapped as the data context names another.
new lib.InstrumentDrawings(chart, draw);
const markets = {
INFY: stockBars(1700000000, 160, 86400, 1500, 7),
TCS: stockBars(1700000000, 160, 86400, 3500, 11),
};
const show = symbol => {
series.setData([]);   // the old bars go before the context names the new symbol
chart.setDataContext({ symbol, exchange: 'NSE', interval: '1d' });
series.setData(markets[symbol]);
chart.resetScale();
};
show('INFY');
const b = markets.INFY;
draw.add({ tool: 'trend-line', paneIndex: 0, style: { color: '#f5a623', lineWidth: 2 },
points: [{ time: b[40].time, price: b[40].low }, { time: b[120].time, price: b[120].high }] });

const button = (label, onclick) => {
const btn = document.createElement('button');
btn.textContent = label;
btn.style.cssText = 'padding:4px 10px;border-radius:6px;border:1px solid #2a3046;background:#1c2030;color:#c7ccd8;cursor:pointer';
btn.onclick = onclick;
bar.appendChild(btn);
};
button('INFY', () => show('INFY'));
button('TCS', () => show('TCS'));
button('Trend line', () => draw.setTool('trend-line'));
button('Delete all', () => draw.clear());
return chart;

const bar = document.createElement('div');
bar.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px';
el.appendChild(bar);
const order = document.createElement('div');
order.style.cssText = 'color:light-dark(#686868,#94a3b8);font:12px system-ui, sans-serif;margin-bottom:6px';
el.appendChild(order);
const host = document.createElement('div');
host.style.cssText = 'height:300px';
el.appendChild(host);

const chart = lib.createChart(host);
const bars = lib.generateBars(1700000000, 200, 3600);
chart.addSeries('candlestick').setData(bars);
chart.setVisibleLogicalRange({ from: 110, to: 200 });
const ema = chart.addIndicator('ema', { length: 9, color: '#f5c542' });
const draw = new lib.DrawingController(chart);
const span = bars.slice(140, 181);
const box = draw.add({ tool: 'rectangle', paneIndex: 0,
style: { color: '#4f8cff', fill: true, fillOpacity: 0.85, lineWidth: 2 }, points: [
  { time: bars[140].time, price: Math.max(...span.map(b => b.high)) },
  { time: bars[180].time, price: Math.min(...span.map(b => b.low)) },
] });
// One list for the whole pane: the same inventory an Objects panel reads.
const objects = new lib.ChartObjects(chart, { drawings: draw });
const label = row => row.band === 'above' ? row.name + ' (in front)'
: row.band === 'below' ? row.name + ' (behind the series)' : row.name;
const show = () => { order.textContent = 'Back to front: ' + objects.stack(0).map(label).join(', '); };
objects.subscribe(show);

const moves = [
['Box in front', () => draw.bringAboveSeries(box.id)],
['Box over the average', () => draw.placeInStack(box.id, { entry: 'indicator:' + ema.id }, 'above')],
['Box over the candles', () => draw.placeInStack(box.id, { entry: 'source:primary' }, 'above')],
['Box behind the series', () => draw.sendBehindSeries(box.id)],
['Candles over the average', () => chart.moveInSeriesStack('source:primary', 'indicator:' + ema.id, 'above')],
['Candles under the average', () => chart.moveInSeriesStack('source:primary', 'indicator:' + ema.id, 'below')],
];
for (const [label, run] of moves) {
const b = document.createElement('button');
b.textContent = label;
b.style.cssText = 'padding:4px 10px;border-radius:6px;border:1px solid light-dark(#e4e4e4,#2a3046);background:light-dark(#fff,#1c2030);color:light-dark(#151515,#c7ccd8);cursor:pointer';
b.onpointerdown = (event) => event.stopPropagation();
b.onclick = run;
bar.appendChild(b);
}
return { destroy() { objects.destroy(); draw.destroy(); chart.destroy(); } };

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const instruments = [
{ symbol: 'NOVA', exchange: 'DEMO', name: 'Nova Industries', assetClass: 'Stock' },
{ symbol: 'NOVA FUT', exchange: 'DEMO', name: 'Nova futures', assetClass: 'Futures',
  contractGroup: { label: 'Contracts', contracts: [
    { symbol: 'NOVA26SEP', exchange: 'DEMO', name: 'September 2026' },
    { symbol: 'NOVA26OCT', exchange: 'DEMO', name: 'October 2026' },
  ] } },
{ symbol: 'BTCUSD', exchange: 'DEMO', name: 'Bitcoin', assetClass: 'Crypto' },
];
const widget = lib.createWidget(el, {
symbol: 'NOVA', exchange: 'DEMO', interval: '5m', persist: false,
intervals: ['5m', '15m', '1h', '1d'],
symbolSearch: query => instruments.filter(hit =>
  (hit.symbol + ' ' + hit.name).toLowerCase().includes(query.toLowerCase())),
feed: {
  getBars: async request => {
    const seconds = { '5m': 300, '15m': 900, '1h': 3600, '1d': 86400 }[request.interval] || 300;
    const seed = Array.from(request.symbol).reduce((n, c) => n + c.charCodeAt(0), 23);
    return stockBars(1700000000, 180, seconds, request.symbol === 'BTCUSD' ? 64000 : 100, seed);
  },
  subscribeBars: () => () => {},
},
});
widget.chart.addIndicator('ema', { length: 20 });
return widget;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px';
el.appendChild(controls);
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:0;width:100%;position:relative';
el.appendChild(host);
const widget = lib.createWidget(host, {
symbol: 'NOVA', exchange: 'DEMO', interval: '1h', persist: false, mobile: 'never',
feed: { getBars: async () => stockBars(1700000000, 200, 3600, 100, 41), subscribeBars: () => () => {} },
});
const note = document.createElement('span');
note.style.cssText = 'color:light-dark(#686868,#94a3b8);font:12px system-ui, sans-serif;margin-left:6px';
const button = (label, run) => {
const b = document.createElement('button');
b.textContent = label;
b.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
b.onpointerdown = (event) => event.stopPropagation();
b.onclick = run;
controls.appendChild(b);
return b;
};
button('Add RSI', () => widget.chart.addIndicator('rsi'));
button('Fold the last pane', () => {
const last = widget.chart.panes().length - 1;
if (last > 0) widget.chart.setPaneCollapsed(last, !widget.chart.paneCollapsed(last));
});
button('Line or candles', () => widget.setChartType(widget.chartType() === 'line' ? 'candlestick' : 'line'));
const undo = button('Undo', () => widget.history.undo());
const redo = button('Redo', () => widget.history.redo());
controls.appendChild(note);
const show = () => {
const next = widget.history.peekUndo();
note.textContent = next ? 'Undo takes back: ' + next.changes.join(', ') : 'Nothing to undo';
undo.disabled = !widget.history.canUndo();
redo.disabled = !widget.history.canRedo();
};
widget.history.subscribe(show);
show();
return widget;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px';
el.appendChild(controls);
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:0;width:100%;position:relative';
el.appendChild(host);
// One provider series per session. Regular hours are the same bars as the
// middle of the extended day: the provider serves both, the chart derives neither.
const monday = 1767571200; // Monday 5 January 2026, 00:00 UTC; New York is UTC-5 in January
const day = 86400, preOpen = 9 * 3600, open = 14.5 * 3600, close = 21 * 3600, postClose = 25 * 3600;
const extended = [];
for (let d = 0; d < 3; d++) {
extended.push(...stockBars(monday + d * day + preOpen, (postClose - preOpen) / 300, 300, 100 + d * 1.5, 17 + d));
}
const regular = extended.filter(bar => {
const t = (bar.time - monday) % day;
return t >= open && t < close;
});
const feed = {
dataVariants: () => ({ sessions: ['regular', 'extended'] }),
getBars: async request => (request.variant && request.variant.session === 'extended' ? extended : regular),
subscribeBars: () => () => {},
};
const widget = lib.createWidget(host, {
symbol: 'NOVA', exchange: 'DEMO', interval: '5m', intervals: ['5m'], timezone: 'America/New_York',
persist: false, rail: false, feed, navigation: { defaultVisibleBars: 400 },
});
const note = document.createElement('span');
note.style.cssText = 'color:light-dark(#686868,#94a3b8);font:12px system-ui, sans-serif;margin-left:6px';
const show = state => {
if (state.status === 'unsupported') note.textContent = 'Not served by this provider: nothing was fetched';
else if (state.status === 'ready') note.textContent = state.bars.length + ' bars';
};
widget.dataController.subscribe(show);
for (const [label, variant] of [
['Regular hours', undefined],
['Extended hours', { session: 'extended' }],
['Raw prices', { adjustment: 'raw' }],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onpointerdown = event => event.stopPropagation();
button.onclick = () => widget.setDataVariant(variant);
controls.appendChild(button);
}
controls.appendChild(note);
return widget;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const names = ['NOVA', 'ORBIT', 'PULSE', 'QUILL', 'RIDGE', 'SOLAR', 'TIDAL', 'UMBRA'];
// A simulated exchange owns every price. The bar feed and the quote source each
// read it; a quote is never taken from a candle.
const seed = symbol => Array.from(symbol).reduce((n, c) => n + c.charCodeAt(0), 0);
// Each 700 ms step draws a seeded random move; the price is the day's drift
// plus the sum of the last thirty moves, so it wanders like a traded price and
// every reader of the same moment sees the same number.
const noise = n => {
let h = Math.imul((n ^ 0x9e3779b9) >>> 0, 0x85ebca6b) >>> 0;
h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35) >>> 0;
return ((h ^ (h >>> 16)) >>> 0) / 4294967296 - 0.5;
};
const exchange = {
previousClose: symbol => 40 + seed(symbol) % 160,
last(symbol, now = Date.now()) {
  const step = Math.floor(now / 700);
  let walk = 0;
  for (let k = 0; k < 30; k++) walk += noise(seed(symbol) * 100003 + step - k);
  const move = (seed(symbol) % 7 - 3) / 100 + walk * 0.004;
  return Math.round(exchange.previousClose(symbol) * (1 + move) * 100) / 100;
},
};
const round = value => Math.round(value * 100) / 100;
const seconds = interval => interval === '1d' ? 86400 : 300;
// Simulated history, scaled to end at the exchange's price now.
const bars = (symbol, interval) => {
const series = stockBars(1700000000, 180, seconds(interval), exchange.previousClose(symbol), seed(symbol));
const scale = exchange.last(symbol) / series[series.length - 1].close;
return series.map(bar => ({ ...bar, open: round(bar.open * scale), high: round(bar.high * scale),
  low: round(bar.low * scale), close: round(bar.close * scale) }));
};
// One clock drives the quote source and the forming bar, so a row and the chart
// read the same step of the exchange at the same moment.
const ticks = new Set();
let clock = 0;
const onTick = fn => {
ticks.add(fn);
if (!clock) clock = setInterval(() => { const now = Date.now(); ticks.forEach(f => f(now)); }, 700);
return () => { ticks.delete(fn); if (!ticks.size) { clearInterval(clock); clock = 0; } };
};
const quote = (item, now) => ({ ...item, last: exchange.last(item.symbol, now), previousClose: exchange.previousClose(item.symbol) });
const quotes = {
getQuotes: async ({ instruments }) => instruments.map(item => quote(item)),
subscribeQuotes(instruments, { onQuote, onStatus }) {
  const [item] = instruments;
  if (onStatus) onStatus('live');
  return onTick(now => onQuote(quote(item, now)));
},
};
const news = {
getNews: async ({ symbol, cursor, limit }) => {
  const page = Number(cursor || 0);
  const items = Array.from({ length: limit }, (_, k) => {
    const i = page * limit + k;
    return { id: symbol + '-' + i, headline: symbol + ' update ' + (i + 1) + ': simulated headline',
      source: 'Simulated desk', time: 1700000000 - i * 5400, summary: 'Simulated text for this example. It is not market news.' };
  });
  return { items, nextCursor: page < 2 ? String(page + 1) : null };
},
};
let next = 0;
const store = new lib.WatchlistRepository(lib.createMemoryWatchlistStorage(), 'example', { id: () => 'list-' + (++next) });
store.createList('Simulated', names.map(symbol => ({ symbol, exchange: 'DEMO' }))).then(list => store.setActiveList(list.id));
const widget = lib.createWidget(el, {
symbol: 'NOVA', exchange: 'DEMO', interval: '5m', persist: false, intervals: ['5m', '1d'],
feed: {
  getBars: async request => bars(request.symbol, request.interval),
  // The forming bar follows the same exchange the rows quote.
  subscribeBars(request, onBar) {
    const history = bars(request.symbol, request.interval);
    const forming = { ...history[history.length - 1] };
    return onTick(now => {
      const price = exchange.last(request.symbol, now);
      forming.close = price;
      forming.high = Math.max(forming.high, price);
      forming.low = Math.min(forming.low, price);
      onBar({ ...forming });
    });
  },
},
watchlist: { store, quotes },
news: { feed: news, pageSize: 8 },
});
// Open the list beside the chart. At 640 px and below the panel is a full sheet
// over the chart, so leave it for the reader to open from the Watchlist button.
if (el.clientWidth > 640) widget.openWatchlist();
return widget;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px;flex-shrink:0';
const stage = document.createElement('div');
stage.style.cssText = 'flex:1;min-height:0;max-width:100%;width:100%';
el.append(controls, stage);
const bars = stockBars(1700000000, 160, 60, 100, 1901, 0.005, 1800);
const widget = lib.createWidget(stage, {
  symbol: 'OBJECTS SIM', interval: '1m', intervals: ['1m'],
  rail: false, statusline: false, topbar: false,
  navigation: { defaultVisibleBars: 100 },
});
widget.series.setData(bars);
function addDrawing() {
  widget.draw.add({ tool: 'trend-line', paneIndex: 0,
    points: [{ time: bars[100].time, price: bars[100].low },
      { time: bars[140].time, price: bars[140].low }],
    style: { color: '#f0a020', lineWidth: 3 },
  });
}
addDrawing();
widget.draw.add({ tool: 'rectangle', paneIndex: 0,
  points: [{ time: bars[159].time + 20 * 60, price: bars[159].high + 2 },
    { time: bars[159].time + 35 * 60, price: bars[159].high + 5 }],
  style: { color: '#4da3ff', lineWidth: 2 },
});
widget.chart.addIndicator('rsi');
const profile = new lib.VolumeProfile(
  lib.computeVolumeProfileSessions(bars, { tickSize: 0.5, session: 'composite' }),
  { width: 60, showValueArea: false, showPocLabel: false },
);
widget.chart.addPrimitive(profile);
let exists = true;
let visible = true;
const unregister = widget.objects.register({
  id: 'session-profile',
  get: () => exists ? { kind: 'profile', name: 'Session profile', paneIndex: 0, visible } : null,
  setVisible(on) {
    if (visible === on) return;
    visible = on;
    if (on) widget.chart.addPrimitive(profile); else widget.chart.removePrimitive(profile);
  },
  remove() { widget.chart.removePrimitive(profile); exists = false; },
});
function button(label, action) {
  const node = document.createElement('button');
  node.textContent = label;
  node.type = 'button';
  node.style.cssText = 'padding:5px 9px;border:1px solid var(--oac-card-border);border-radius:4px;background:var(--oac-card);color:inherit;font:12px system-ui';
  node.addEventListener('click', action);
  controls.appendChild(node);
  return node;
}
button('Open Objects', () => widget.openObjects());
button('Open Data', () => widget.openDataWindow());
button('Add drawing', addDrawing);
button('Add RSI', () => widget.chart.addIndicator('rsi'));
button('Undo drawing action', () => widget.draw.undo());
let compact = false;
const widthButton = button('Width: fit', () => {
  compact = !compact;
  stage.style.width = compact ? '350px' : '100%';
  widthButton.textContent = compact ? 'Width: 350 px' : 'Width: fit';
  widthButton.setAttribute('aria-pressed', String(compact));
});
widthButton.setAttribute('aria-pressed', 'false');
let saved;
const restoreButton = button('Restore layout', () => {
  if (saved) widget.restoreState(saved);
});
restoreButton.disabled = true;
button('Save layout', () => {
  saved = JSON.parse(JSON.stringify(widget.getState()));
  restoreButton.disabled = false;
});
return { destroy() { unregister(); widget.destroy(); } };

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
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 = stockBars(1700000000, 150, 300, 23800, 173, 0.0015, 2500);
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(); } };

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const chart = lib.createChart(el);
// Synthetic rules, not any venue's: 0.01 below 100 and 0.05 from 100.
const ticks = new lib.TickSchedule([{ tick: 0.01 }, { from: 100, tick: 0.05 }]);
chart.setPriceScaleOptions({ minMove: ticks.minMove });
// Simulated prices that trade through 100, each on its band's tick.
const bars = stockBars(1700000000, 90, 300, 99.8, 75, 0.0022, 1500).map(bar => ({ ...bar,
open: ticks.round(bar.open), high: ticks.round(bar.high), low: ticks.round(bar.low), close: ticks.round(bar.close) }));
chart.addSeries('candlestick').setData(bars);
chart.addPriceLine({ price: 100, color: '#8892a6', lineStyle: 'dotted', id: 'boundary',
leftLabel: 'tick 0.05 from here, 0.01 below' }, 0);
// The chart hands it to its trading layer, and rounds dragged alerts with it too.
chart.setTickSchedule(ticks);
const order = { id: 'entry', type: 'limit', side: 'buy', price: 99.62, size: 10 };
chart.trading.setOrders([order]);
chart.trading.on('trading:order_modify', (event) => {
chart.trading.upsertOrder({ ...order, price: event.newPrice });
});
chart.fitContent();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;font:12px sans-serif';
controls.addEventListener('pointerdown', event => event.stopPropagation());
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:0';
el.append(controls, host);

const broker = new lib.FakeBroker({ accounts: [
  { id: 'SBX-CASH', name: 'Sandbox cash', mode: 'analyzer', currency: 'INR', balance: 500000 },
  { id: 'SBX-MARGIN', name: 'Sandbox margin', mode: 'analyzer', currency: 'INR', balance: 1500000, leverage: 5, maxLeverage: 5 },
  { id: 'LIVE', name: 'Live', mode: 'live', currency: 'INR', balance: 9000000 },
] });
const accounts = new lib.AccountManager({ feed: broker, mode: 'analyzer' });
const engine = new lib.OrderEngine({
  feed: broker, mode: 'analyzer', armed: true, constraints: { tickSize: 0.05 },
  selectedAccount: accounts,
});
// The broker's order stream settles every order and command.
broker.onOrderUpdate((order, info) => engine.onBrokerOrder({ ...order, clientToken: info.clientToken }));

// After a reconnect the broker's own history is the word on every write this
// page sent. One whose answer was lost finds its outcome there by the token the
// broker echoes; one the complete history never mentions did not arrive, so its
// token is released. Without this, a close left unresolved by the drop would
// refuse every later close.
const sent = [];
async function reconcile() {
  engine.beginReconcile();
  const tokens = new Set();
  const ids = new Set();
  for (const accountId of new Set(sent.map(id => engine.orderAccount(id)).filter(Boolean))) {
    for (const row of await broker.getOrderHistory({ accountId })) {
      tokens.add(row.clientToken);
      ids.add(row.order.id);
      engine.onBrokerOrder({ ...row.order, clientToken: row.clientToken });
    }
  }
  engine.onReconnect(ids);
  for (const id of sent) if (!tokens.has(id)) engine.releaseAmbiguous(id);
}

const bars = stockBars(1700000000, 160, 300, 100, 41);
const widget = lib.createWidget(host, {
  symbol: 'NOVA', exchange: 'DEMO', interval: '5m', intervals: ['5m'], persist: false, locale: 'en-IN', account: accounts,
});
widget.series.setData(bars);
broker.setMark('NOVA', bars[bars.length - 1].close);
accounts.refresh();

const log = document.createElement('span');
log.style.opacity = '0.8';
const action = (label, run) => {
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = label;
  button.style.cssText = 'padding:4px 9px;border:1px solid #667085;border-radius:4px;background:transparent;color:inherit;font:12px sans-serif;cursor:pointer';
  button.onclick = async () => {
    const result = await run();
    if (result.clientId) sent.push(result.clientId);
    log.textContent = result.ok ? label + ': ' + (engine.brokerStatus(result.clientId) || result.intent) : label + ' refused: ' + result.reason;
  };
  controls.appendChild(button);
};
action('Buy 50', () => engine.placeOrder({ symbol: 'NOVA', side: 'BUY', type: 'MARKET', qty: 50, duration: 'DAY' }));
action('Close 20', () => engine.closePosition({ symbol: 'NOVA', qty: 20 }));
action('Reverse', () => engine.reversePosition({ symbol: 'NOVA' }));
action('Close all', () => engine.closePosition({ symbol: 'NOVA' }));
action('Drop connection', async () => { broker.disconnect(); return { ok: true, intent: 'figures are stale' }; });
action('Reconnect', async () => {
  broker.reconnect();
  await reconcile();
  const result = await accounts.reconnect();
  return { ...result, intent: 'reconnected' };
});
controls.appendChild(log);
return widget;

const chart = lib.createChart(el);
let oi = 5000, seed = 91;
const bars = lib.generateBars(1700000000, 120, 300).map((bar, index) => {
seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
oi = Math.max(0, oi + Math.round((seed / 4294967296 - 0.46) * 130));
return { ...bar, ...(index % 30 < 3 ? {} : { oi }) };
});
chart.setDataContext({ symbol: 'SYNTHETIC', exchange: 'DEMO', interval: '5m', hasOpenInterest: true });
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('open-interest');
chart.addIndicator('open-interest-change');
chart.fitContent();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
el.classList.add('oac-timeline-events');
const toolbar = document.createElement('div');
toolbar.className = 'oac-timeline-events__toolbar';
const chartHost = document.createElement('div');
chartHost.className = 'oac-timeline-events__chart';
const detailHost = document.createElement('aside');
detailHost.className = 'oac-timeline-events__detail';
detailHost.setAttribute('aria-live', 'polite');
el.append(toolbar, chartHost, detailHost);

const bars = stockBars(1700000000, 110, 3600, 100, 722, 0.005, 1700);
const widget = lib.createWidget(chartHost, {
  symbol: 'SAMPLE', exchange: 'DEMO', interval: '1h',
  persist: false, topbar: false, statusline: false, rail: false, timeNavigator: false,
  eventDetails: false,
});
widget.series.setData(bars);
widget.chart.timeScale.fitContent(bars.length);
widget.chart.setEventMarkerOptions({ clustering: true, clusterRadius: 26 });
widget.chart.setEventGroups([
  { id: 'sample-feed', label: 'Sample feed' },
  { id: 'company', label: 'Company', parentId: 'sample-feed' },
  { id: 'market', label: 'Market', parentId: 'sample-feed' },
]);
widget.chart.setEvents([
  { id: 'results', time: bars[67].time, type: 'earnings', label: 'E', group: 'company',
    title: 'Sample results' },
  { id: 'call', time: bars[67].time + 75, type: 'news', label: 'N', group: 'company',
    title: 'Sample investor call' },
  { id: 'guidance', time: bars[67].time + 180, type: 'news', label: 'G', group: 'company',
    title: 'Sample guidance note' },
  { id: 'dividend', time: bars[87].time, type: 'dividend', label: 'D', group: 'market',
    title: 'Sample dividend' },
  { id: 'bulletin', time: bars[87].time + 120, type: 'news', label: 'M', group: 'market',
    title: 'Sample market bulletin' },
]);

// A host-owned detail model. The chart only supplies event IDs and timestamps.
const content = new Map([
  ['results', { summary: 'Illustrative company update, supplied by the host application.',
    sections: [
      { title: 'Highlights', rows: [['Period', 'Example quarter'], ['Revenue', 'Illustrative figure'], ['Outlook', 'Unchanged']] },
      { title: 'Context', rows: [['Feed', 'Sample company events'], ['Status', 'Simulated']] },
    ] }],
  ['call', { summary: 'A sample follow-up call attached to the same hour as the results.',
    sections: [{ title: 'Agenda', rows: [['Topic', 'Business update'], ['Format', 'Investor Q&A']] }] }],
  ['guidance', { summary: 'A separate sample note makes the clustered marker contain three selectable events.',
    sections: [{ title: 'Details', rows: [['Category', 'Company news'], ['Status', 'Illustrative']] }] }],
  ['dividend', { summary: 'A sample corporate action at a later point on the timeline.',
    sections: [{ title: 'Details', rows: [['Type', 'Dividend'], ['Status', 'Illustrative']] }] }],
  ['bulletin', { summary: 'A simulated market bulletin near the sample dividend.',
    sections: [{ title: 'Details', rows: [['Source', 'Sample market feed'], ['Status', 'Illustrative']] }] }],
]);
let activeEvents = [];
let selectedId = '';
function node(tag, className, value) {
  const element = document.createElement(tag);
  if (className) element.className = className;
  if (value !== undefined) element.textContent = value;
  return element;
}
function renderDetails() {
  detailHost.replaceChildren();
  detailHost.appendChild(node('h3', 'oac-timeline-events__heading', 'Sample event details'));
  detailHost.appendChild(node('p', 'oac-timeline-events__disclaimer', 'Illustrative events; host-supplied text.'));
  if (!activeEvents.length) {
    detailHost.appendChild(node('p', 'oac-timeline-events__empty', 'Select an event badge near the time axis to inspect its details.'));
    return;
  }
  if (activeEvents.length > 1) {
    const choices = node('div', 'oac-timeline-events__choices');
    choices.setAttribute('role', 'group');
    choices.setAttribute('aria-label', 'Events in selected cluster');
    for (const event of activeEvents) {
      const choice = node('button', '', event.title || event.label);
      choice.type = 'button';
      choice.setAttribute('aria-pressed', String(event.id === selectedId));
      choice.addEventListener('click', () => { selectedId = event.id; renderDetails(); });
      choices.appendChild(choice);
    }
    detailHost.appendChild(choices);
  }
  const event = activeEvents.find(item => item.id === selectedId) || activeEvents[0];
  const details = content.get(event.id);
  const article = node('article', 'oac-timeline-events__article');
  article.appendChild(node('h4', '', event.title || event.label));
  article.appendChild(node('time', '', new Date(event.time * 1000).toLocaleString(undefined, {
    timeZone: 'Asia/Kolkata', dateStyle: 'medium', timeStyle: 'short',
  })));
  article.appendChild(node('p', '', details?.summary || 'No additional details supplied.'));
  for (const section of details?.sections || []) {
    const block = node('section', 'oac-timeline-events__section');
    block.appendChild(node('h5', '', section.title));
    const list = node('dl', '');
    for (const [label, value] of section.rows) {
      list.append(node('dt', '', label), node('dd', '', value));
    }
    block.appendChild(list);
    article.appendChild(block);
  }
  const link = node('a', 'oac-timeline-events__link', 'Explore the chart event API');
  link.href = 'https://github.com/marketcalls/openalgo-charts';
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  article.appendChild(link);
  detailHost.appendChild(article);
}
renderDetails();
const unsubscribe = widget.chart.on('event:click', hit => {
  activeEvents = hit.events;
  selectedId = activeEvents[0]?.id || '';
  renderDetails();
});
function toggle(label, action) {
  const button = node('button', '', label);
  button.type = 'button';
  button.addEventListener('click', action);
  toolbar.appendChild(button);
  return button;
}
let clusters = true;
const clusterButton = toggle('Clustering: on', () => {
  clusters = !clusters;
  widget.chart.setEventMarkerOptions({ clustering: clusters });
  clusterButton.textContent = 'Clustering: ' + (clusters ? 'on' : 'off');
  clusterButton.setAttribute('aria-pressed', String(clusters));
});
clusterButton.setAttribute('aria-pressed', 'true');
let companyVisible = true;
const companyButton = toggle('Company: on', () => {
  companyVisible = !companyVisible;
  widget.chart.setEventGroupVisible('company', companyVisible);
  companyButton.textContent = 'Company: ' + (companyVisible ? 'on' : 'off');
  companyButton.setAttribute('aria-pressed', String(companyVisible));
  activeEvents = []; renderDetails();
});
companyButton.setAttribute('aria-pressed', 'true');
let marketVisible = true;
const marketButton = toggle('Market: on', () => {
  marketVisible = !marketVisible;
  widget.chart.setEventGroupVisible('market', marketVisible);
  marketButton.textContent = 'Market: ' + (marketVisible ? 'on' : 'off');
  marketButton.setAttribute('aria-pressed', String(marketVisible));
  activeEvents = []; renderDetails();
});
marketButton.setAttribute('aria-pressed', 'true');
return { destroy() { unsubscribe(); widget.destroy(); } };

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
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 stage = document.createElement('div');
stage.style.cssText = 'flex:1;min-height:220px';
const source = document.createElement('details');
source.hidden = true;
source.style.cssText = 'padding:8px;flex-shrink:0';
const summary = document.createElement('summary');
summary.textContent = 'Indicator source';
const text = document.createElement('pre');
text.style.cssText = 'max-height:130px;overflow:auto;font:11px/1.5 monospace;scrollbar-width:thin;scrollbar-color:var(--oac-card-border) transparent';
source.append(summary, text);
el.append(controls, stage, source);

function descriptor(anchor) {
  return {
    id: 'demo-signal-anchor-' + anchor,
    name: 'Signal anchors', placement: 'onchart', hasSource: true,
    markerAnchor: anchor, inputs: [],
    plots: [
      { key: 'up', type: 'line', title: 'Up', style: { color: '#26a69a' } },
      { key: 'down', type: 'line', title: 'Down', style: { color: '#ef5350' } },
      { key: 'mid', type: 'line', title: 'Helper', style: { color: 'transparent' } },
    ],
    calc(bars) {
      return {
        up: bars.map(bar => bar.close >= bar.open ? bar.close : null),
        down: bars.map(bar => bar.close < bar.open ? bar.close : null),
        mid: bars.map((bar) => (bar.open + bar.close) / 2),
      };
    },
    markers({ bars }) {
      return bars.flatMap((bar, i) => {
        if (i === 0 || i % 12 !== 0) return [];
        const up = bar.close >= bar.open;
        return [{ time: bar.time, position: up ? 'belowBar' : 'aboveBar',
          shape: up ? 'labelUp' : 'labelDown', size: 'small',
          color: up ? '#26a69a' : '#ef5350', text: up ? 'Up' : 'Down' }];
      });
    },
  };
}
for (const anchor of ['price', 'plot']) lib.registerIndicator(descriptor(anchor));
const chart = lib.createChart(stage, { legendIconSize: 20 });
const bars = stockBars(1700000000, 84, 300, 100, 713, 0.008, 1500);
chart.addSeries('candlestick').setData(bars);
let anchor = 'price';
let study = chart.addIndicator('demo-signal-anchor-' + anchor);
chart.fitContent();
const listeners = new AbortController();
function button(label, action) {
  const node = document.createElement('button');
  node.type = 'button';
  node.textContent = label;
  node.style.cssText = 'min-height:36px;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;
}
const anchorButton = button('Anchor: price', () => {
  anchor = anchor === 'price' ? 'plot' : 'price';
  study.remove();
  study = chart.addIndicator('demo-signal-anchor-' + anchor);
  anchorButton.textContent = 'Anchor: ' + anchor;
});
const sizeButton = button('Buttons: 20 px', () => {
  const size = chart.legendIconSize() === 20 ? 28 : 20;
  chart.setLegendIconSize(size);
  sizeButton.textContent = 'Buttons: ' + size + ' px';
});
chart.on('indicatorSource', ({ instanceId }) => {
  if (instanceId !== study.id) return;
  text.textContent = descriptor.toString();
  source.hidden = false;
  source.open = true;
});
return { destroy() { listeners.abort(); chart.destroy(); } };

lib.registerIndicator({
id: 'demo-regime',
name: 'Trend Regime',
category: 'Custom',
placement: 'onchart',
inputs: [
  { key: 'length', type: 'number', label: 'Length', default: 20, min: 2, max: 200, step: 1 },
  { key: 'up', type: 'color', label: 'Bull', default: '#26a69a' },
  { key: 'down', type: 'color', label: 'Bear', default: '#ef5350' },
],
plots: [{
  key: 'basis', type: 'line', title: 'Basis', style: { lineWidth: 2 },
  // colorBy is a function, not the name of a column. It runs per bar and
  // returns a colour, or undefined to fall back to the plot's own.
  colorBy: ({ index, values, settings }) => {
    const t = values.trend[index];
    return t == null ? undefined : t > 0 ? settings.up : settings.down;
  },
}],
calc(bars, s) {
  const close = lib.sourceValues(bars, 'close');
  const basis = lib.nulls(lib.sma(close, Math.max(2, s.length | 0)));
  const trend = basis.map((b, i) => (b == null ? null : close[i] >= b ? 1 : -1));
  return { basis, trend };
},
// Repaint the price candles by regime.
barColors({ values, settings }) {
  return values.trend.map((t) => (t == null ? null : t > 0 ? settings.up : settings.down));
},
// Shade the whole pane behind them.
background({ values, settings }) {
  return values.trend.map((t) =>
    t == null ? null : lib.withAlpha(t > 0 ? settings.up : settings.down, 0.07));
},
// Flag every flip, anchored to the candle rather than to the indicator line.
markers({ bars, values, settings }) {
  const out = [];
  for (let i = 1; i < bars.length; i++) {
    const a = values.trend[i - 1], b = values.trend[i];
    if (a == null || b == null || a === b) continue;
    out.push({
      time: bars[i].time,
      position: 'atPrice',
      price: b > 0 ? bars[i].low : bars[i].high,
      shape: b > 0 ? 'arrowUp' : 'arrowDown',
      color: b > 0 ? settings.up : settings.down,
      text: b > 0 ? 'BULL' : 'BEAR',
    });
  }
  return out;
},
});

const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 200, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-regime');
chart.timeScale.fitContent(bars.length);
return chart;

lib.registerIndicator({
id: 'demo-routed-signals', name: 'Routed signals', category: 'Custom',
placement: 'pane',
inputs: [{ key: 'length', type: 'number', label: 'Length', default: 10, min: 2, max: 50, step: 1 }],
plots: [{ key: 'momentum', type: 'histogram', title: 'Momentum', style: { color: '#64748b' } }],
calc(bars, s) {
  const n = Math.max(2, s.length | 0);
  return { momentum: bars.map((b, i) => (i < n ? null : b.close - bars[i - n].close)) };
},
markers({ bars, values }) {
  const out = [];
  for (let i = 1; i < bars.length; i++) {
    const a = values.momentum[i - 1], b = values.momentum[i];
    if (a == null || b == null || Math.sign(a) === Math.sign(b)) continue;
    const up = b > 0, color = up ? '#26a69a' : '#ef5350';
    // On the candles, measured against the bar that fired.
    out.push({ time: bars[i].time, position: up ? 'belowBar' : 'aboveBar', overlay: true,
      shape: up ? 'labelUp' : 'labelDown', size: 'small', color, text: up ? 'Buy' : 'Sell' });
    // No target: a dot on the histogram in the study's own pane.
    out.push({ time: bars[i].time, position: 'atPrice', price: b, shape: 'circle', size: 'tiny', color });
  }
  return out;
},
draws({ bars, values }) {
  const last = bars.length - 1;
  if (last < 30) return [];
  const recent = bars.slice(last - 30);
  return [
    { kind: 'box', overlay: true, color: '#4f8cff', fillColor: '#4f8cff', opacity: 0.08,
      from: { time: recent[0].time, price: Math.max(...recent.map((b) => b.high)) },
      to: { time: bars[last].time, price: Math.min(...recent.map((b) => b.low)) },
      text: '30-bar range', verticalAlign: 'top', id: 'range', tooltip: 'Range the latest signals ran in' },
    { kind: 'label', plot: 'momentum', align: 'left', color: '#64748b', text: 'Now',
      at: { time: bars[last].time, price: values.momentum[last] ?? 0 } },
  ];
},
});

const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 160, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-routed-signals');
chart.timeScale.fitContent(bars.length);
return chart;

lib.registerIndicator({
id: 'demo-routed-shading', name: 'Routed shading', category: 'Custom',
placement: 'pane',
inputs: [{ key: 'length', type: 'number', label: 'Length', default: 10, min: 2, max: 50, step: 1 }],
plots: [{ key: 'momentum', type: 'histogram', title: 'Momentum', style: { color: '#64748b' } }],
calc(bars, s) {
  const n = Math.max(2, s.length | 0);
  return { momentum: bars.map((b, i) => (i < n ? null : b.close - bars[i - n].close)) };
},
background({ values }) {
  const m = values.momentum;
  const peak = Math.max(...m.map((v) => Math.abs(v ?? 0)));
  return [
    // Behind the candles: which way momentum points, bar by bar.
    { overlay: true, colors: m.map((v) => (v == null || v === 0 ? null
      : v > 0 ? 'rgba(38,166,154,0.14)' : 'rgba(239,83,80,0.14)')) },
    // No target: the study's own pane, where the reading is strongest.
    { colors: m.map((v) => (v != null && Math.abs(v) > peak * 0.6 ? 'rgba(79,140,255,0.18)' : null)) },
  ];
},
});

const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 160, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-routed-shading');
chart.timeScale.fitContent(bars.length);
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
lib.registerIndicator({
id: 'demo-curved-study', name: 'Curved annotation', placement: 'onchart',
inputs: [],
plots: [{ key: 'carrier', type: 'line', title: 'Anchors' }],
calc: bars => ({ carrier: bars.map(() => null) }),
draws: ({ bars }) => {
  if (bars.length < 29) return [];
  const points = [4, 12, 20, 28].map(index => ({
    time: bars[index].time, price: bars[index].close,
  }));
  return [
    { kind: 'polyline', points, color: '#64748b', lineWidth: 1 },
    { kind: 'polyline', points, curve: 'smooth', color: '#f59e0b', lineWidth: 3 },
  ];
},
});
const chart = lib.createChart(el, { branding: false, timeNavigator: false });
// Simulated prices whose closes at the four anchors turn down, up and down.
const bars = stockBars(1700000000, 36, 60, 100, 90, 0.012);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-curved-study');
chart.setVisibleLogicalRange({ from: -2, to: 38 });
return chart;

const controls = document.createElement('div');
controls.style.cssText = 'position:absolute;left:10px;top:10px;right:64px;z-index:5';
controls.addEventListener('pointerdown', event => event.stopPropagation());
el.style.position = 'relative';
el.appendChild(controls);
const surface = document.createElement('div');
surface.style.cssText = 'position:absolute;inset:48px 0 0';
el.appendChild(surface);
const chart = lib.createChart(surface, { branding: false });
const bars = lib.generateBars(1700000000, 80, 60);
chart.addSeries('line').setData(bars);
lib.registerIndicator({
id: 'demo-annotation-typography', name: 'Annotation type', placement: 'onchart',
inputs: [{ key: 'large', type: 'boolean', label: 'Large type', default: false }],
plots: [{ key: 'value', title: 'Value', type: 'line', style: { color: 'transparent' } }],
calc: source => ({ value: source.map(bar => bar.close) }),
draws: ({ settings }) => {
  const type = { fontSize: settings.large ? 19 : 13, fontFamily: 'ui-monospace, monospace',
    bold: true, italic: true, textAlign: 'right' };
  return [
    { kind: 'label', at: { time: bars[14].time, price: 114 }, text: 'Session\nreading',
      color: '#27425e', textColor: '#e0f2fe', align: 'left', verticalAlign: 'top', ...type },
    { kind: 'box', from: { time: bars[37].time, price: 107 }, to: { time: bars[66].time, price: 97 },
      color: '#27425e', fillColor: '#27425e', opacity: 0.18, text: 'Price\nzone',
      textColor: '#e0f2fe', align: 'right', verticalAlign: 'bottom', ...type },
  ];
},
markers: ({ settings }) => [{ time: bars[28].time, position: 'atPrice', price: 91,
  shape: 'circle', size: 'small', color: '#ef5350', text: 'Signal\ntext',
  // Canvas text takes a concrete colour, so pick the shade that reads on the active palette.
  textColor: chart.theme() === lib.darkTheme ? '#a3e635' : '#4d7c0f',
  fontSize: settings.large ? 19 : 13, fontFamily: 'ui-monospace, monospace', italic: true }],
});
const study = chart.addIndicator('demo-annotation-typography');
chart.panes()[0].priceScale.setPriceRange({ min: 85, max: 120 });
chart.panes()[0].priceScale.setAutoScale(false);
chart.fitContent();
const button = document.createElement('button');
button.type = 'button'; button.textContent = 'Larger text';
button.onpointerdown = () => button.focus({ preventScroll: true });
button.onmousedown = event => {
event.preventDefault();
button.focus({ preventScroll: true });
};
button.style.cssText = 'padding:5px 9px;border:1px solid light-dark(#e4e4e4,#64748b);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);font:12px sans-serif;cursor:pointer';
button.onclick = () => {
const large = !study.settings().large;
study.setSettings({ large });
button.textContent = large ? 'Smaller text' : 'Larger text';
};
controls.appendChild(button);
return chart;

lib.registerIndicator({
id: 'demo-daily-range',
name: 'Daily Range',
category: 'Custom',
placement: 'onchart',
inputs: [],
plots: [
  { key: 'high', type: 'step', title: 'Day high', style: { color: '#26a69a', lineWidth: 1 } },
  { key: 'low',  type: 'step', title: 'Day low',  style: { color: '#ef5350', lineWidth: 1 } },
],
fills: [{ between: ['high', 'low'], colorUp: '#4f8cff', colorDown: '#4f8cff', opacity: 0.08 }],
calc(bars, s) {
  // The chart's zone rides along under the reserved timezone key.
  const day = lib.securitySeries(bars, '1d', { timezone: s.timezone });
  // isNew is a column too: markers reads it below.
  return { high: day.high, low: day.low, isNew: day.isNew.map((v) => (v ? 1 : null)) };
},
markers({ bars, values }) {
  const out = [];
  for (let i = 0; i < bars.length; i++) {
    if (values.isNew[i] === null) continue;
    out.push({ time: bars[i].time, position: 'paneTop', shape: 'cross', size: 'small', color: '#8892a6' });
  }
  return out;
},
});

const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 240, 3600);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-daily-range');
chart.timeScale.fitContent(bars.length);
return chart;

lib.registerIndicator({
id: 'demo-requested-mean', name: 'Hourly mean', placement: 'onchart', inputs: [],
plots: [
  { key: 'confirmed', type: 'step', title: 'Confirmed hour', style: { color: '#e8a23a', lineWidth: 2 } },
  { key: 'developing', type: 'line', title: 'Developing hour', style: { color: '#4f8cff', lineWidth: 2 } },
],
calc(bars, settings) {
  const expression = requested => ({ mean: lib.nulls(lib.sma(requested.map(bar => bar.close), 3)) });
  const options = { timezone: settings.timezone };
  return {
    confirmed: lib.securityExpression(bars, '1h', expression, options).mean ?? [],
    developing: lib.securityExpression(bars, '1h', expression, { ...options, mode: 'developing' }).mean ?? [],
  };
},
});
const chart = lib.createChart(el, { timezone: 'Etc/UTC' });
const bars = lib.generateBars(1700002800, 240, 300);
chart.addSeries('candlestick').setData(bars);
chart.addIndicator('demo-requested-mean');
chart.fitContent();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const chart = lib.createChart(el);
const open = 1788752700; // 2026-09-07 09:15 IST
const first = stockBars(open, 375, 60, 1840, 20260930, 0.0006, 4000);
const second = stockBars(open + 86400, 375, 60, first[first.length - 1].close, 20261001, 0.0006, 4000);
chart.addSeries('candlestick').setData([...first, ...second]);
chart.addIndicator('ema', { length: 20, color: '#8a93a6' });
chart.addIndicator('ema', { length: 9, timeframe: '15m', color: '#e8a23a', 'ma:type': 'step', 'ma:width': 2 });
chart.fitContent();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const start = 1700000000;
const requested = {
// Simulated closing observations, every three minutes.
bars: stockBars(start, 40, 180, 100, 5, 0.008).map(({ time, close }) => ({ time, open: close, high: close, low: close, close })),
availableAt: Array.from({ length: 40 }, (_, i) => start + (i + 1) * 180),
confirmed: Array.from({ length: 40 }, () => true),
};
lib.registerIndicator({
id: 'demo-requested-availability', name: 'External mean', placement: 'pane', inputs: [],
plots: [
  { key: 'carry', type: 'step', title: 'Carried mean', style: { color: '#e8a23a', lineWidth: 2 } },
  { key: 'missing', type: 'line', title: 'New result', style: { color: '#4f8cff', markers: true, markersOnly: true, markerRadius: 4 } },
],
calc(bars) {
  const expression = input => ({
    mean: input.map((bar, i) => i === 0 ? null : (bar.close + input[i - 1].close) / 2),
  });
  const times = bars.map(bar => bar.time);
  return {
    carry: lib.alignRequestedExpression(times, requested, expression).mean,
    missing: lib.alignRequestedExpression(times, requested, expression, { gaps: 'missing' }).mean,
  };
},
});
const chart = lib.createChart(el, { timezone: 'Etc/UTC' });
chart.addSeries('candlestick').setData(lib.generateBars(start, 120, 60));
chart.addIndicator('demo-requested-availability');
chart.fitContent();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const start = 1700000000;
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px';
const status = document.createElement('div');
status.style.cssText = 'padding:0 8px 8px;color:light-dark(#686868,#94a3b8);font:12px sans-serif';
status.setAttribute('role', 'status');
const host = document.createElement('div');
host.style.height = '380px';
el.append(controls, status, host);
const chart = lib.createChart(host, { timezone: 'Etc/UTC', branding: false });
chart.setDataContext({ symbol: 'SOURCE', interval: '1m' });
chart.addSeries('line', { style: { color: '#64748b' } }).setData(
stockBars(start, 12, 60, 100, 5, 0.008).map(bar => ({ time: bar.time, value: bar.close })));
let revision = 0, providerNumber = 1, confirmed = false, study, disposed = false;
const pending = new Set();
const render = () => {
if (disposed) return;
status.textContent = 'Provider ' + providerNumber + '; latest ' + (confirmed ? 'confirmed' : 'unconfirmed')
  + '; ' + (study?.dataStatus()?.state ?? 'loading') + '; responses waiting: ' + pending.size;
};
const snapshot = (request, offset) => {
const knownRevision = request.asOf === undefined || request.asOf >= start + 600 ? revision : 0;
const rows = [10, 20, 30].map((value, i) => {
  const close = value + offset + knownRevision;
  return { time: start + i * 180, open: close, high: close, low: close, close };
});
const indices = rows.map((bar, i) => i).filter(i => rows[i].time >= request.from && rows[i].time <= request.to);
return { bars: indices.map(i => rows[i]), availableAt: indices.map(i => [start + 60, start + 315, start + 600][i]),
  confirmed: indices.map(i => i < 2 || confirmed && (request.asOf === undefined || request.asOf >= start + 600)) };
};
const provider = offset => ({
requestBars: async request => snapshot(request, offset).bars,
requestSnapshot: request => new Promise((resolve, reject) => {
  const value = snapshot(request, offset);
  const finish = error => {
    pending.delete(release);
    request.signal?.removeEventListener('abort', abort);
    if (error) reject(error); else resolve(value);
    render();
  };
  const release = () => finish();
  const abort = () => finish(new DOMException('Request cancelled', 'AbortError'));
  if (request.signal?.aborted) { abort(); return; }
  request.signal?.addEventListener('abort', abort, { once: true });
  pending.add(release);
  render();
}),
});
chart.setBarsProvider(provider(0));
lib.registerIndicator(lib.createRequestedIndicator({
id: 'demo-requested-provider', name: 'Requested close', placement: 'pane', inputs: [],
plots: [{ key: 'close', type: 'line', style: { color: '#e8a23a', lineWidth: 3, markers: true, markerRadius: 4 } }],
request: ({ bars }) => ({ symbol: 'REQUESTED', interval: '3m',
  from: start, to: bars[bars.length - 1]?.time ?? start }),
expression: bars => ({ close: bars.map(bar => bar.close) }),
targetTimes: ({ bars, requestState }) => bars.map((bar, i) =>
  i === bars.length - 1 ? Math.max(bar.time, requestState?.replay?.asOf ?? bar.time) : bar.time),
}));
study = chart.addIndicator('demo-requested-provider');
chart.setPaneWeight(study.paneIndex, 0.8);
chart.fitContent();
const unsubscribe = study.subscribeDataStatus(() => queueMicrotask(render));
for (const [label, action] of [
['Release response', () => { for (const release of [...pending]) release(); }],
['Revise values', () => { revision += 5; chart.invalidateRequestedData(); }],
['Replace provider', () => { providerNumber++; revision = 0; confirmed = false; chart.setBarsProvider(provider((providerNumber - 1) * 100)); }],
['Confirm latest', () => { confirmed = true; chart.invalidateRequestedData(); }],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onclick = () => { action(); render(); };
controls.appendChild(button);
}
const destroy = chart.destroy.bind(chart);
chart.destroy = () => { disposed = true; unsubscribe(); destroy(); };
render();
return chart;

function stockBars(startTime, count, intervalSec, startPrice, seed, volatility = 0.004, baseVolume = 2000) {
  let state = seed >>> 0 || 1;
  const random = () => {
    state ^= state << 13; state >>>= 0;
    state ^= state >>> 17;
    state ^= state << 5; state >>>= 0;
    return state / 4294967296;
  };
  const round = value => Math.round(value * 100) / 100;
  const bars = [];
  const trends = [0.5, -0.35, 0.2, 0.85, -0.7, 0.15, -0.4];
  let close = round(startPrice);
  let regimeEnd = 0;
  let trend = 0;
  for (let i = 0; i < count; i++) {
    if (i >= regimeEnd) {
      trend = trends[Math.floor(random() * trends.length)] * volatility;
      regimeEnd = i + 14 + Math.floor(random() * 18);
    }
    const gap = i > 0 && i % 37 === 0 ? (random() - 0.5) * volatility * 6 : 0;
    const open = round(Math.max(0.01, close * (1 + gap)));
    const noise = (random() + random() + random() - 1.5) * volatility * 2;
    const move = trend + noise;
    close = round(Math.max(0.01, open * (1 + move)));
    const upperWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const lowerWick = Math.max(0.01, round(open * volatility * (0.12 + random() * 0.7)));
    const volume = Math.round(baseVolume * (0.65 + random() * 0.8
      + Math.abs(move) / volatility * 0.18 + (i % 31 === 0 ? 1.5 : 0)));
    bars.push({ time: startTime + i * intervalSec, open,
      high: round(Math.max(open, close) + upperWick),
      low: round(Math.max(0.01, Math.min(open, close) - lowerWick)),
      close, volume });
  }
  return bars;
}
const start = 1700000000;
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px';
const status = document.createElement('div');
status.style.cssText = 'padding:0 8px 8px;color:light-dark(#686868,#94a3b8);font:12px sans-serif';
status.setAttribute('role', 'status');
const host = document.createElement('div');
host.style.height = '380px';
el.append(controls, status, host);
const chart = lib.createChart(host, { timezone: 'Etc/UTC', branding: false });
chart.setDataContext({ symbol: 'SOURCE', interval: '1m' });
const source = chart.addSeries('line', { style: { color: '#64748b' } });
source.setData(stockBars(start, 12, 60, 100, 9, 0.008).map(bar => ({ time: bar.time, value: bar.close })));
// The provider's own simulated series, before any offset or revision.
const external = stockBars(start, 12, 60, 20, 11, 0.03).map(bar => bar.close);
let tailRevision = 0, historyRevision = 0, providerNumber = 1, study, disposed = false;
const pending = new Set();
const render = () => {
if (!disposed) status.textContent = 'Provider ' + providerNumber + '; ' + (study?.dataStatus()?.state ?? 'loading')
  + '; responses waiting: ' + pending.size;
};
const makeProvider = offset => ({
requestBars: async ({ from, to }) => source.getData().filter(bar => bar.time >= from && bar.time <= to),
loadPoints: context => new Promise((resolve, reject) => {
  const historical = context.asOf !== undefined && context.asOf < start + 600;
  const points = Array.from({ length: 12 }, (_, i) => ({ time: start + i * 60,
    values: { value: external[i] + offset + (historical ? 0 : historyRevision)
      + (i === 11 && !historical ? tailRevision : 0) } }))
    .filter(point => point.time >= context.from && point.time <= context.to
      && (context.asOf === undefined || point.time <= context.asOf));
  const finish = error => {
    pending.delete(release);
    context.signal?.removeEventListener('abort', abort);
    if (error) reject(error); else resolve(points);
    render();
  };
  const release = () => finish();
  const abort = () => finish(new DOMException('Request cancelled', 'AbortError'));
  if (context.signal?.aborted) { abort(); return; }
  context.signal?.addEventListener('abort', abort, { once: true });
  pending.add(release);
  render();
}),
});
let provider = makeProvider(0);
chart.setBarsProvider(provider);
lib.registerIndicator(lib.createTier2Indicator({
id: 'demo-external-revisions', name: 'External value', placement: 'pane', inputs: [],
plots: [{ key: 'value', type: 'line', style: { color: '#4f8cff', lineWidth: 3, markers: true, markerRadius: 4 } }],
supportsReplay: true,
fetch: context => provider.loadPoints(context),
}));
study = chart.addIndicator('demo-external-revisions');
chart.setPaneWeight(study.paneIndex, 0.8);
chart.fitContent();
const unsubscribe = study.subscribeDataStatus(() => queueMicrotask(render));
for (const [label, action] of [
['Release history', () => { for (const release of [...pending]) release(); }],
['Update same candle', () => {
  tailRevision += 5;
  const bar = source.getData().slice(-1)[0];
  source.update({ time: bar.time, value: bar.close + 0.25 });
}],
['Revise history', () => { historyRevision += 10; chart.invalidateRequestedData(); }],
['Replace provider', () => {
  providerNumber++; tailRevision = 0; historyRevision = 0;
  provider = makeProvider((providerNumber - 1) * 100);
  chart.setBarsProvider(provider);
}],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onclick = () => { action(); render(); };
controls.appendChild(button);
}
const destroy = chart.destroy.bind(chart);
chart.destroy = () => { disposed = true; unsubscribe(); destroy(); };
render();
return chart;

const start = 1700000000;
el.style.display = 'flex';
el.style.flexDirection = 'column';
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px 64px 8px 8px';
const status = document.createElement('div');
status.style.cssText = 'padding:0 8px 8px;color:light-dark(#686868,#94a3b8);font:12px/18px monospace;min-height:36px';
status.setAttribute('role', 'status');
const host = document.createElement('div');
host.style.cssText = 'flex:1;min-height:180px';
el.append(controls, status, host);
const chart = lib.createChart(host, { timezone: 'Etc/UTC', branding: false, animAutoscale: false });
chart.setDataContext({ symbol: 'DEPENDENT', interval: '1m' });
const prices = chart.addSeries('line', { style: { color: '#64748b', lineWidth: 1 } });
const original = () => [1, 3, 5, 7].map((value, index) => ({ time: start + index * 60, value }));
prices.setData(original());
const addProducer = () => chart.addIndicator('sma', {
length: 2, color: '#4f8cff', 'ma:width': 3, 'ma:type': 'line-markers',
});
let producer = addProducer();
let consumer = chart.addIndicator('sma', {
length: 2, color: '#f5a623', 'ma:width': 3, 'ma:type': 'line-markers',
source: { kind: 'indicator', instanceId: producer.id, plotKey: 'ma' },
});
const buttons = new Map();
const bound = () => producer && consumer.settings().source.instanceId === producer.id;
const render = () => {
const values = consumer.values().ma;
status.textContent = 'Producer: ' + (producer ? 'length ' + producer.settings().length : 'removed')
  + '; downstream ' + JSON.stringify(values) + '; ' + (consumer.dataStatus()?.state ?? 'ready');
for (const [label, button] of buttons) {
  button.disabled = label === 'Add replacement' ? Boolean(producer)
    : label === 'Rebind source' ? !producer || Boolean(bound())
    : label === 'Restore reversed save' ? !bound()
    : label === 'Swap order' ? !producer || producer.paneIndex !== consumer.paneIndex
    : ['Producer length 2', 'Producer length 3', 'Toggle producer', 'Move producer', 'Remove producer'].includes(label) ? !producer : false;
  button.style.opacity = button.disabled ? '0.45' : '1';
  button.style.cursor = button.disabled ? 'default' : 'pointer';
}
};
for (const [label, action] of [
['Last close 9', () => prices.update({ time: start + 180, value: 9 })],
['Reset prices', () => prices.setData(original())],
['Producer length 2', () => producer.setSettings({ length: 2 })],
['Producer length 3', () => producer.setSettings({ length: 3 })],
['Toggle producer', () => producer.setVisible(!producer.visible())],
['Move producer', () => chart.moveIndicator(producer.id, producer.paneIndex === 0 ? chart.panes().length : 0)],
['Swap order', () => {
  const display = chart.indicators();
  chart.reorderIndicator(producer.id, display.indexOf(producer) < display.indexOf(consumer) ? 1 : -1);
}],
['Remove producer', () => { producer.remove(); producer = null; }],
['Add replacement', () => { producer = addProducer(); }],
['Rebind source', () => consumer.setSettings({ source: { kind: 'indicator', instanceId: producer.id, plotKey: 'ma' } })],
['Restore reversed save', () => {
  const producerId = producer.id, consumerId = consumer.id;
  const saved = chart.getState();
  saved.indicators = [saved.indicators.find(item => item.instanceId === consumerId),
    saved.indicators.find(item => item.instanceId === producerId)];
  const report = chart.restoreState(saved);
  if (!report.applied) throw new Error(report.reason);
  producer = chart.indicators().find(item => item.id === producerId);
  consumer = chart.indicators().find(item => item.id === consumerId);
}],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 9px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);font:12px sans-serif';
button.onclick = () => { action(); chart.fitContent(); render(); };
buttons.set(label, button);
controls.appendChild(button);
}
chart.fitContent();
render();
return chart;

const start = 1700000040;
let clock = start + 11 * 60 + 30, replay = null, disposed = false;
const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px';
const status = document.createElement('div');
status.style.cssText = 'padding:0 8px 8px;color:light-dark(#686868,#94a3b8);font:12px sans-serif';
status.setAttribute('role', 'status');
const host = document.createElement('div');
host.style.height = '340px';
const log = document.createElement('pre');
log.setAttribute('role', 'log');
log.setAttribute('aria-label', 'Indicator alert events');
log.style.cssText = 'height:132px;overflow:auto;margin:8px;padding:8px;background:light-dark(#f5f5f5,#101827);color:light-dark(#151515,#cbd5e1);font:12px/18px monospace;scrollbar-color:light-dark(#d4d4d4,#334155) light-dark(#f5f5f5,#101827)';
el.append(controls, status, host, log);
const chart = lib.createChart(host, { timezone: 'Etc/UTC', branding: false, axisChrome: { clock: () => clock } });
chart.setDataContext({ symbol: 'SIGNAL', interval: '1m' });
const source = chart.addSeries('line', { style: { color: '#64748b', lineWidth: 1 } });
const initial = () => Array.from({ length: 12 }, (_, i) => ({ time: start + i * 60, value: i === 4 || i === 5 ? 110 : 100 }));
source.setData(initial(), { confirmation: 'forming' });
const frequencies = ['everyUpdate', 'oncePerBar', 'onBarClose', 'once'];
lib.registerIndicator({
id: 'demo-indicator-alert-policies', name: 'Live threshold', placement: 'onchart', inputs: [],
plots: [{ key: 'value', type: 'line', style: { color: '#4f8cff', lineWidth: 3, markers: true, markerRadius: 4 } }],
calc: bars => ({ value: bars.map(bar => bar.close) }),
alerts: frequencies.map(frequency => ({
  id: frequency, title: frequency, frequency,
  when: ({ values, index }) => values.value[index] >= 105,
})),
});
chart.addIndicator('demo-indicator-alert-policies');
source.priceScale().setAutoScale(false);
source.priceScale().setPriceRange({ min: 95, max: 115 });
chart.fitContent();
const events = [], liveButtons = [];
const render = () => {
if (disposed) return;
const tail = source.getData().slice(-1)[0];
status.textContent = (replay ? 'Replay' : 'Live') + '; bar ' + ((tail.time - start) / 60)
  + '; value ' + tail.close + '; events ' + events.length;
log.textContent = events.length ? events.join(String.fromCharCode(10)) : 'No live alerts yet.';
log.scrollTop = log.scrollHeight;
for (const button of liveButtons) {
  button.disabled = Boolean(replay);
  button.style.opacity = replay ? '0.45' : '1';
  button.style.cursor = replay ? 'not-allowed' : 'pointer';
}
};
const unsubscribe = chart.on('indicator:alert', event => {
if (event.indicatorId !== 'demo-indicator-alert-policies') return;
events.push(event.alertId + ' @ bar ' + ((event.time - start) / 60));
render();
});
const tail = () => source.getData().slice(-1)[0];
for (const [label, action] of [
['Below threshold', () => source.update({ time: tail().time, value: 100 }, { confirmation: 'forming' })],
['Cross threshold', () => source.update({ time: tail().time, value: 110 }, { confirmation: 'forming' })],
['Repeat tick', () => source.update(tail())],
['Confirm bar', () => source.update(tail(), { confirmation: 'confirmed' })],
['Close by clock', () => {
  clock = tail().time + 60;
  source.update(tail(), { confirmation: 'auto' });
}],
['Append bar', () => {
  const time = tail().time + 60;
  clock = time + 30;
  source.update({ time, value: 100 }, { confirmation: 'forming' });
  chart.fitContent();
}],
['Reset history', () => {
  clock = start + 11 * 60 + 30;
  source.setData(initial(), { confirmation: 'forming' });
  chart.fitContent();
}],
['Toggle replay', () => {
  if (replay) { replay.stop(); replay = null; }
  else replay = new lib.ReplayController(chart, { series: source, startIndex: 5 });
}],
]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onclick = () => { action(); render(); };
controls.appendChild(button);
if (label !== 'Toggle replay') liveButtons.push(button);
}
const destroy = chart.destroy.bind(chart);
chart.destroy = () => { disposed = true; replay?.stop(); unsubscribe(); destroy(); };
render();
return chart;

const controls = document.createElement('div');
controls.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:8px';
el.appendChild(controls);
const host = document.createElement('div');
host.style.height = '380px';
el.appendChild(host);
lib.registerIndicator({
id: 'demo-study-scale-move', name: 'Moving band', placement: 'pane', inputs: [],
plots: [
  { key: 'upper', type: 'line', title: 'Upper', style: { color: '#26a69a' } },
  { key: 'lower', type: 'line', title: 'Lower', style: { color: '#4f8cff' } },
],
calc(bars) {
  // Where each close sits in its last twenty bars' range, 0 to 100, carried
  // as a band of fixed width.
  const position = bars.map((bar, i) => {
    const recent = bars.slice(Math.max(0, i - 19), i + 1);
    const high = Math.max(...recent.map(b => b.high)), low = Math.min(...recent.map(b => b.low));
    return high > low ? (bar.close - low) / (high - low) * 100 : 50;
  });
  return { upper: position.map(p => 55 + p * 0.3), lower: position.map(p => 15 + p * 0.3) };
},
fills: [{ between: ['upper', 'lower'], opacity: 0.35,
  gradient: { topValue: 80, bottomValue: 20, topColor: '#26a69a', bottomColor: '#4f8cff' } }],
levels: () => [{ price: 50, title: 'Middle', color: '#e8a23a' }],
range: () => ({ min: 0, max: 100 }),
});
const chart = lib.createChart(host);
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 100, 60));
const study = chart.addIndicator('demo-study-scale-move');
chart.setPaneWeight(study.paneIndex, 0.7);
const left = chart.panes()[study.paneIndex].scaleFor('left');
left.setAutoScale(false);
left.setPriceRange({ min: -25, max: 125 });
chart.fitContent();
for (const [label, id] of [['Right', 'right'], ['Left', 'left'], ['Hidden', 'overlay:band'], ['Descriptor defaults', null]]) {
const button = document.createElement('button');
button.textContent = label;
button.style.cssText = 'padding:5px 10px;border:1px solid light-dark(#e4e4e4,#334155);border-radius:4px;background:light-dark(#fff,#172033);color:light-dark(#151515,#e2e8f0);cursor:pointer';
button.onclick = () => {
  study.setPriceScale(id);
  for (const child of controls.children) {
    const on = child === button;
    child.style.background = on ? '#2563eb' : 'light-dark(#fff,#172033)';
    child.style.color = on ? '#fff' : 'light-dark(#151515,#e2e8f0)';
  }
};
controls.appendChild(button);
}
return chart;