One script tag.
Our chart on your page.

Put a container where the chart should sit, load the script once, and create the chart. Without a key it runs on demo data (simulated prices, tagged DEMO), which is enough to try it on your page.

<div id="chart"></div>
<script src="https://arth.live/sdk/v1/charts.js"></script>
<script>
  const chart = ArthCharts.create('#chart', {symbol: 'RELIANCE', interval: '15m', theme: 'dark', height: 520});
  chart.on('symbolChange', (e) => console.log('Now showing', e.symbol));
</script>

With your key, the chart shows market data:

ArthCharts.create('#chart', {
  symbol: 'NIFTY 50',
  interval: '5m',
  apiKey: 'ak_your_key_here',      // live data per your entitlement; checked against your site's origin
  indicators: ['volume', {kind: 'ema', period: 50}, 'rsi'],
});

The script is about 250 KB compressed and holds everything it needs: no other library, font or stylesheet. Its styles are scoped to the chart and never change your page. See it running: arth.live/embed/?symbol=RELIANCE.

container is an element or a CSS selector. Every option is optional; a value the chart cannot use falls back to the default, except a malformed apiKey or dataFeed, which throws so you see it at once.

create() returns a handle. Methods act on the active chart (the one the visitor last touched in a multi-chart layout).

setSymbol(symbol)

Shows another symbol on the active chart. Returns true when the chart took it.

setInterval(interval)

Changes the interval of the active chart. Returns true when the data source serves it.

addIndicator(kind | {kind, period})

Adds a study to the active chart. Returns its id, or null.

removeIndicator(id | kind)

Removes a study by the id addIndicator gave, or every study of that kind. Returns true when one was removed.

setTheme('dark' | 'light')

Switches the colours.

on(event, fn)

Listens to an event. Returns a function that stops listening.

destroy()

Removes the chart and everything it added to the container. The handle does nothing after this.

ready

{version, tier}. The chart is mounted and the methods work. Call methods after this.

symbolChange

{symbol}. The active chart shows another symbol (from your code or the visitor).

intervalChange

{interval}. The active chart changed its interval.

crosshair

{pane, symbol, interval, time}. The crosshair moved over a bar (time in epoch ms) or left the chart (time null).

error

{code, message}. The key was refused (invalid_key, origin_not_allowed, network...). The chart stays on screen.

For sites that cannot run our script, frame the embed page. Query parameters: symbol, interval, theme, key, layout, lang and indicators (comma list, ema:50,rsi). With a key, the origin of the page that frames it must be on the key’s list.

<iframe src="https://arth.live/embed/?symbol=RELIANCE&interval=15m&theme=dark&key=ak_your_key_here"
        width="100%" height="520" style="border:0" title="Chart" loading="lazy"></iframe>

The frame tells your page what happens in it with postMessage: {source: "arth-charts", event, payload} for ready, symbolChange, intervalChange and error.

Pass dataFeed and the chart reads bars only from you; no market data is fetched from Arth.live. If you also pass a key, the chart makes one call to check its tier (for the mark), nothing more.

getBars(symbol, interval, {to, limit})

Required. Resolve to bars oldest first: {time, open, high, low, close, volume?}, time the bar’s open time in epoch milliseconds. No to: the newest limit bars (the last may still be forming). With to: up to limit bars before that time, for scrolling back; an empty list means no more history. Bad bars (not numbers) are skipped; two bars with the same time keep the last.

subscribeBars(symbol, interval, onBar)

Optional. Call onBar(bar) for live updates: the same time as the last bar replaces it, a later time starts a new bar, an older one is ignored. Return a function that stops the updates; the chart calls it when the symbol or interval changes and on destroy().

searchSymbols(query)

Optional. Resolve to [{symbol, name?, exchange?}] for the chart’s symbol search.

intervals

Optional. The intervals you serve, in the order the interval strip shows them. Default: all twelve.

label

Optional. A short tag beside the symbol, such as DELAYED.

const myFeed = {
  // oldest first; time = the bar's open time in epoch milliseconds
  async getBars(symbol, interval, {to, limit}) {
    const res = await fetch(`/my-api/bars?s=${encodeURIComponent(symbol)}&i=${interval}&limit=${limit}${to ? '&to=' + to : ''}`);
    return (await res.json()).map((b) => ({time: b.t, open: b.o, high: b.h, low: b.l, close: b.c, volume: b.v}));
  },
  // optional: live updates; same time replaces the forming bar, a newer time starts a new one
  subscribeBars(symbol, interval, onBar) {
    const ws = new WebSocket('wss://my-feed.example/bars');
    ws.onmessage = (m) => onBar(JSON.parse(m.data));
    return () => ws.close();
  },
  // optional: the chart's "change symbol" search
  async searchSymbols(query) { return [{symbol: 'RELIANCE', name: 'Reliance Industries', exchange: 'NSE'}]; },
  intervals: ['1m', '5m', '15m', '1h', '1D'],   // optional, default: all
  label: 'DELAYED',                             // optional tag beside the symbol
};
ArthCharts.create('#chart', {symbol: 'RELIANCE', dataFeed: myFeed});

Free licence (no key, or a free key): the chart always shows “Charts by Arth.live”, linked to arth.live, in a slim strip under the chart. No option turns it off, and the chart puts it back if a page hides or removes it. Keeping it visible is a condition of the free licence.

White-label (a white-label key, paid): no mark, and your own name, logo and accent colour:

// white-label keys only; ignored on the free licence
ArthCharts.create('#chart', {
  apiKey: 'ak_your_whitelabel_key',
  brand: {name: 'Your Broker', logoUrl: 'https://cdn.yourbroker.example/logo.svg', accent: '#0a7cff'},
});

A key is public by design (it sits in your page). It works only from the origins listed on it, and we can switch it off at any time. To get a key, apply here with your platform name, website and every origin the chart will run on.

A key carries a list of origins, one per line. The chart works on any page whose origin is on that list, so one key can serve your main site, your app’s web view, your blog and your staging site.

• https://www.yoursite.example matches that exact origin only.
• https://*.yoursite.example matches every subdomain, such as https://news.yoursite.example or https://app.yoursite.example. It does not match https://yoursite.example itself: list that on its own line.
• Scheme and port must match: http:// and https:// are separate entries, and so is a site on a non-standard port.
• With the iframe embed, the origin checked is the page that frames the chart.

Send us every origin when you apply; to add one later, write to us and we update the key. A page on an origin not on the list gets the origin_not_allowed error.

• One chart per container; as many containers per page as you need. Call destroy() before creating another chart in the same container.
• Keys work only from the origins listed on them (https://www.yoursite.example; https://*.yoursite.example for subdomains). Send us every origin you use, including staging.
• A key gives a read-only chart token for 30 minutes; the chart renews it by itself. With a key, the newest bars are fetched again every 5 seconds while the page is visible.
• The key route answers up to 60 requests a minute per visitor IP. Fair-use limits apply to the free licence; heavy use is discussed with you before any limit is applied.
• History loads 500 bars at a time; older bars load as the visitor scrolls back.
• Market data through a key follows the entitlement of the account the key was issued to. Arth.live is software, not a market-data vendor; exchange data terms stay with you and your data vendor.
• The chart displays and analyses. It places no orders.

Arth.live is software. It gives no buy or sell advice and places no orders. Licence terms in short.