Skip to content

Playground

Change the options, watch the chart, copy the code

Every control on the left maps to one option in the library. The chart is rebuilt from your configuration each time you change something, and the code underneath is the code that would produce it. Real IBM (NYSE) data throughout.

Change anything on the left; the chart is rebuilt from your options.
Your configuration, as code
import { createFinancialChart } from "@ortex-charts/financial";

const chart = createFinancialChart(element, {
    theme: "dark",
    timeZone: "America/New_York",
    resolution: "1D",
    seriesType: "candlestick",
    data: bars,
    volume: true,
    grid: { vertical: true, horizontal: true },
    crosshair: { mode: "magnet" },
    watermark: { text: "IBM", visible: true, fontSize: 44 },
    rightPriceScale: { mode: "normal" },
});

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

chart.setMarkers(earnings);

Looking for a specific feature rather than the options? The example gallery covers order flow, replay, sparklines, React and the rest, and the documentation explains every option in full.