Embed Chartix

Your own indicators, in every option

Whichever way you embed, the chart keeps support for custom indicators: write one in JavaScript, or in Thesis, and it is computed by the chart on every update, next to the built-in ones. An iframe sends it as a message, the container takes it as a function, and the library registers it in code.

01 · iframe

Paste the tag. The chart opens on the market and timeframe in the URL, live.

<iframe
  src="https://chartix.crtx.space/ck/embed.html?symbol=BTCUSDT&period=H4&theme=light"
  style="width:100%; height:520px; border:0"
  title="Chartix chart"></iframe>

URL parameters

Parameter	Example	What it does
symbol	BTCUSDT	the market to open
period	H4	M1, M5, M15, M30, H1, H4, D1, W1, MN1
theme	light	light or dark
channel	any id	keeps several charts on one page apart

Control it with messages

The page that holds the iframe can drive the chart with postMessage; every request gets an answer with the same id.

const chart = document.querySelector('iframe').contentWindow;
const send = (op, args) => chart.postMessage(
  { source: 'chart-kit-host', id: crypto.randomUUID(), op, args }, 'https://chartix.crtx.space');

send('command', { command: { kind: 'setSymbol', symbol: 'ETHUSDT' } });
send('command', { command: { kind: 'setPeriod', period: 'H1' } });

// replies come back as messages with source: 'chart-kit'
addEventListener('message', (e) => { if (e.data?.source === 'chart-kit') console.log(e.data); });

Custom indicator

send('study.save', {
  name: 'Range position',
  source: `study({ name: 'Range position', overlay: false, inputs: { length: 20 }, plots: ['position'],
    calc(bars, inputs, out) { /* same as above */ } })`,
});

02 · Container

Mark any element with data-chartix and load the script. The chart fills the element, and the element's attributes set the market, the timeframe and the indicators it opens with.

<div data-chartix
     data-symbol="BTCUSDT" data-period="H4"
     data-indicators="BollingerBands,RelativeStrengthIndex"
     style="height:520px"></div>

<script src="https://chartix.crtx.space/embed.js"></script>

From JavaScript

const chart = await Chartix.ready(document.querySelector('[data-chartix]'));

await chart.setSymbol('ETHUSDT');
await chart.setPeriod('H1');
const ema = await chart.addIndicator('ExponentialMovingAverage', { periodCount: 50 });
await chart.remove(ema);

Custom indicator

A function that fills one output array per plot. The chart calls it whenever the bars change.

await chart.addCustomIndicator({
  name: 'Range position',
  overlay: false,
  inputs: { length: 20 },
  plots: ['position'],
  calc(bars, inputs, out) {
    const n = inputs.length;
    for (let i = 0; i < bars.count; i++) {
      if (i < n - 1) { out.position[i] = NaN; continue; }
      let hi = -Infinity, lo = Infinity;
      for (let j = i - n + 1; j <= i; j++) { hi = Math.max(hi, bars.high[j]); lo = Math.min(lo, bars.low[j]); }
      out.position[i] = hi === lo ? 50 : (bars.close[i] - lo) * 100 / (hi - lo);
    }
  },
});

03 · Library

For a product built around the chart. The open library renders directly into your application: no frame in between, your own data feed, events for the crosshair, clicks and drawings, and full control of the layout.

// Full integration: the chart renders straight into your app, with your own data feed and events.
// The package name and the exact API are published with the open-source release.
import { createChart } from '<chartix-chart-library>';

const chart = createChart(document.getElementById('chart'), {
  symbol: 'BTCUSDT', period: 'H4', theme: 'light',
  datafeed: myFeed,                 // your bars and ticks
});

chart.on('crosshair', (point) => showPrice(point));
chart.addIndicator('BollingerBands');

Custom indicators are registered the same way as in the container, and Thesis scripts compiled by the engine plug in as indicators too.

Commands

The same commands work through the iframe messages, the container methods and the library.

Command	Arguments	What it does
setSymbol	{ symbol }	switch the market
setPeriod	{ period }	switch the timeframe
addIndicator	{ indicator: { guid, params } }	add a built-in indicator; guids come from the catalog
removeIndicator	{ id }	remove an indicator
catalog	-	every built-in indicator with its guid and inputs
state	-	what is on the chart now
study.save	{ name, source }	add your own indicator
study.remove	{ id }	remove your own indicator