Keyboard and Touch

SciTrader has optional modifiers that let users work the chart and its drawings from the keyboard, and a touch mode for the drawing tools on phones and tablets:

Modifier or option	What it adds
`OnChartKeyboardZoomPanModifier`	Arrow keys pan, `+` and `-` zoom, `0` resets the zoom
`AnnotationKeyboardSelectionModifier`	Keys to select, delete, duplicate and nudge drawings, and to draw again
`OnChartButtonsModifier`	Zoom, pan and reset buttons on the pane under the mouse
The controller's `touch` option	Long press selects a drawing; placement uses a cursor you drag and tap

The modifiers are SciChart chart modifiers: add them to each pane's surface, as below.

Keyboard Focus

A pane takes keyboard focus when it is clicked, and the keys act on that pane. The keyboard modifiers make each pane focusable with Tab too, and add the class st-pane--focused to the focused pane, or to the element you pass as focusIndicatorElement.

tip

scitrader.css doesn't style st-pane--focused, so a focused pane looks no different. Give it a look of your own, so keyboard users can see which pane the keys act on:

/* An outline on the pane with keyboard focus */
.st-pane--focused { outline: 2px solid var(--st-ui-selection, #6c63ff); outline-offset: -2px; }

Zoom and Pan Keys: OnChartKeyboardZoomPanModifier

Key	Action
`←` / `→`	Pan the time axis left or right
`+` or `=`	Zoom in
`-`	Zoom out
`0`	Reset the zoom to fit
Shift with any of these	A bigger step

Keys with Ctrl, Alt or Cmd are left to the browser. When a drawing is selected, the arrow keys nudge it instead; see below.

Drawing Keys: AnnotationKeyboardSelectionModifier

Key	Action
`N` / `P`	Select the next or previous drawing, across every pane
`Delete` or `Backspace`	Remove the selected drawing
`D`	Duplicate the selected drawing, offset 20 pixels down and right, and select the copy
Arrow keys	Nudge the selected drawing by 1 pixel, or 10 with Shift
`Esc`	Deselect, and call `onCancelPlacement`
`A`	Call `onAddAnnotation`, e.g. to draw again with the last tool

A and Esc call back to your app, which knows which tool to start and how to cancel:

new AnnotationKeyboardSelectionModifier({
    // A: draw again with the last tool used, or freehand if none has been
    onAddAnnotation: () => drawing.selectTool(drawing.lastUsedTool ?? ETradingAnnotationType.FreehandDrawingAnnotation),
    // Esc: also cancel a drawing in progress
    onCancelPlacement: () => drawing.stop(),
    // Called when N, P, D, Delete or Esc changes the selection: the drawing, or undefined
    onSelectionChanged: (annotation) => console.log("selected by keyboard:", annotation),
});

onSelectionChanged covers keyboard selection only. For every selection, use each drawing's selectedChanged event; see Editing Drawings.

On-Chart Buttons: OnChartButtonsModifier

OnChartButtonsModifier adds a strip of zoom in, zoom out, pan left, pan right and reset buttons to the bottom of the pane under the mouse. On a touch screen, the strip shows on the pane last tapped. visible: false attaches it hidden, and setVisible(true) shows it later, e.g. from a setting.

Its look is .st-on-chart-buttons in scitrader.css.

Touch Screens: the touch Option

Pass touch: true to DrawingToolsController.attach, or to useDrawingTools in React, for a touch layout:

A long press selects a drawing, and keeps it held so a drag moves it straight away. A tap doesn't select, because it may start a pan. The phone vibrates briefly where the browser allows.
Placement uses a cursor: drag to aim, then tap to commit each point. Lifting after a drag only moves the cursor.

warning

The placement cursor applies to a mouse too: with touch on, a mouse user also drags the cursor to aim and clicks to commit each point. Selection by mouse is unchanged. Turn touch on for touch screens only, e.g. from matchMedia("(pointer: coarse)"):

const drawing = DrawingToolsController.attach(financeChartPanel.financeApi, {
    touch: matchMedia("(pointer: coarse)").matches, // on for phones and tablets
    selectFinishedDrawing: false, // leave a new drawing unselected, so its editor doesn't cover the chart
});

Option	What it does
`touch`	`true` for the touch layout. Pass `AnnotationTouchSelectionModifier` options instead to tune it: `holdDurationMs` (450), `cancelThresholdPx` (10), `hitSlopPx` (22), `hapticDurationMs` (10, or 0 for none)
`selectFinishedDrawing`	Whether a new drawing stays selected, showing its quick-edit toolbar. Default `true`. `false` suits a phone, where an editor would cover the chart
`resumeGestures`	Called to turn pan, x-axis drag and zoom-to-extents back on when a tool finishes. By default the controller turns them back on itself. Pass this if your app sometimes keeps them off, e.g. a touch "cursor mode" in which a drag moves the crosshair

Adding the Modifiers to Every Pane

Add the modifiers to each pane's surface, chart.chartPanes. A study can add a pane later, and paneConfigured fires as each pane is set up, so add them to new panes then:

const done = new Set<SciChartSurface>();
const addToAllPanes = () =>
    chart.chartPanes.forEach(({ surface }) => {
        if (!surface || done.has(surface)) return;
        done.add(surface);
        surface.chartModifiers.add(
            new OnChartKeyboardZoomPanModifier(),
            new AnnotationKeyboardSelectionModifier({ onAddAnnotation, onCancelPlacement }),
            new OnChartButtonsModifier({ visible: true })
        );
    });
addToAllPanes();
chart.paneConfigured.subscribe(addToAllPanes);

TypeScript Example: Keyboard Shortcuts, Touch and On-Chart Buttons

A BTC-USD chart from Coinbase with an RSI pane, the drawing-tools rail, and all three modifiers on every pane. Draw something, click a pane, then try the keys listed above the chart. Hover a pane for its zoom and pan buttons. On a touch screen, touch is on: long-press a drawing to select it.

The code for this example is found below.

import "scichart-scitrader/scitrader.css";
import { SciChartSurface } from "scichart";
import { ETradingAnnotationType } from "scichart-financial-tools";
import {
    AnnotationKeyboardSelectionModifier,
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    DrawingToolbar,
    DrawingToolsController,
    idbPriceStore,
    OHLCStudy,
    OnChartButtonsModifier,
    OnChartKeyboardZoomPanModifier,
    RSIStudy,
    SciFinanceChartPanel,
    VolumeStudy,
} from "scichart-scitrader";

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

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

async function createChart() {
    const keys = document.getElementById("keys");
    Object.assign(keys.style, keysStyle);
    keys.textContent =
        "Click a pane, then: N / P select drawings, Delete removes, D duplicates, arrows nudge (Shift: 10 px), " +
        "Esc deselects, A draws again. With nothing selected: arrows pan, + / - zoom, 0 resets.";

    const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
        exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
        symbol: "BTC-USD",
        interval: CandleInterval.SIX_HOURS,
        period: "3M",
        studies: [new OHLCStudy(), new VolumeStudy(), new RSIStudy()],
    });
    const chart = financeChartPanel.financeApi;

    // Touch: a long press selects a drawing, and placement uses a cursor you drag to aim and tap to
    // commit. The cursor applies to a mouse too, so turn touch on for touch screens only
    const drawing = DrawingToolsController.attach(chart, { touch: matchMedia("(pointer: coarse)").matches });
    const toolbar = DrawingToolbar.create(document.getElementById("tools"), drawing, { orientation: "vertical" });

    // The keyboard and on-chart button modifiers are optional, and added to each pane's surface
    function addModifiers(surface: SciChartSurface) {
        surface.chartModifiers.add(
            // Arrow keys pan, + / - zoom, 0 resets the zoom (Shift for bigger steps)
            new OnChartKeyboardZoomPanModifier(),
            // N / P step through the drawings on every pane, Delete removes the selected one, D duplicates
            // it, arrow keys nudge it, Esc deselects. A and Esc call back to your app:
            new AnnotationKeyboardSelectionModifier({
                // A: draw again with the last tool used, or freehand if none has been
                onAddAnnotation: () =>
                    drawing.selectTool(drawing.lastUsedTool ?? ETradingAnnotationType.FreehandDrawingAnnotation),
                // Esc: also cancel a drawing in progress
                onCancelPlacement: () => drawing.stop(),
            }),
            // Zoom, pan and reset buttons on the pane under the mouse
            new OnChartButtonsModifier({ visible: true })
        );
    }

    // Add the modifiers to every pane now, and to panes added later, e.g. by a new study:
    // paneConfigured fires as each pane is set up
    const done = new Set<SciChartSurface>();
    const addToAllPanes = () =>
        chart.chartPanes.forEach(({ surface }) => {
            if (surface && !done.has(surface)) {
                done.add(surface);
                addModifiers(surface);
            }
        });
    addToAllPanes();
    chart.paneConfigured.subscribe(addToAllPanes);

    // When the page goes away:
    // chart.paneConfigured.unsubscribe(addToAllPanes); toolbar.destroy(); drawing.detach(); financeChartPanel.cleanup();
    return { financeChartPanel, drawing, toolbar };
}

