Methods you call

const chart = vpEmbed.chart(document.querySelector('.vp-chart'));

await chart.setInterval('60');
const line = await chart.createOrderLine({ price: 42000, text: 'Bid' });
await line.set({ price: 42500 });      // one message, one repaint
await line.remove();

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"></div>

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-theme="light"></div>

const off = chart.on('intervalChanged', (e) => {
  console.log('now on', e.interval);
});

off();   // CALL what it returns when your component unmounts

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-interval="60"></div>

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-type="area"></div>

// The last thirty days. SECONDS, not milliseconds.
const to = Math.floor(Date.now() / 1000);
await chart.setVisibleRange({ from: to - 30 * 86400, to });

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-colors="bg:fffdf7,text:44403c,grid:e7e5e4,up:15803d,down:b91c1c"></div>

// Remember the reader's chart. Where you store it is yours; we keep nothing.
const state = await chart.saveState();
localStorage.setItem('their-chart', JSON.stringify(state));

const saved = localStorage.getItem('their-chart');
if (saved) await chart.loadState(JSON.parse(saved));

// Just the annotations. Your page still owns the instrument.
const drawings = await chart.getDrawings();
await fetch('/api/chart-notes', { method: 'POST', body: JSON.stringify(drawings) });

const drawings = await (await fetch('/api/chart-notes')).json();
await chart.setDrawings(drawings);

<div class="vp-chart"
     data-symbol="AAPL"
     data-datafeed="myfeed"
     data-timezone="America/New_York"></div>

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-numberFormat="european"></div>

<div class="vp-chart"
     data-symbol="AAPL"
     data-datafeed="myfeed"
     data-sessions="us"></div>

// Pin the chart to the window you chose.
await chart.setVisibleRange({ from: 1767225600, to: 1769904000 });
await chart.setScrollEnabled(false);
await chart.setZoomEnabled(false);

await chart.setZoomEnabled(false);

// Remove ONE indicator rather than all of them.
const studies = await chart.getStudies();   // [{ id, name }]
const rsi = studies.find((s) => s.name === 'RSI');
if (rsi) await chart.removeEntity(rsi.id);

// Build your own indicator picker from what the engine actually ships.
const available = await chart.getAvailableStudies();   // [{ id, name }]
for (const study of available) addRow(study.name, () => chart.createStudy(study.id));

const csv = await chart.exportData({ includeTime: true });
if (csv) download('bars.csv', csv);

// One badge per fill, under the bar it happened on.
await chart.setMarks([
  {
    id: 'fill-1',
    time: 1767225600,          // SECONDS, and the BAR's own time
    label: 'B',                // 1-3 characters, drawn inside the badge
    color: '#26a69a',
    labelFontColor: '#ffffff',
    text: ['Bought 0.5 BTC @ 61,240', 'Filled - market'],
  },
  {
    id: 'fill-2',
    time: 1767312000,
    label: 'S',
    color: '#ef5350',
    labelFontColor: '#ffffff',
    text: 'Sold 0.5 BTC @ 64,980',
  },
]);

await chart.clearMarks();

const watch = await chart.createToolbarButton({
  text: 'Watch',
  tooltip: 'Add this instrument to your watchlist',
  align: 'right',          // left puts it among the chart's own controls
});

await watch.set({ text: 'Watching', active: true });

// …or the sugar, for the two a button changes most
await watch.setText('Watching');
await watch.setActive(true);

await watch.remove();   // removing one already gone is not an error

await chart.setTrading({ quantity: 0.5, unitLabel: 'BTC' });

chart.on('orderSubmit', (e) => {
  // A REQUEST, not a fill. Your page decides.
  placeOrder(e.side, e.type, e.price, e.quantity, e.symbol);
});

await chart.setTrading(null);   // withdraw the rows again

const bid = await chart.createOrderLine({
  price: 64500,
  text: 'Buy limit',
  quantity: '1.5',
  lineColor: '#26a69a',
  editable: true,        // the reader may drag it
  cancellable: true,     // …and dismiss it
});

const pos = await chart.createPositionLine({
  price: 64000,
  text: 'Long 2 BTC',
  quantity: '2',
  takeProfit: 68000,
  stopLoss: 62500,
});

await chart.createExecutionShape({
  time: 1767225600,      // SECONDS. A bar's own time field is milliseconds
  price: 64100,
  direction: 'buy',
  text: 'Filled 1.5',
  arrowColor: '#26a69a',
});

await pos.set({ stopLoss: 63000 });    // trail it up
await pos.set({ takeProfit: null });   // cancel the target
await bid.setPrice(64200);             // sugar for set({ price })

await bid.remove();   // idempotent, so cleanup need not track what is left

// Remove ONE drawing rather than all of them.
const shapes = await chart.getShapes();   // [{ id, name }]
for (const shape of shapes) {
  if (shape.name === 'horizontal_line') await chart.removeEntity(shape.id);
}

const level = await chart.createShape(
  { time: 1767225600, price: 65000 },
  { shape: 'horizontal_line', text: 'Resistance', color: '#ef5350' },
);

const trend = await chart.createMultipointShape(
  [{ time: 1766620800, price: 61000 },
   { time: 1767830400, price: 66000 }],
  { shape: 'trend_line', color: '#787b86' },
);

await chart.removeEntity(level);   // the id createShape or createStudy gave you

await chart.removeAllShapes();   // only the drawings YOU placed

const ma  = await chart.createStudy('Simple Moving Average', [20]);
const rsi = await chart.createStudy('RSI', [14]);

// Names resolve case-insensitively, and an id works: 'sma' is the same study.

await chart.removeAllStudies();

const symbol = await chart.getSymbol();   // 'BTC-USDT'

const interval = await chart.getInterval();   // '60'

const type = await chart.getChartType();   // 'candles'

const { from, to } = await chart.getVisibleRange();   // seconds

const scale = await chart.getVisiblePriceRange();
if (scale) {
  console.log(scale.from, scale.to);          // visible prices
  console.log(scale.top, scale.height);       // the plot band, in frame pixels
  console.log(scale.scale, scale.inverted);   // 'linear' | 'log', and the flip
}

const chart = vpEmbed.chart(document.querySelector('.vp-chart'));
const canvas = document.querySelector('#overlay');   // positioned over the iframe

function draw() {
  const scale = chart.getPriceScale();
  if (!scale) return;                                // not laid out yet

  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#22c55e';

  for (const level of myLevels) {
    const y = chart.priceToY(level);                 // synchronous, no round trip
    ctx.beginPath();
    ctx.moveTo(scale.left, y);
    ctx.lineTo(scale.left + scale.width, y);
    ctx.stroke();
  }
}

chart.on('priceScaleChanged', draw);                 // fires once at mount, then on every move