Guides

Live charts

A small chart whose tip, price axis and time window ease toward every tick. One attribute turns an embed into one; the data, the frame and the rules are the full chart's.

One attribute

A live line on your own page

<div class="vp-chart"
     data-symbol="BTC-USDT"
     data-datafeed="myfeed"
     data-live="line"
     data-height="320"></div>
<script src="https://view.verticalprop.com/embed.js"></script>

Or live=line on the frame URL, if you write the iframe yourself. data-live="candle" draws candles instead. Everything else about the embed is unchanged: the same iframe, the same loader, the same data-datafeed.

data-live="line" on one-minute bars. The tip glides toward each new price and the window slides left continuously.

data-live="candle,window:1800": the last half hour as candles, the forming one growing from its open.

Where the bars come from

From the same datafeed as the full chart, through the same calls in the same order: onReady, then resolveSymbol, then one getBars for the visible window, then subscribeBars for the moving edge. A feed you already wrote for the full chart works here with no change. The contract is on Methods you implement.

In line mode the line is each closed bar's close, then every tick you send, so it keeps moving between bars rather than once a bar. In candle mode closed bars are candles and the bar your ticks update is the live one; a tick for a newer bar closes it.
Your symbol's pricescale decides how many decimals the header prints, exactly as it does on the full chart.
time is milliseconds and from / to are seconds, the same as everywhere else in the contract.

The rule about whose data it is does not change either. On a site that is not ours a live chart with no data-datafeed shows the same explanation the full chart does, naming the attribute that fixes it.

Options

Everything rides one attribute, as a comma list: the mode first, then key:value pairs. data-live="candle,window:900,accent:3b82f6,change:absolute" is a fifteen-minute candle window in blue, with the move in dollars rather than percent. Leave an option out and it takes its default.

Option	Values	Default	What it does
`line`	a bare word	yes	A line through the closes. `1` means the same.
`candle`	a bare word	no	Candles, the forming one growing as ticks arrive.
`window`	60 to 31,622,400 seconds	60 bars	How much time is visible. The default is sixty bars of the interval: an hour of one-minute bars.
`accent`	hex, `3b82f6`	the theme's	The line's colour; the rest of the palette is derived from it.
`value`	`1` · `0`	`1`	The large live price in the header.
`change`	`percent` · `absolute` · `off`	`percent`	The move since the start of the window, beside the price.
`momentum`	`1` · `0`	`1`	A glow and an arrow at the tip, coloured by the recent direction.
`exaggerate`	`1` · `0`	`0`	A tight price axis, so small moves fill the height.

Three of the embed's own parameters apply too: theme (light or dark), interval (the bar size; with none named a live chart opens on one-minute bars) and locale (how the numbers are written). A live chart asks for at most 1000 bars, so a very long window on a short interval starts part-way in.

A misspelled option falls back to its default and an unknown key is ignored, so a typo costs that one option, never the chart. A symbol your feed cannot resolve is shown as a message on the chart instead of a different instrument.

After it has mounted

chart.setSymbol(s) switches instrument and chart.setTheme(t) switches theme, without remounting. The drawing, trading and indicator methods drive the full chart, so on a live chart they are refused with a message saying so rather than silently doing nothing.

The credit

Every embedded live chart carries a small VerticalProp logo at the bottom-left of the plot, linking to VerticalProp. It is always shown, and no option or attribute turns it off.

Every other embed option is on URL parameters.