Chart Configuration

ISciFinanceChartPanelConfig describes the chart you want: what data to show, which studies to draw, and how the panes are laid out. You pass it once, when the chart is created:

// Plain TypeScript
SciFinanceChartPanel.create(container: HTMLElement, config: ISciFinanceChartPanelConfig)
    : Promise<ISciFinanceChartPanelApi<HTMLElement>>

// React
<SciFinanceChartView config={config} />

Only four options are required: exchangeName, symbol, interval and studies. Everything else has a default.

import {
    BinanceExchange,
    CandleInterval,
    ISciFinanceChartPanelConfig,
    OHLCStudy,
    VolumeStudy
} from "scichart-scitrader";

const config: ISciFinanceChartPanelConfig = {
    exchangeName: BinanceExchange.name, // name="Binance" matches the built-in BinanceExchange
    symbol: "BTCUSDT",
    interval: CandleInterval.FOUR_HOURS,
    studies: [new OHLCStudy(), new VolumeStudy()],
};

The config is read once. Changing it afterwards does nothing, including passing a new config prop to <SciFinanceChartView>. To change a live chart, use the Finance Chart API. The section for each option below names the call that changes it later.

The ISciFinanceChartPanelConfig Interface

Option	Type	Default
exchangeName	string	Required
symbol	string	Required
interval	CandleInterval	Required
services	ISciFinanceChartServices	Created for you
studies	IStudy[]	Required
maxPanes	number	6
period	TPeriod	None: the feed's natural range
periodBufferRatio	number	0.2
lockPeriodWidth	boolean	true
liveTipMode	"follow" | "anchored"	"follow"
forwardHeadroomSec	number | null	null
useSubCharts	boolean	true
direction	LayoutDirection	"column"
paneSizing	Record<string, IPaneSizeConfig>	Each study's own size
paneControls	IPaneControlOptions	Bar shown, mouse layout
loading	IPaneLoadingOptions	Skeleton and overlay
theme	ISciTraderTheme	SCITRADER_DARK_THEME
axisDefaults	IChartAxisDefaults	None
surfaceConfig	TSurfaceConfigurationFunction	None

The ISciFinanceChartPanelConfig interface, with its TSDoc

/**
 * Configuration for creating a {@link SciFinanceChartPanel} or {@link SciFinanceChartView}.
 *
 * Defines the data feed, initial studies, and layout options. Passed to the
 * static `create` factory or as React props.
 */
