UI Components
The chart itself is the SciFinanceChart component. Around it, the SDK ships the controls a trading app needs: toolbar pickers, study settings, a drawings list, a market-depth ladder, loading placeholders, a candle counter, UI icons and the pieces of a watchlist. Each one is plain DOM in scichart-scitrader, and scichart-scitrader-react wraps it for React. They have the SciTrader app's look, from the stylesheet, and follow the theme.
| Component | Plain TypeScript | React |
|---|---|---|
| Interval buttons See Interval and Period Selectors | Interval | < |
| Period buttons See Interval and Period Selectors | Period | < |
| Candle-type menu See Candle Type Selector | Candle | < |
| Follow / Anchored toggle See Live Tip Toggle | Live | < |
| Colour field with opacity See Colour Picker | Color | < |
| A study's settings form See Study Settings Form and Study List | Study | < |
| The chart's studies, each with its form See Study Settings Form and Study List | Study | < |
| Drawing tools rail See Drawing Toolbar and Drawing List | Drawing | < |
| List of drawings See Drawing Toolbar and Drawing List | Drawing | < |
| Market-depth ladder See Market Depth | Market | < |
| Loading progress dots See Layout | create, pane | < |
| Candle counts (visible / loaded / total) See Candle Counter | Candle, count, observe | < |
| UI icons See Icons | SCITRADER_, sci | < |
| Sparklines, and watchlist prices See Sparklines | Spark, Watch | none: use them from React |
Symbols as pairs (BTC/)See Sparklines | format, parse | the same functions |
How the Components Work
Plain TypeScript. Each component is a class:
Component.create(container, options)builds it insidecontainerand returns it.elementis its root element.update(options)changes any options; the ones not given stay as they are.destroy()removes it, along with any listeners it added to the document.
Controls that hold a value also have a value getter and an onChange option.
React. Each wrapper mounts the vanilla component in a <div> and passes it the latest props after every render, so props apply in place, without a remount. (SciFinanceChartView and MarketDepthView are the exceptions: some of their props are read once, as their docs say.) The controls are controlled: they show value and report the user's choice through onChange, as an <input> does. All the wrappers take className and style for their host <div>.
Controls only pick a value. The toolbar controls never change the chart themselves. Each calls onChange with what the user picked, and you pass it on to the chart, e.g. financeApi.changeInterval(interval). So you decide what happens, and can validate, log or store the choice first.
Server rendering. Each control has a static toHTML(options) that returns its markup without behaviour, the same markup create builds. The React wrappers render it on the server, and the vanilla control takes over before the first paint, so a server-rendered toolbar doesn't change when the page hydrates. A control created with autoSelect: false doesn't select what the user picks: it calls onChange and waits for update({ value }). The React wrappers work this way, so the parent's state decides what is selected.
Styling the UI Components
The components get their look from the SDK's stylesheet. Import it once:
import "scichart-scitrader/scitrader.css";
Without it, the controls still work but look like plain browser buttons. The stylesheet reads the theme's colours from CSS variables such as --st-ui-surface and --st-ui-text, with the dark theme's colours as fallbacks, so the components follow the chart's theme. Every element has a class, e.g. st-toggle-group__button, so you can restyle any part with your own CSS, loaded after scitrader.css. Each component's page lists its classes. Styling and Themes covers the stylesheet, the theme variables and the full list of classes.