Performance

100,000 bars, timed here

Create the chart, set the data, wait for the first paint, and print the number your own browser just produced.

100,000 bars, timed here@ortex-charts/financial

Loading 100,000 bars, timed here…

Create the chart, set the data, wait for the first paint, and print the number your own browser just produced.

What this example is for

Every performance claim on this site is a number your own browser can produce. This creates a chart, sets 100,000 bars, waits for the frame that paints them and prints what it measured. Reach for it before you take anybody's benchmark on trust, including ours: run it on the machine your users have.

benchmark.ts

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

/**
 * Create the chart over `bars` — 100,000 synthetic one-minute bars, because the
 * count is the point here rather than the shape — and time it to the first
 * painted frame. `flush()` draws synchronously, so the number is the work the
 * library does rather than the interval until the display's next refresh.
 */
function timeFirstPaint(box: HTMLElement, theme: ExampleTheme): { chart: FinancialChart; createMs: number } {
    const start = performance.now();
    const chart = createFinancialChart(box, {
        theme,
        resolution: "1",
        data: bars,
        timeScale: { barSpacing: 3 },
    });
    chart.chart.flush();
    return { chart, createMs: performance.now() - start };
}

/** Then the cost of one full redraw while panning, measured the same way, as a median. */
function timeRedraw(chart: FinancialChart, count: number): number {
    const scale = chart.chart.timeScale;
    const frames: number[] = [];
    for (let i = 0; i < count; i++) {
        scale.scrollByPixels(-8);
        const start = performance.now();
        chart.chart.flush();
        frames.push(performance.now() - start);
    }
    frames.sort((a, b) => a - b);
    return frames[frames.length >> 1];
}