interface ISciFinanceChartPanelConfig {
    /** Exchange name for the data feed (e.g. "Binance"). */
    exchangeName: string;
    /** Trading symbol (e.g. "BTCUSDT"). */
    symbol: string;
    /** Candle interval (e.g. ONE_DAY). */
    interval: CandleInterval;
    /**
     * Initial preset period (e.g. `"3M"`). When set, the chart applies
     * `setPeriod(period)` after initial data load to zoom the visible range
     * and load any missing historical candles. When omitted, the chart shows
     * whatever the data feed's natural visible range is.
     */
    period?: TPeriod;
    /**
     * Extra candles to fetch beyond the period window, as a fraction of the
     * period's candle count (e.g. `0.2` = +20%). The buffer sits just off
     * the left edge of the visible window so a small pan-back doesn't trigger
     * a fresh fetch. Negative values clamp to 0. Default: `0.2`.
     */
    periodBufferRatio?: number;
    /**
     * Live-tip behaviour while a period is active:
     *   - `"follow"` — visible range slides right with each new candle.
     *   - `"anchored"` — visible range stays pinned where the period
     *     was applied; new candles appear off-screen.
     * Default: `"follow"` (matches TradingView).
     */
    liveTipMode?: "follow" | "anchored";
    /**
     * Whether {@link period} also imposes a hard zoom-out cap. Default `true`
     * — `setPeriod` clamps `xAxis.visibleRangeSizeLimit` so users can't zoom
     * wider than the period. Set `false` to treat `period` as an
     * initial-view hint only — pan/zoom stays unrestricted afterwards.
     */
    lockPeriodWidth?: boolean;
    /**
     * Forward pan/zoom headroom past the latest candle, in seconds, or
     * `null` (default) for no forward limit. Forwarded to
     * {@link ISciFinanceChartPredefinedStudiesOptions.forwardHeadroomSec}.
     */
    forwardHeadroomSec?: number | null;
    /** Initial studies to attach (OHLC, Volume, RSI, MACD, etc.). */
    studies: IStudy[];
    /** Use sub-chart mode (shared parent surface). Default: `true` ({@link DEFAULT_USE_SUB_CHARTS}). */
    useSubCharts?: boolean;
    /** Layout direction. Default: `"column"`. */
    direction?: LayoutDirection;
    /** Optional pre-configured services (data manager, data feed manager). When provided, bypasses default creation. */
    services?: ISciFinanceChartServices;
    /** Optional surface configuration applied to the default pane and study panes that don't specify their own (e.g. navy theme + transparent background). */
    surfaceConfig?: TSurfaceConfigurationFunction;
    /**
     * Default options applied to every X and Y axis the finance chart creates,
     * including the X axes in `addXAxis` and every study's Y axis. Each axis
     * spreads these first, then its study-specific options — so studies can
     * still override per-axis. See {@link IChartAxisDefaults}.
     */
    axisDefaults?: IChartAxisDefaults;
    /**
     * Colours for the whole chart: surfaces, axes, legend, crosshair and every study's
     * defaults. Default `SCITRADER_DARK_THEME`. Switch later with `financeApi.setTheme(theme)`.
     */
    theme?: ISciTraderTheme;
    /**
     * Per-pane size hints keyed by paneId. Overrides each pane's primary
     * study's `paneSizeConfig` default. Use to tune the layout from the
     * host without modifying study classes.
     *
     * Resolution: `paneSizing[paneId]` > primary study's `paneSizeConfig` >
     * layout renderer's default (`grow: 1`).
     *
     * @example
     * paneSizing: {
     *   [PaneId.DEFAULT.value]: { grow: 4 }, // bigger price pane
     *   "RSIPane": { size: 100 },             // fixed-height RSI
     * }
     */
    paneSizing?: Record<string, IPaneSizeConfig>;
    /**
     * Maximum total chart panes (price pane + indicator panes). Studies that
     * would create a new pane (oscillators) are refused once the chart is at
     * this limit — the chart raises `paneLimitReached` so the host can toast.
     * Overlay studies (EMA/WMA/VWAP/PSAR/Volume) share an existing pane and are
     * never affected. Default 6.
     */
    maxPanes?: number;
    /**
     * Each pane's control bar and the dividers between panes: whether the bar shows, which
     * buttons it has, and the touch layout for phones and tablets. The finance chart leaves out
     * the axis-sync and V-/H-group toggles unless `buttons` turns them on. Change later with
     * {@link ISciFinanceChartPanelApi.setPaneControls}.
     */
    paneControls?: IPaneControlOptions;
    /**
     * What each pane shows while it loads: a skeleton until its chart is ready (or your own
     * placeholder), and a shimmer overlay while a symbol or interval switch loads.
     */
    loading?: IPaneLoadingOptions;
}

ISciFinanceChartPanelConfig Data Source Options

ISciFinanceChartPanelConfig.exchangeName, .symbol, .interval

/** Exchange name for the data feed (e.g. "Binance"). */
exchangeName: string;
/** Trading symbol (e.g. "BTCUSDT"). */
symbol: string;
/** Candle interval (e.g. ONE_DAY). */
interval: CandleInterval;

What to chart. exchangeName is the name an exchange was registered under, e.g. "Binance" for BinanceExchange. Register it before you create the chart, or the chart has nowhere to load candles from. See Register a data source.

symbol is in the exchange's own format ("BTCUSDT" on Binance, "BTC-USD" on Coinbase). interval is the candle size, e.g. CandleInterval.FOUR_HOURS.

The CandleInterval enum

enum CandleInterval {
    ONE_SECOND = "1s",
    ONE_MINUTE = "1m",
    THREE_MINUTES = "3m",
    FIVE_MINUTES = "5m",
    FIFTEEN_MINUTES = "15m",
    THIRTY_MINUTES = "30m",
    ONE_HOUR = "1h",
    TWO_HOURS = "2h",
    FOUR_HOURS = "4h",
    SIX_HOURS = "6h",
    EIGHT_HOURS = "8h",
    TWELVE_HOURS = "12h",
    ONE_DAY = "1d",
    THREE_DAYS = "3d",
    ONE_WEEK = "1w",
    ONE_MONTH = "1M"
}

Later: financeApi.setSymbol and financeApi.changeInterval.

ISciFinanceChartPanelConfig.services

/** Optional pre-configured services (data manager, data feed manager). When provided, bypasses default creation. */
services?: ISciFinanceChartServices;

The services the chart loads data through. Leave this out and the chart creates its own, using the globally registered exchanges. Most apps never set it.

