Stock chart

import { createFinancialChart, type SeriesMarker } from "@ortex-charts/financial";

const chart = createFinancialChart(el, {
    theme, // "dark", "light", or your own token set
    timeZone: TIME_ZONE,
    resolution: "1D",
    watermark: { text: SYMBOL, visible: true, fontSize: 44 },
    data: bars, // [{ time, open, high, low, close, volume }, …]
});

chart.addIndicator("ema", { length: 21 });
chart.addIndicator("sma", { length: 200 });

// Anything the host knows about the company goes on as a marker.
chart.setMarkers(markers);

chart.chart.subscribeCrosshairMove((e) => {
    const v = e.index === null ? null : e.seriesValues.get(chart.main.id);
    status(
        v && "close" in v
            ? `O ${v.open.toFixed(2)}   H ${v.high.toFixed(2)}   L ${v.low.toFixed(2)}   C ${v.close.toFixed(2)}`
            : "",
    );
});

// Open on the last year rather than the whole decade.
chart.chart.timeScale.setVisibleRange(bars.length - 260, bars.length - 1);