Skip to content

Your data

A live tick stream

Ticks arriving every 200 ms, aggregated into the forming bar, with the price line and axis label following.

A live tick stream@ortex-charts/financial
Loading a live tick stream…
Ticks arriving every 200 ms, aggregated into the forming bar, with the price line and axis label following.

What this example is for

Ticks arriving every 200 milliseconds, folded into the forming bar, with the price line and the axis label following. Reach for this to see what a live feed looks like before wiring your own: the same call takes a WebSocket, a polling source or ticks you push yourself, and the chart coalesces the work onto one animation frame.

live-stream.ts
import { createFinancialChart, ManualSource, type LiveItem } from "@ortex-charts/financial";
import { SAMPLE_LOGO } from "@/lib/constants";
import { parseResolution, ticksToBars, type Bar, type Tick } from "@ortex-charts/math";

// A host builds this from its feed, usually with `websocketSource`:
//     const source = websocketSource<LiveItem>({ url, parse: (raw) => JSON.parse(String(raw)) });
// This page has no market data connection, so the ticks below are simulated
// and pushed by hand into a `ManualSource`, which is the same interface.
const source = new ManualSource<LiveItem>();

const chart = createFinancialChart(el, {
    legend: { logo: SAMPLE_LOGO }, // the company mark beside the symbol in the legend
    theme,
    timeZone: TIME_ZONE,
    resolution: RESOLUTION,
    watermark: { text: SYMBOL, visible: true, fontSize: 36 },
    seriesOptions: { priceFormat: { type: "price", precision: 2, minMove: 0.01 }, lastValueVisible: true, priceLineVisible: true },
    timeScale: { barSpacing: 9, rightOffsetPx: 90, followRealtime: true },
    data: history,
});
chart.addIndicator("ema", { length: 9 });

let ticks = 0;
let formed = 0;
// One call subscribes the chart to the source and returns the unsubscribe.
const stop = chart.live(source, {
    resolution: RESOLUTION,
    timeZone: TIME_ZONE,
    onUpdate: (item, appended) => {
        ticks++;
        if (appended) formed++;
        if (ticks % 3 === 0 && "close" in item) {
            status(`${ticks} ticks   last ${item.close.toFixed(2)}   ${formed} new bar${formed === 1 ? "" : "s"} since the stream opened`);
        }
    },
});

More your data examples