Set it for two reasons:

• To keep an exchange private to one chart, rather than registering it globally. See Keeping an exchange private to a chart.
• To follow loading progress from the start. Each pane reports "surface", then "configured", then "data" as it loads. Those events fire before create resolves, so subscribe to your own PaneProgressEmitter and pass it in as progress. Otherwise the chart creates one, which you can reach afterwards as financeApi.progress. See Loading states.

The ISciFinanceChartServices interface, with its TSDoc

/** Services shared across all panes in a SciFinanceChart. */
interface ISciFinanceChartServices {
    dataManager?: IDataManager;
    dataFeedManager?: IDataFeedManager;
    /**
     * Per-pane init-phase emitter (`"surface"` → `"configured"` → `"data"`).
     * Pass an emitter when callers need to subscribe *during* init — events on
     * the returned `SciFinanceChart` only become subscribable after
     * `createWithStudies` resolves, by which point all init-time phase advances
     * have already fired. When omitted, the chart default-creates one,
     * accessible via {@link SciFinanceChart.progress}.
     */
    progress?: PaneProgressEmitter;
}

ISciFinanceChartPanelConfig Studies and Indicators Options

ISciFinanceChartPanelConfig.studies

/** Initial studies to attach (OHLC, Volume, RSI, MACD, etc.). */
studies: IStudy[];

What to draw, in order. Include OHLCStudy for the price candles. Overlays such as moving averages and volume share the price pane; oscillators such as RSI and MACD each get a pane of their own.

Each study object belongs to one chart. Create new ones for every chart, and in React create them inside useMemo, so a re-render doesn't hand the chart new objects.

Later: financeApi.attachStudy(study) and financeApi.detachStudy(study). See Studies and indicators.

The IStudy interface every study implements is on Technical Indicators and Studies.

ISciFinanceChartPanelConfig.maxPanes

/**
 * Maximum total chart panes (price pane + indicator panes). Studies that
 * would create a new pane (oscillators) are refused once the chart is at
 * this limit — the chart raises `paneLimitReached` so the host can toast.
 * Overlay studies (EMA/WMA/VWAP/PSAR/Volume) share an existing pane and are
 * never affected. Default 6.
 */
maxPanes?: number;

The most panes the chart may have, counting the price pane. Once it is reached, studies that need a pane of their own are refused, and financeApi.paneLimitReached is raised so you can tell the user. Overlays such as EMA, VWAP and Volume share an existing pane and are never refused.

Later: set financeApi.maxPanes.

ISciFinanceChartPanelConfig Period and Zoom Options

ISciFinanceChartPanelConfig.period

/**
 * Initial preset period (e.g. `"3M"`). When set, the chart applies
 * `setPeriod(period)` after initial data load to zoom the visible range
 * and load any missing historical candles. When omitted, the chart shows
 * whatever the data feed's natural visible range is.
 */
period?: TPeriod;

How much time to show at first, e.g. "3M" for three months. Once the first candles are loaded, the chart zooms to the period and fetches any older candles it needs. Leave it out to show the data feed's natural range.

Later: financeApi.setPeriod.

The TPeriod type and EPeriod constants, with their TSDoc

/**
 * Named accessors for the preset periods. Use these in new code
 * (`EPeriod.OneMonth`) instead of magic strings. String values match
 * the URL / JSON serialization tokens so existing `?period=1Y` URLs
 * and persisted JSON blobs stay readable.
 *
 * Implemented as an `as const` object (not a TS `enum`) so values stay
 * structurally compatible with raw string literals — `"1M"` and
 * `EPeriod.OneMonth` are the same type and interchangeable.
 */
declare const EPeriod: {
    readonly OneMinute: "1m";
    readonly OneHour: "1H";
    readonly OneDay: "1D";
    readonly FiveDays: "5D";
    readonly OneWeek: "1W";
    readonly OneMonth: "1M";
    readonly ThreeMonths: "3M";
    readonly SixMonths: "6M";
    readonly YearToDate: "YTD";
    readonly OneYear: "1Y";
    readonly TenYears: "10Y";
    readonly All: "ALL";
};

/**
 * String-literal union of {@link EPeriod}'s values. Structurally
 * compatible with both `EPeriod.OneMonth` and raw string literals
 * like `"1M"` — both are accepted everywhere `TPeriod` is.
 */
type TPeriod = (typeof EPeriod)[keyof typeof EPeriod];

ISciFinanceChartPanelConfig.periodBufferRatio

