charton

Appearance

charton API

charton API / @chart-on/ui / index / ChartShellOptions

Interface: ChartShellOptions ​

Defined in: ui/src/shell.ts:87

Options for createChartShell: the core chart options, which parts of the shell to create and how (toolbar, rail, bottom bar, dialogs, panels and menus), plus theme, palette, feature flags, slots and class names.

Properties ​

appearance? ​

optional appearance?: false | Pick<AppearanceOptions, "storage" | "storageKey" | "presets" | "defaultPreset">

Defined in: ui/src/shell.ts:194

User color overrides and the Appearance panel (open it with shell.appearance.open() or appearanceToolbarItem()). Overrides are saved to localStorage under storageKey (give each shell on a page its own) unless storage replaces it; false turns the feature off. presets sets the colour presets at the top of the panel: the built-in ten by default, your own list, or false to hide them and ignore a saved preset. defaultPreset is the preset used until the user picks one (default 'paper-ink', null for the plain theme). A preset follows the theme into its light or dark variant.

bottomBar? ​

optional bottomBar?: boolean | BottomBarInput

Defined in: ui/src/shell.ts:115

Bottom bar. It takes items as the toolbar does (goToDate, clock, timezoneMenu, scaleMode and the other presets, or any toolbar item), or BottomBarOptions as shorthand for defaultBottomBarItems; true gives the default items. Off by default; false or an empty list leaves it out.

chart? ​

optional chart?: ChartOptionsPatch

Defined in: ui/src/shell.ts:97

Core chart options. A theme here wins over the CSS chart tokens. plugins defaults to builtins(); pass a list to choose, e.g. [heatmap(), drawingTools(someTools)]. The shell adds dataSource(), indicators(), comparisons(), drawings(), annotations(), replay(), sourceMarkers(), adjustments(), watermark(), layouts() and imageCapture() when the list leaves them out, since its parts use them, before the app's plugins, so those can register indicators and drawing tools, and trading() after them. The default rail offers the chart's drawing tools.

className? ​

optional className?: string

Defined in: ui/src/shell.ts:260

Extra class names for theming.

classNames? ​

optional classNames?: ShellClassNames

Defined in: ui/src/shell.ts:262

Extra class names for the shell's parts, as stable hooks for app CSS.

clusterList? ​

optional clusterList?: ClusterListPart

Defined in: ui/src/shell.ts:178

List of the orders in a clicked label cluster, with cancel buttons, made by clusterList(). Needs the trading() plugin. Off when left out: annotations:cluster is left to the app.

commandPalette? ​

optional commandPalette?: CommandPalettePart

Defined in: ui/src/shell.ts:145