// The key help uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const keysStyle: Partial<CSSStyleDeclaration> = {
    padding: "8px 12px",
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
    color: "var(--st-ui-text-muted, #9da2bc)",
    fontSize: "13px",
};

createChart();

React Example: Keyboard Shortcuts, Touch and On-Chart Buttons

The same chart in React. The modifiers are added in an effect, once the chart and the controller are ready, and to panes added later.

The code for this example is found below.

React

import "scichart-scitrader/scitrader.css";
import * as React from "react";
import { SciChartSurface } from "scichart";
import { ETradingAnnotationType } from "scichart-financial-tools";
import {
    AnnotationKeyboardSelectionModifier,
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    idbPriceStore,
    ISciFinanceChartPanelApi,
    ISciFinanceChartPanelConfig,
    OHLCStudy,
    OnChartButtonsModifier,
    OnChartKeyboardZoomPanModifier,
    RSIStudy,
    VolumeStudy,
} from "scichart-scitrader";
import { DrawingToolbar, SciFinanceChartView, useDrawingTools } from "scichart-scitrader-react";

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

// Touch: a long press selects a drawing, and placement uses a cursor you drag to aim and tap to
// commit. The cursor applies to a mouse too, so turn touch on for touch screens only
const DRAWING_OPTIONS = { touch: matchMedia("(pointer: coarse)").matches };