/**
 * Extra candles to fetch beyond the period window, as a fraction of the
 * period's candle count (e.g. `0.2` = +20%). The buffer sits just off
 * the left edge of the visible window so a small pan-back doesn't trigger
 * a fresh fetch. Negative values clamp to 0. Default: `0.2`.
 */
periodBufferRatio?: number;

Extra candles to fetch beyond the period, as a fraction of it: 0.2 fetches 20% more. They sit just off the left edge, so a small pan back doesn't need another fetch. Negative values count as 0.

ISciFinanceChartPanelConfig.lockPeriodWidth

/**
 * Whether {@link period} also imposes a hard zoom-out cap. Default `true`
 * — `setPeriod` clamps `xAxis.visibleRangeSizeLimit` so users can't zoom
 * wider than the period. Set `false` to treat `period` as an
 * initial-view hint only — pan/zoom stays unrestricted afterwards.
 */
lockPeriodWidth?: boolean;

Whether the period is also the widest the user can zoom out to. Set false to treat the period as the starting view only, with zoom unrestricted afterwards.

ISciFinanceChartPanelConfig.liveTipMode

/**
 * Live-tip behaviour while a period is active:
 *   - `"follow"` — visible range slides right with each new candle.
 *   - `"anchored"` — visible range stays pinned where the period
 *     was applied; new candles appear off-screen.
 * Default: `"follow"` (matches TradingView).
 */
liveTipMode?: "follow" | "anchored";

What the view does as new candles arrive, while a period is set:

• "follow": the view slides right with each new candle, so the latest one stays in view.
• "anchored": the view stays where it is, and new candles appear off-screen to the right.

Later: set financeApi.liveTipMode, or use the LiveTipToggle control (Live Tip Toggle).

ISciFinanceChartPanelConfig.forwardHeadroomSec

/**
 * Forward pan/zoom headroom past the latest candle, in seconds, or
 * `null` (default) for no forward limit. Forwarded to
 * {@link ISciFinanceChartPredefinedStudiesOptions.forwardHeadroomSec}.
 */
forwardHeadroomSec?: number | null;

How far, in seconds, the user can pan or zoom past the latest candle. null sets no limit.

ISciFinanceChartPanelConfig Pane Layout Options

ISciFinanceChartPanelConfig.useSubCharts

/** Use sub-chart mode (shared parent surface). Default: `true` ({@link DEFAULT_USE_SUB_CHARTS}). */
useSubCharts?: boolean;

Whether all panes are drawn on one shared SciChart surface (true, sub-chart mode) or each pane has its own surface (false). One surface uses less memory and fewer WebGL contexts. See Multi-chart and sub-chart modes.

ISciFinanceChartPanelConfig.direction

/** Layout direction. Default: `"column"`. */
direction?: LayoutDirection;

Stack panes vertically ("column"), or side by side ("row").

Later: financeChartPanel.paneGroupApi.setDirection(direction).

ISciFinanceChartPanelConfig.paneSizing

/**
 * Per-pane size hints keyed by paneId. Overrides each pane's primary
 * study's `paneSizeConfig` default. Use to tune the layout from the
 * host without modifying study classes.
 *
 * Resolution: `paneSizing[paneId]` > primary study's `paneSizeConfig` >
 * layout renderer's default (`grow: 1`).
 *
 * @example
 * paneSizing: {
 *   [PaneId.DEFAULT.value]: { grow: 4 }, // bigger price pane
 *   "RSIPane": { size: 100 },             // fixed-height RSI
 * }
 */
paneSizing?: Record<string, IPaneSizeConfig>;

Size hints for each pane, keyed by pane id. A hint here wins over the pane's study's own default. Set either grow, the pane's share of the free space relative to the other panes (default 1), or size, a fixed size in pixels.

import { PaneId, RSIStudy } from "scichart-scitrader";

const RSI_PANE = new PaneId("rsi"); // give the study's pane an id, to size it

studies: [new OHLCStudy(), new RSIStudy({ paneId: RSI_PANE })],
paneSizing: {
    [PaneId.DEFAULT.value]: { grow: 4 }, // a bigger price pane
    [RSI_PANE.value]: { size: 100 },     // a fixed-height RSI pane
}

A study's pane gets a new id each time unless you give it one, as here. Pane Sizes and Pane State has a live example, and shows how to change sizes later.

The IPaneSizeConfig interface, with its TSDoc

