Skip to content

Financial

Session-anchored intraday

Hourly bars that start at the 09:30 open rather than at 10:00, with pre-market and after-hours kept in phase.

Session-anchored intraday@ortex-charts/financial@ortex-charts/math
Loading session-anchored intraday…
Hourly bars that start at the 09:30 open rather than at 10:00, with pre-market and after-hours kept in phase.

What this example is for

An hourly chart of a stock whose session opens at 09:30 has a decision to make, and most libraries make the wrong one: they bucket from midnight, so the first hour runs 10:00 to 11:00 and every bar after it is out of phase with the trading day. These bars are anchored to the open. Reach for this whenever intraday bars are built or aggregated in the browser.

intraday-session.ts
import { createFinancialChart } from "@ortex-charts/financial";
import { SAMPLE_LOGO } from "@/lib/constants";
import { aggregateBars, anchoredResolution, barSeriesFromRows, barSeriesToRows, parseResolution } from "@ortex-charts/math";

// The regular session of a United States equity. Pre-market from 04:00 and
// after-hours to 20:00 are in the data and stay on the same grid.
const SESSION = "0930-1600";
const HOURLY = parseResolution("60");

const prints = barSeriesFromRows(rows);
// Two aggregations of the same prints: one anchored to the session open,
// one on the plain clock grid.
const anchored = barSeriesToRows(aggregateBars(prints, anchoredResolution(HOURLY, SESSION), TIME_ZONE));
const clockAligned = barSeriesToRows(aggregateBars(prints, HOURLY, TIME_ZONE));

const chart = createFinancialChart(box, {
    legend: { logo: SAMPLE_LOGO }, // the company mark beside the symbol in the legend
    theme,
    timeZone: TIME_ZONE,
    resolution: "60",
    // The chart anchors its own bar boundaries, axis labels and crosshair to
    // the same session. A datafeed sets this from `SymbolInfo.session`.
    session: SESSION,
    volume: false, // This sample feed carries prices without sizes.
    data: anchored,
});

/** Switch the anchor off and the first hour of the day becomes 10:00 again. */
function setAnchored(on: boolean): void {
    chart.chart.applyOptions({ session: on ? SESSION : "" });
    chart.setData(on ? anchored : clockAligned);
}

More financial examples