export function KeyboardAndTouchChart() {
    const [chartApi, setChartApi] = React.useState<ISciFinanceChartPanelApi>();
    const { controller } = useDrawingTools(chartApi, DRAWING_OPTIONS);

    // Create the config once per mounted chart: studies are live objects bound to one chart
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
            symbol: "BTC-USD",
            interval: CandleInterval.SIX_HOURS,
            period: "3M",
            studies: [new OHLCStudy(), new VolumeStudy(), new RSIStudy()],
        }),
        []
    );

    // The keyboard and on-chart button modifiers are optional, and added to each pane's surface:
    // every pane now, and panes added later (paneConfigured fires as each pane is set up)
    React.useEffect(() => {
        if (!chartApi || !controller) return undefined;
        const chart = chartApi.financeApi;
        const done = new Set<SciChartSurface>();
        const addToAllPanes = () =>
            chart.chartPanes.forEach(({ surface }) => {
                if (!surface || done.has(surface)) return;
                done.add(surface);
                surface.chartModifiers.add(
                    // Arrow keys pan, + / - zoom, 0 resets the zoom (Shift for bigger steps)
                    new OnChartKeyboardZoomPanModifier(),
                    // N / P step through the drawings on every pane, Delete removes the selected one,
                    // D duplicates it, arrow keys nudge it, Esc deselects. A and Esc call back to your app:
                    new AnnotationKeyboardSelectionModifier({
                        // A: draw again with the last tool used, or freehand if none has been
                        onAddAnnotation: () =>
                            controller.selectTool(controller.lastUsedTool ?? ETradingAnnotationType.FreehandDrawingAnnotation),
                        // Esc: also cancel a drawing in progress
                        onCancelPlacement: () => controller.stop(),
                    }),
                    // Zoom, pan and reset buttons on the pane under the mouse
                    new OnChartButtonsModifier({ visible: true })
                );
            });
        addToAllPanes();
        chart.paneConfigured.subscribe(addToAllPanes);
        return () => chart.paneConfigured.unsubscribe(addToAllPanes);
    }, [chartApi, controller]);

    // Fills its parent, so give the parent a height
    return (
        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
            <div style={keysStyle}>
                Click a pane, then: N / P select drawings, Delete removes, D duplicates, arrows nudge (Shift: 10 px), Esc
                deselects, A draws again. With nothing selected: arrows pan, + / - zoom, 0 resets.
            </div>
            <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
                <DrawingToolbar controller={controller} orientation="vertical" />
                <div style={{ flex: 1, minWidth: 0 }}>
                    <SciFinanceChartView config={config} onInit={setChartApi} />
                </div>
            </div>
        </div>
    );
}

// The key help uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const keysStyle: React.CSSProperties = {
    padding: "8px 12px",
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
    color: "var(--st-ui-text-muted, #9da2bc)",
    fontSize: 13,
};

Styling the On-Chart Buttons

Class	Element
`.st-on-chart-buttons`	The strip
`.st-on-chart-buttons__button`	A button

The default on-chart buttons CSS (.st-on-chart-buttons), from scitrader.css

.st-on-chart-buttons {
    gap: 4px;
    padding: 4px;
    border-radius: 6px;
    background: var(--st-ui-toolbar-background, rgba(20,20,30,0.85));
}

.st-on-chart-buttons__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--st-ui-icon, #e5e7eb);
    cursor: pointer;
}

.st-on-chart-buttons__button:hover {
    color: var(--st-ui-text, #ffffff);
    background: rgb(var(--st-ui-overlay-rgb, 255 255 255) / 0.08);
}