Live Tip Toggle

The live tip is the latest candle, which keeps updating as live prices arrive and is followed by a new candle at each interval. liveTipMode decides what the view does when new candles arrive, while a period is set:

Follow ("follow", the default): the view slides right with each new candle, so the latest one stays in view.
Anchored ("anchored"): the view stays where it is, and new candles collect off-screen to the right. Users who are studying an earlier part of the chart aren't moved away from it.

LiveTipToggle is a ready-made pair of Follow / Anchored buttons for it. Like the other toolbar controls, it only picks a mode. It calls onChange, and you set the mode on the chart with financeApi.liveTipMode = mode.

TypeScript Example: Live Tip Toggle

A chart of BTC-USD at one-minute candles over the last hour, from Coinbase, so a new candle arrives every minute. With Follow, the view moves along with it; switch to Anchored, and the view stays put while new candles collect to the right.

The code for this example is found below.

import "scichart-scitrader/scitrader.css";
import {
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    LiveTipToggle,
    OHLCStudy,
    SciFinanceChartPanel,
    VolumeStudy,
} from "scichart-scitrader";

// This example expects this HTML:
// <div style="display: flex; flex-direction: column; height: 100%">
//     <div id="toolbar"></div>
//     <div id="chart" style="flex: 1; min-height: 0"></div>
// </div>

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

async function createChart() {
    const toolbar = document.getElementById("toolbar");
    Object.assign(toolbar.style, toolbarStyle);

    // One-minute candles over the last hour, so a new live candle arrives every minute
    const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
        exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
        symbol: "BTC-USD",
        interval: CandleInterval.ONE_MINUTE,
        period: "1H",
        studies: [new OHLCStudy(), new VolumeStudy()],
    });
    const chart = financeChartPanel.financeApi; // SciFinanceChart

    // LiveTipToggle: Follow / Anchored buttons for what the view does as new candles arrive.
    // It calls onChange with "follow" or "anchored", and you set it on the chart's liveTipMode
    const liveTip = LiveTipToggle.create(toolbar, {
        value: chart.liveTipMode, // "follow" by default
        onChange: (mode) => {
            chart.liveTipMode = mode;
        },
    });

    // When the page goes away: liveTip.destroy(); financeChartPanel.cleanup();
    return { financeChartPanel, liveTip };
}

// The toolbar uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const toolbarStyle: Partial<CSSStyleDeclaration> = {
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: "8px",
    padding: "8px",
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
};

createChart();

React Example: Live Tip Toggle

The same chart in React, with the React LiveTipToggle from scichart-scitrader-react. It is a controlled component: the mode lives in React state.

The code for this example is found below.

React

import "scichart-scitrader/scitrader.css";
import * as React from "react";
import {
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    ISciFinanceChartPanelApi,
    ISciFinanceChartPanelConfig,
    OHLCStudy,
    TLiveTipMode,
    VolumeStudy,
} from "scichart-scitrader";
import { LiveTipToggle, SciFinanceChartView } from "scichart-scitrader-react";

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

export function LiveTipChart() {
    const chartRef = React.useRef<ISciFinanceChartPanelApi>(null);
    // The toggle is a controlled component: its value lives in React state
    const [mode, setMode] = React.useState<TLiveTipMode>("follow");

    // One-minute candles over the last hour, so a new live candle arrives every minute
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
            symbol: "BTC-USD",
            interval: CandleInterval.ONE_MINUTE,
            period: "1H",
            liveTipMode: "follow",
            studies: [new OHLCStudy(), new VolumeStudy()],
        }),
        []
    );

    // Fills its parent, so give the parent a height
    return (
        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
            <div style={toolbarStyle}>
                <LiveTipToggle
                    value={mode}
                    onChange={(next) => {
                        setMode(next);
                        // financeApi throws until the chart has initialised
                        if (chartRef.current?.isInitialized) {
                            chartRef.current.financeApi.liveTipMode = next;
                        }
                    }}
                />
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
                <SciFinanceChartView ref={chartRef} config={config} />
            </div>
        </div>
    );
}

// The toolbar uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const toolbarStyle: React.CSSProperties = {
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 8,
    padding: 8,
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
};

