Skip to content

Financial

Stock chart

Ten years of IBM daily bars with a moving average pair, volume, earnings markers and a crosshair readout.

Stock chart@ortex-charts/financial
Loading stock chart…
Ten years of IBM daily bars with a moving average pair, volume, earnings markers and a crosshair readout.

What this example is for

This is the chart most applications need and the one most integrations start from: a decade of daily bars, a fast and a slow moving average, a volume pane and the crosshair readout in the legend. Reach for it when the job is a symbol page, a research view or a portfolio holding. Everything on it is four options and one call, and the code below is the code that drew it.

stock-chart.ts
import { createFinancialChart, type SeriesMarker } from "@ortex-charts/financial";
import { SAMPLE_LOGO } from "@/lib/constants";

const chart = createFinancialChart(el, {
    legend: { logo: SAMPLE_LOGO }, // the company mark beside the symbol in the legend
    theme, // "dark", "light", or your own token set
    timeZone: TIME_ZONE,
    resolution: "1D",
    watermark: { text: SYMBOL, visible: true, fontSize: 44 },
    seriesOptions: { title: SYMBOL },
    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);

More financial examples