Command palette, made by commandPalette({ sources }): a searchable list of the commands on chart.actions, with their shortcuts, plus entries from app sources. Opened by the command-palette action (Mod+K by default; the symbol search's shortcut is then only /) or commandPaletteToolbarItem(). Turn it off at runtime with the commandPalette feature flag. Off when left out: the symbol search keeps Mod+K and commandPaletteToolbarItem() is disabled.

contextMenu? ​

optional contextMenu?: false | ContextMenuOptions

Defined in: ui/src/shell.ts:210

Right-click menu; false keeps the browser's menu. Defaults to the built-in items.

direction? ​

optional direction?: ShellDirection

Defined in: ui/src/shell.ts:236

rtl mirrors the toolbar, rail, menus, dialogs and panels, and passes on to the chart's direction (main price axis on the left, legend and buttons mirrored); the plot and time axis keep time running left to right. ltr and rtl set dir on the shell. Default auto, which follows the page.

draftEditor? ​

optional draftEditor?: DraftEditorPart

Defined in: ui/src/shell.ts:184

Quantity keypad and order type menu for order drafts, made by draftEditor({ quantityPresets, maxQuantity }). Needs the trading() plugin. Off when left out: draft:edit is left to the app.

drawingSettings? ​

optional drawingSettings?: boolean | DrawingSettingsOptions

Defined in: ui/src/shell.ts:154

Settings dialog for a drawing, opened from the drawing toolbar's Settings button or by double-clicking the drawing (text tools edit their text instead). Default true; an object turns it on with those options, such as the template menu of @chart-on/ui/templates.

drawingToolbar? ​

optional drawingToolbar?: boolean

Defined in: ui/src/shell.ts:147

Floating style toolbar for the selected drawing. Default true.

favorites? ​

optional favorites?: FavoritesPart

Defined in: ui/src/shell.ts:125

Favourite drawing tools, made by favorites({ tools }): a star beside each tool in the rail's flyouts and a movable bar of the starred tools over the plot. Saved to localStorage under storageKey unless storage replaces it; saved favourites win over tools. Off when left out: the rail skips its favorites item and flyouts show no stars.

features? ​

optional features?: Partial<ShellFeatures>

Defined in: ui/src/shell.ts:250

Show or hide shell parts. Toolbar, rail and bottom bar are on by default; the pointer tooltip (tooltip) and the compact layout (railSheet) are off.

indicatorPicker? ​

optional indicatorPicker?: false | Omit<IndicatorPickerOptions, "onOpenChange" | "container">

Defined in: ui/src/shell.ts:218

Indicator picker (open it with shell.indicatorPicker.open(), indicatorPickerToolbarItem() or / on the focused chart; with a symbol search, which keeps /, no shortcut unless openOnSlash is set or the 'indicator-picker' action is bound). Recents and favourites are saved to localStorage under storageKey unless storage or settings replaces it. With the command palette, the palette lists the indicators and the picker's footer hands its query to the palette. false turns the feature off.

indicatorSettings? ​

optional indicatorSettings?: boolean | Pick<IndicatorSettingsOptions, "headerControl">

Defined in: ui/src/shell.ts:164

Settings panel for an indicator, docked to the right of the chart and opened from its legend row's settings button or menu. While it is on, the main series' settings button opens the chart settings, and compared symbols and plain series open a style panel (seriesSettings). Rows with nothing to set show no settings button. Default true; an object turns it on with a control in the indicator panel's header, such as the template menu of @chart-on/ui/templates.

indicatorTemplates? ​

optional indicatorTemplates?: false | Omit<IndicatorTemplatesOptions, "container">

Defined in: ui/src/shell.ts:224

Indicator templates (open them with indicatorTemplatesToolbarItem() or shell.indicatorTemplates). Saved templates go to createLocalStorageAdapter() unless storage replaces it; false turns the feature off.

optional navigator?: boolean | NavigatorOptions

Defined in: ui/src/shell.ts:117

Overview strip above the bottom bar: the whole history with a draggable window. Off by default.

palette? ​

optional palette?: ShellPalette

Defined in: ui/src/shell.ts:228

Initial up and down colours (data-pc-palette on the shell). Default default.

panels? ​

optional panels?: ShellPanelStyle | Partial<ShellPanels>

Defined in: ui/src/shell.ts:245

How the toolbar, rail and bottom bar sit around the chart: one style for all three, or an object for each (parts left out float). floating (the default) makes rounded cards inset from the shell's edges, docked square strips flush with them, inset unfilled parts on the shell background around a rounded chart. The --pc-panel-radius and --pc-panel-inset tokens set the rounding and the space at the edges.

rail? ​

optional rail?: false | RailOptions | RailItem[]

Defined in: ui/src/shell.ts:108

Left rail. false does not create it; an array is shorthand for { items }. Defaults to the built-in drawing tools.

railBreakpoint? ​

optional railBreakpoint?: number

Defined in: ui/src/shell.ts:258

Shell width (css px) below which the railSheet flag turns the rail into a bottom sheet and the range presets into a menu. Measured on the shell, not the window. Default 640.

replayControls? ​

optional replayControls?: ReplayControlsPart

Defined in: ui/src/shell.ts:172

Floating play, pause, step and speed controls while a bar replay runs (see replayToolbarItem), made by replayControls(). Needs the replay() plugin. Left out, a shell on the default toolbar (no toolbar option), which has the replay button, shows the strip too; other shells run a replay without it.

settings? ​

optional settings?: false | Pick<ChartSettingsOptions, "actions" | "storage" | "fields" | "sections" | "storageKey">

Defined in: ui/src/shell.ts:203

The chart settings dialog (open it with shell.settings.open() or settingsToolbarItem()). Changed settings are saved to localStorage under storageKey unless storage replaces it; theme colors and grid lines go to the appearance overrides. sections adds, hides or reorders sections; fields and actions add app-defined fields and buttons. false turns the feature off.

slots? ​

optional slots?: ShellSlots

Defined in: ui/src/shell.ts:267

App content mounted in the shell: above or below the rail, at either end of the bottom bar, and over the chart for the loading and empty states.

symbolSearch? ​

optional symbolSearch?: SymbolSearchPart

Defined in: ui/src/shell.ts:135

Symbol search dialog, made by symbolSearch({ source, onSelect }). Typing a letter or digit that no action is bound to on the focused chart, or elsewhere in the shell outside text fields, opens it with that character unless openOnTyping is set (false turns it off, an element hears typing only there), and so does the symbol-search action on chart.actions (/, and Mod+K without the command palette) anywhere in the shell. Off when left out: symbolHeader() is disabled.

tableView? ​

optional tableView?: false | Pick<TableViewOptions, "title" | "maxRows">

Defined in: ui/src/shell.ts:208

The visible data as an accessible table panel; open it with shell.tableView.open() or tableViewToolbarItem(). false turns the feature off.

theme? ​

optional theme?: ShellTheme

Defined in: ui/src/shell.ts:226

Initial colour scheme for both the chrome and the chart. Default system.

toasts? ​

optional toasts?: ToastsPart

Defined in: ui/src/shell.ts:274

Toasts, made by toasts(): a stack over the chart for chart.notify messages no ui:notify listener prevented, and for a status that would cover bars (reconnecting, stale, or loading and errors once bars are shown). Off when left out: those statuses keep the chart's in-pane text.

toolbar? ​

optional toolbar?: ToolbarItem[] | ToolbarOptions

Defined in: ui/src/shell.ts:103

Top toolbar items, or items with options such as end-user customization (customize: toolbarCustomization()). Default defaultToolbarItems(); pass [] to leave the toolbar out.

tooltip? ​

optional tooltip?: PointerTooltipOptions

Defined in: ui/src/shell.ts:252

Format, delay and anchor of the pointer tooltip the tooltip flag shows.