LiveTipToggle Options

Option	Type	What it does
`value`	`TLiveTipMode`: `"follow" \| "anchored"`	The selected mode
`onChange`	`(mode: TLiveTipMode) => void`	Called when the user picks the other mode
`autoSelect`	`boolean`	Whether a pick is selected straight away. Default `true`

The chart side: SciFinanceChart.liveTipMode gets or sets the mode, and liveTipModeChanged is raised when it changes. To start a chart in one mode, set the liveTipMode option of the chart config.

The LiveTipToggle class and ILiveTipToggleOptions, with their TSDoc

/**
 * Follow / Anchored buttons, in plain DOM, for how the chart treats new live candles:
 * - **Follow:** the visible range slides right with each new candle.
 * - **Anchored:** the range stays where the user left it, and new candles collect off-screen.
 *
 * Picking one selects it and calls `onChange`; set it on the chart with
 * `financeApi.liveTipMode = mode`. Its look is `.st-toggle-group.st-live-tip-toggle` in
 * `scitrader.css`.
 *
 * React apps use the React `LiveTipToggle`.
 */
class LiveTipToggle {
    /** The control's element, inside the container passed to {@link create}. */
    readonly element: HTMLDivElement;
    static create(container: HTMLElement, options: ILiveTipToggleOptions): LiveTipToggle;
    /**
     * The control's HTML for these options, without behaviour: for rendering on a server. A
     * control created with the same options produces the same markup.
     */
    static toHTML(options: ILiveTipToggleOptions): string;
    /** The selected mode. */
    get value(): TLiveTipMode;
    /** Change any of the options; the ones not given stay as they are. */
    update(options: Partial<ILiveTipToggleOptions>): void;
    destroy(): void;
}

/** Options for {@link LiveTipToggle}. */
interface ILiveTipToggleOptions {
    /** The selected mode. */
    value: TLiveTipMode;
    /** Called when the user picks the other mode. */
    onChange?: (mode: TLiveTipMode) => void;
    /**
     * Whether picking an option selects it straight away. Default `true`. With `false` the control
     * only calls `onChange`, and shows the new selection once you pass it back with
     * `update({ value })`; the React wrappers work this way, so the parent's state decides.
     */
    autoSelect?: boolean;
}

The React LiveTipToggle and its props, with their TSDoc

/** Props for {@link LiveTipToggle}. */
interface ILiveTipToggleProps extends IHostProps {
    /** The selected mode. */
    value: TLiveTipMode;
    /** Called when the user picks the other mode. */
    onChange: (mode: TLiveTipMode) => void;
}

/**
 * The SDK's Follow / Anchored toggle in React: the vanilla `LiveTipToggle` in a `<div>`,
 * controlled by `value` and `onChange`.
 */
function LiveTipToggle({ value, onChange, className, style }: ILiveTipToggleProps): React.JSX.Element;

/** Props every React finance control takes besides its own. */
interface IHostProps {
    className?: string;
    style?: React.CSSProperties;
}

SciFinanceChart.liveTipMode and liveTipModeChanged, with their TSDoc

get liveTipMode(): "follow" | "anchored";
set liveTipMode(value: "follow" | "anchored");

/** Fires when {@link liveTipMode} changes via the setter. */
liveTipModeChanged: EventHandler<"follow" | "anchored">;

Styling the Live Tip Toggle

It is a toggle group, like the interval and period selectors:

Element	Class
The group	`st-toggle-group st-live-tip-toggle`
Each button	`st-toggle-group__button`; the selected one has `aria-pressed="true"`

/* Show the selected mode in the accent colour */
.st-live-tip-toggle .st-toggle-group__button[aria-pressed="true"] {
    background: var(--st-ui-accent, #7464ff);
}

See Styling and Themes.

TypeScript Example: Live Tip Toggle​

React Example: Live Tip Toggle​

LiveTipToggle Options​

Styling the Live Tip Toggle​

See also​

TypeScript Example: Live Tip Toggle

React Example: Live Tip Toggle

LiveTipToggle Options

Styling the Live Tip Toggle

See also