Skip to content

Embedding

Embed a chart

Put a live chart on your own website. It is free, it needs no account and no key, and it is two lines of HTML.

First, the one thing that is not optional

VerticalProp ships the charting engine. The market data is yours. An embedded chart on your site asks YOUR page for every bar it draws, we do not serve the data, and a chart that arrives without a feed says so rather than quietly drawing ours.

In practice that is one attribute and one function object. The datafeed page has a complete implementation over a public keyless endpoint that runs from your own page on the first try, copy it, change the symbol map, done. If you have written a charting datafeed before, it is the same six methods and you are already finished.

Why: serving bars into arbitrary third-party sites is redistribution, and the vendors behind a market-data feed license that separately from displaying it. Bringing your own removes the question entirely, and it means the chart makes no request of ours at all, so nothing about which symbols your readers look at reaches us.

Build it

Set it up here and copy the result. The preview is framed by this page, which is first-party, so it draws from our own data; the snippet is for your site, where it will call the feed you name.

Colours
bg
text
grid
up
down
crosshair
muted
border
chrome
accent

Nothing here reaches the snippet until a colour differs from the theme's own — a snippet that spelled out all ten would pin today's palette into your page forever.

How it works

The chart runs in an iframe served from this site, not as a script in your page. That is deliberate and it is the whole safety story: none of our code runs in your page except a small loader whose entire job is to create the frame and listen for its height. It sets no cookies of yours, reads no storage of yours, adds nothing to your Content-Security-Policy, and cannot see anything else on the page.

The loader does two things: the resize handshake, the frame tells the page how tall the chart wants to be, so it is not letterboxed inside a fixed box, and carrying your datafeed across the frame boundary. A datafeed is normally an object the chart calls, and an object cannot cross an origin; the loader turns the frame’s requests back into method calls on yours, so you implement an ordinary object and never see the wire.

That second job is why the no-JavaScript iframe form is for a chart on THIS site, or for a page that implements the message protocol itself. Without something on your page to answer for the bars, a third-party frame has no data source. If your CMS strips <script> tags, the commonest reason an embed “does not work”, see the framework recipes for where to put the loader instead of in post content.

Options

Every option is a data- attribute on the placeholder (or a query parameter on the iframe URL). Anything not listed here is ignored rather than passed through.

  • symbol, required. A ticker (AAPL), a pair (BTC-USDT), an index (^GSPC), or a venue-qualified pair (BINANCE:BTCUSDT).
  • interval, 1, 5, 15, 30, 60, 240, 1D, 1W, 1M. Default 1D.
  • theme, light or dark. Default dark.
  • type, candles, bars, line, area.
  • toolbar, symbolSearch, legend, true or false.
  • priceAnimation, true or false. Default false; pass true to ease the last bar’s close, and the last-price line beside it, toward each live tick instead of snapping.
  • locale, a language tag, for display only.
  • timezone, the clock the time axis is read in: Europe/Paris. An IANA name, never an offset. Leave it out and the chart keeps the instrument’s own session, which is what a 24/7 crypto chart wants.
  • numberFormat, how every number is punctuated: standard (1,234.56), european (1.234,56), plain (1234,56) or spaced (1 234,56). Leave it out and the chart follows the reader’s own locale.
  • sessions, tinted trading-session bands behind the bars: us for the two US equity bands, or your own as label@HH:mm-HH:mm, read on the instrument’s clock. Leave it out and none are drawn.
  • colors, repaint the chart: bg:0b0f19,up:26a69a. Ten roles, hex values, and anything you leave out keeps the theme’s own. See styling.
  • calendar, 0 or 1. Economic releases in the time gutter, off unless asked for.
  • live, draw a live chart instead of the full one: line, or candle,window:900. Same data, same frame. See live charts.
  • indicators, comma-separated community-indicator ids. See below.
  • currency, draw the chart in another currency, naming the market its rate comes from: EUR:EURUSD. Display only. See display currency.
  • datafeed, the NAME of a feed your page registered with vpEmbed.datafeed(name, feed). Required for a chart on your own site; set as an attribute only, because the loader derives the rest.
A misspelled option falls back to its default, because a chart that refused to render over a typo would be a blank box on your page. A symbol we cannot load is an error state instead: showing a different instrument under your caption would be worse than showing nothing.

Community indicators

You can name published community indicators with indicators, and they run for every reader with no account and nothing to install. They are code somebody else wrote, so they execute inside a cross-site sandbox with no network access and no access to your page or to ours, the same isolation the terminal uses.

Readers can also connect their own VerticalProp account from the chart, which runs the indicators they have installed. That is entirely optional, it never asks for anything on your page, and what it grants is one permission: reading their indicator library. They can withdraw it at any time.

Attribution

The chart carries a small VerticalProp mark in its corner. There is no option to remove it not a parameter, not a setting, not a paid tier. It is what makes the chart free to use anywhere with no key and no account, and it is the only thing asked in return.

Or host the chart yourself

Everything above is the embed: a chart we host, that you point at. There is a third way to get it, and it is a different product rather than a bigger embed. The library is the chart as files you serve from your own origin, with your own market data wired in and the whole API in your page rather than across a boundary.

It is meant for a trading platform or an exchange, it is commercial, and it comes with the hosting, the datafeed and the upgrades as your job. For a chart in an article, on a landing page or in a dashboard, the embed is the smaller and better answer. Which one do you want lays the two side by side.

What to expect

Data comes from public market feeds and is delayed for some instruments; the chart says which, in the corner beside the symbol. Nothing here is a trading terminal, it draws prices, and it takes no orders.

Please do not put dozens of live charts on one page. Each is a real connection to a market feed, and a page that opens fifty of them is slow for your readers before it is expensive for anybody else.