/**
 * Sizing hint for a pane. Mutually exclusive: set `grow` OR `size`, not both.
 *
 * - `grow` — flex-grow weight relative to other grow-based panes (default: 1).
 * - `size` — fixed pixel size along the layout axis. The pane won't flex-grow.
 *
 * When a divider is dragged, any `size` is converted to a `grow` weight.
 */
interface IPaneSizeConfig {
    /** Flex-grow weight relative to other grow-based panes. Default: 1. */
    grow?: number;
    /** Fixed pixel size along the layout axis. Pane won't flex-grow. */
    size?: number;
}

ISciFinanceChartPanelConfig.paneControls

/**
 * Each pane's control bar and the dividers between panes: whether the bar shows, which
 * buttons it has, and the touch layout for phones and tablets. The finance chart leaves out
 * the axis-sync and V-/H-group toggles unless `buttons` turns them on. Change later with
 * {@link ISciFinanceChartPanelApi.setPaneControls}.
 */
paneControls?: IPaneControlOptions;

Each pane's control bar, and the dividers between panes.

• touch: the control bar moves into a drawer at each pane's right edge, opened by a tap or swipe, rather than appearing on hover. The dividers get a wider hit area. You decide when to turn it on, e.g. from the viewport size.
• buttons: move, maximize, hide, close, lockSize and yAxisAutoRange are shown by default. axisSync, verticalGroup and horizontalGroup are hidden on a finance chart, because it keeps every pane's X axis in step already; set them to true to show them.

Later: financeChartPanel.setPaneControls(options). See Pane controls.

The IPaneControlOptions and IPaneControlBarButtons interfaces, with their TSDoc

/**
 * The per-pane controls: the control bar and the dividers between panes.
 */
interface IPaneControlOptions {
    /** Show each pane's control bar. Default: `true`. */
    visible?: boolean;
    /**
     * Touch layout, for phones and tablets: the control bar sits in a drawer at each pane's right
     * edge (tap or swipe its handle) instead of appearing on hover, and the dividers have a wider
     * hit area with grip dots. The host decides when to use it, e.g. from the viewport size.
     * Default: `false`.
     */
    touch?: boolean;
    /** Buttons to leave out of the control bar, e.g. `{ axisSync: false }`. Default: all shown. */
    buttons?: IPaneControlBarButtons;
}

/**
 * Which buttons the per-pane control bar shows. Every button is shown unless set to `false`;
 * the chart-only ones appear on chart panes only, and the Y-axis auto-range toggle only on
 * panes that have one (see {@link IPaneSplitterApi.setYAxisAutoRange}).
 */
interface IPaneControlBarButtons {
    /** Sync this pane's X axis with the other panes. */
    axisSync?: boolean;
    /** Join or leave the vertical axis group. */
    verticalGroup?: boolean;
    /** Join or leave the horizontal axis group. */
    horizontalGroup?: boolean;
    /** Lock the pane at its current size. */
    lockSize?: boolean;
    /** Turn Y-axis auto-ranging on or off. */
    yAxisAutoRange?: boolean;
    /** Move the pane up/down (left/right in a row layout). */
    move?: boolean;
    /** Maximize the pane, or restore it. */
    maximize?: boolean;
    /** Hide the pane; it comes back from the restore strip. */
    hide?: boolean;
    /** Remove the pane. */
    close?: boolean;
}

For phones and tablets, and how your app decides when to use touch, see Mobile and Desktop Modes.

ISciFinanceChartPanelConfig.loading

/**
 * What each pane shows while it loads: a skeleton until its chart is ready (or your own
 * placeholder), and a shimmer overlay while a symbol or interval switch loads.
 */
loading?: IPaneLoadingOptions;

What each pane shows while it loads.

• placeholder: shown in each pane until its chart is ready. true is a shimmering skeleton, false shows nothing, and a function returns your own element for a pane. onPlaceholderRemoved is called when it is taken out, so you can clean up anything inside it.
• overlay: while a symbol or interval change loads, covers each pane with a translucent shimmer that also blocks input.

See Loading states.

The IPaneLoadingOptions interface, with its TSDoc

/**
 * What a chart pane shows while it loads.
 */
interface IPaneLoadingOptions {
    /**
     * Shown in each chart pane until its chart is ready. `true` (default) is a shimmering
     * skeleton (`.st-pane-skeleton`), `false` shows nothing, and a function returns your own
     * element for a pane, e.g. progress dots driven by `SciFinanceChart.progress`. It is removed
     * when the pane's chart is ready; see {@link onPlaceholderRemoved}.
     */
    placeholder?: boolean | ((paneId: LayoutPaneId) => HTMLElement);
    /** Called when a pane's placeholder is taken out, so content in it can be cleaned up. */
    onPlaceholderRemoved?: (paneId: LayoutPaneId, element: HTMLElement) => void;
    /**
     * While the layout's container has the `data-chart-loading` attribute, cover each chart pane
     * with a translucent shimmer (`.st-pane-loading-overlay`) that also blocks input, so a
     * symbol or interval switch shows it is working. `SciFinanceChartPanel` sets the attribute.
     * Default: `true`.
     */
    overlay?: boolean;
}

ISciFinanceChartPanelConfig Styling and Theme Options

ISciFinanceChartPanelConfig.theme

/**
 * Colours for the whole chart: surfaces, axes, legend, crosshair and every study's
 * defaults. Default `SCITRADER_DARK_THEME`. Switch later with `financeApi.setTheme(theme)`.
 */
theme?: ISciTraderTheme;

Every colour the chart draws with, as an ISciTraderTheme: surfaces, axes, legend, crosshair, and each study's defaults. SCITRADER_LIGHT_THEME and SCITRADER_OCEAN_THEME are the other built-in themes.

Later: financeApi.setTheme(theme). See Styling and themes.

The ISciTraderTheme interface, with its TSDoc, is on Creating a Custom Theme.

ISciFinanceChartPanelConfig.axisDefaults

/**
 * Default options applied to every X and Y axis the finance chart creates,
 * including the X axes in `addXAxis` and every study's Y axis. Each axis
 * spreads these first, then its study-specific options — so studies can
 * still override per-axis. See {@link IChartAxisDefaults}.
 */
axisDefaults?: IChartAxisDefaults;

SciChart axis options applied to every X and Y axis the chart creates, on top of the theme's. A study's own axis options still win over these.

axisDefaults: { labelStyle: { fontSize: 11 }, drawMinorGridLines: false }

Later: financeApi.applyAxisStyle(partial). See Axes.

The IChartAxisDefaults type, with its TSDoc

/**
 * Default options applied to every X and Y axis created by the finance chart
 * and its studies. Each axis spreads these BEFORE its own (data-bound)
 * options so studies can still override on a per-axis basis.
 *
 * Intentionally a wide `Partial<IAxisBase2dOptions>` so callers can reach any
 * SciChart axis property — including 2D-specific ones like `backgroundColor`
 * (axis-strip fill) on top of the core toggles `drawMinorGridLines`,
 * `drawMajorBands`, `drawMajorTickLines`, etc.
 *
 * Threaded from `SciFinanceChartView` props → `ISciFinanceChartPanelConfig`
 * → `SciFinanceChart.createWithStudies` → stored on the chart instance →
 * read by `addXAxis()` for X axes and by each study's `onAttach` for Y axes.
 */
type IChartAxisDefaults = Partial<IAxisBase2dOptions>;

ISciFinanceChartPanelConfig.surfaceConfig

/** Optional surface configuration applied to the default pane and study panes that don't specify their own (e.g. navy theme + transparent background). */
surfaceConfig?: TSurfaceConfigurationFunction;

A function run on each pane's SciChartSurface as it is created, for anything the other options don't cover. chart.sciChartSurface is the surface. Return the same chart when you're done.

surfaceConfig: async (chart) => {
    chart.sciChartSurface.background = "Transparent";
    return chart;
}

The TSurfaceConfigurationFunction type and IChart interface, with their TSDoc

/** Imperative configuration function: receives a created chart surface and applies user configuration to it. */
type TSurfaceConfigurationFunction = (chart: IChart) => Promise<IChart>;

/** Wraps a `ISciChartSurface` instance returned from a chart init function. */
interface IChart {
    /** Stable unique identity assigned at creation time (GUID). */
    id: string;
    sciChartSurface: ISciChartSurface;
}

ISciFinanceChartPanelConfig in React

<SciFinanceChartView> takes the same config as its config prop. Because it is only read once, create it inside useMemo, and to start the chart over, remount the view with a new key:

const config = React.useMemo<ISciFinanceChartPanelConfig>(
    () => ({
        exchangeName: BinanceExchange.name, // name="Binance" matches the built-in BinanceExchange
        symbol: "ETHUSDT",
        interval: CandleInterval.ONE_DAY,
        period: "1Y",
        studies: [new OHLCStudy(), new VolumeStudy()],
    }),
    []
);

return <SciFinanceChartView key={chartKey} config={config} />;

See also

• Finance Chart API: the object create returns
• Getting started
• Layout
• Styling and themes