Skip to main content

Customization API

Customization spans theme presets, CSS variables, style overrides, chrome slots, and feature gates. Prefer the highest-level mechanism that covers the need.

Search 336 supported customization contracts below. Expand a result to see its TypeScript declaration, properties, methods, parameters, return values, and errors. Share a filtered URL or a symbol anchor when another engineer needs the same contract.

Start here​

Browse the reference​

Interfaces 173

Result of auditing a chart theme's accessible UI tokens against WCAG contrast minimums: every checked foreground/background pair plus the subset that failed.
A failing entry from a theme contrast audit, identical in shape to AccessibilityContrastResult; collected in AccessibilityContrastAudit.issues.
One checked foreground/background token pair from a theme contrast audit, with its computed WCAG contrast ratio and the minimum it was measured against.
Styling for the average-close reference price line — the display-settings line marking the average close of the currently visible bars — and its right-axis label.
Stroke styling for an axis baseline — the line drawn along the axis edge — and the base shape for tick-line styling.
Native override block for one axis (time or price): visibility, strip sizing, label behavior, auto-scale scope, and nested axis-line, tick, and tool-label styling. Used directly and as the base of ScaleOverrideSettings.
Stroke styling for axis tick marks; extends the shared axis-line styling with a tick length.
Typography and spacing for axis tick labels.
Text-box styling for the value labels that tools (drawings and other overlays) pin onto an axis, including active-state color variants used while the owning tool is selected.
Styling for the bid and ask reference price lines — display-settings lines drawn from live quote data — and their right-axis labels.
Complete contrast-audited color and typography token contract used by built-in chart themes.
Describes one built-in shortcut action seeded by the SDK widget: its stable id, user-facing label, default key binding, action group, and UI placements.
Baseline-chart styling: how the base level is chosen plus the gradient fills, series line colors and widths for the regions above and below it, and the base-level line's own stroke.
One color stop of an area background gradient fill.
Styling for the current-value point marker on area/line charts, including its animated ripple ring.
Style overrides for the area family of main-series chart types (line, area, HLC area, baseline): series line stroke, background fill, the current-value point marker, and nested HLC/baseline blocks.
Per-direction candle color set applied through customization().setCandleColors() and read back with getCandleColors(). Splits body, border, and wick colors by rising, falling, and unchanged bars.
Style patch for the highest-price or lowest-price mark drawn on the candle pane, used as the high and low buckets of CandlePriceMarkStyleOverrideSettings. Controls the mark's visibility, color, and label text rendering.
Style patch for the HLC-area chart type: independent high, close, and low lines plus the two fill regions between them. Applied through the hlc bucket of CandleAreaStyleOverrideSettings.
Style for one extra text row stacked above or below the last-price axis label; the row's content comes from the host's formatExtendText formatter (e.g. a bar-close countdown). Extends the shared price-mark text style with placement and a repaint interval.
Style patch for the last-price mark: the horizontal last-price line, its price-scale label, direction colors, and any extend-text rows. Used as the last bucket of CandlePriceMarkStyleOverrideSettings.
Style patch for the horizontal last-price line, used as the line bucket of CandleLastPriceMarkStyleOverrideSettings. The line color itself comes from the parent mark's direction colors.
Style patch grouping the candle pane's price marks: the highest-price mark, the lowest-price mark, and the last-price mark. Used as the priceMark bucket of CandleStyleOverrideSettings.
Text-label style shared by candle price marks, covering font, fill mode, border, background, and padding of the label box. The last-price mark's text and each extend-text row build on this shape.
Direct patch of the native main-series (candle) renderer contract, covering per-direction bar colors, area/line rendering, and price marks. Applied through StyleOverrideSettings.candles when a host needs to patch the effective candle renderer rather than set chart-type-scoped defaults.
Per-chart accessibility configuration passed as the accessibility chart option: screen-reader chart descriptions, crosshair announcements, keyboard navigation and keyboard crosshair/drawing operation, and the semantic OHLCV data table. Every feature defaults to enabled; hosts use this to override the generated description or switch individual aids off.
Host-registered WebGL2 shader source rendered across the full chart widget shell, behind its toolbar, drawing rail, labels, and chart canvases. The fragment shader is a complete #version 300 es shader paired with the SDK fullscreen-triangle vertex shader. It may consume in vec2 vUv plus the optional built-ins uResolution, uTime, and uDpr.
Failure report delivered to ChartBackgroundShaderDefinition.onError when a registered chart background shader cannot be set up or rendered.
Native chart-pane background definition covering solid fills, gradients, raw CSS backgrounds, and host-registered shaders. Applied through typed override buckets such as StyleOverrideSettings.background and ChartContainerOverrideSettings.background.
Color and effect tokens for the chart's square ts-chart-button chrome buttons, split across resting, hover, selected, and disabled states. Hosts set it as ChartUiTheme.button to restyle toolbar and chrome buttons; unset tokens fall back to the built-in theme.
A tonal button — the buy/sell/highlight actions in order tickets, ladders and account panels. These are visual only. positive and negative name the direction a control represents; they never decide which side an order takes.
Resting and hover colors for one tonal action button on a given ground: a soft tinted fill, a deeper border, and tone text lifted until it clears 4.5:1 against its own fill.
Color tokens for checkboxes rendered in chart chrome and dialogs, covering the unchecked, hover, checked, and disabled states. Hosts set it as ChartUiTheme.checkbox; unset tokens fall back to the built-in theme.
price-scale and time-scale are the two scales, which the engine paints into the canvas rather than the DOM. A class or style has nothing to attach to there, so the chart renders a dedicated layer over each axis region for these slots to target: exactly the axis bounds, no paint and no pointer capture until a host sets something, so an unset slot changes nothing. Use them for borders, tints and overlays; the numerals and ticks themselves are theme tokens and applyStyleOverrides, since they are canvas draw calls.
Chart-specific chrome that is neither a control nor a surface.
Chart-container override bucket used as ChartOverrideSettings.chart, owning the typed native chart-pane background patch. Extends an open record so hosts can pass additional low-level container keys through.
Values swapped in under prefers-contrast: more. A media query cannot read the active theme, so the high-contrast block reads these instead of hard-coding one palette. A preset that does not set them keeps the built-in fallbacks.
Describes one built-in chart control: a stable public id, its built-in label, the chrome surface that owns it, a grouping hint for ordered composition, and the typed customization field that gates its visibility.
Host replacement for one visible control. The built-in keeps its position, its ordering and its gate; only what it renders changes. Supply render for a React node or extension for framework-neutral DOM. When both are set render wins.
Context for a host override of a built-in control. Extends the item context with a handle to the SDK's own content, so a host can drop it, return it unchanged, or wrap it in its own chrome.
Color tokens for form controls (inputs, selects, and similar fields) across chart chrome and widgets, set via ChartUiTheme.control. Any CSS color value is accepted; unset tokens keep the built-in theme's values.
Points a built-in control at the real customization field that gates it: which option object carries the gate ('toolbar' or 'controls') and the field name on that object. Every inventory entry names an existing field, enforced by tests.
Host CSS injected through the theming pipeline: scoped rules are confined to one chart instance's DOM subtree, while global opts specific rules (shared keyframes, font faces) into page-wide effect.
One structured record of a datafeed operation stage — history load, realtime streaming, or symbol search — delivered to the debug logger when the widget debug option is enabled.
Object form of the widget debug option, selecting which SDK subsystems emit structured debug events and where those events are delivered.
Context handed to a host ChartDescriptionFunction when composing the screen-reader description of a chart, identifying which chart in the workspace is being described and its current market state.
Per-chart display and interaction switches — price lines and labels, grid and session rendering, pan/zoom gestures, and drawing scope — applied at mount or at runtime and re-emitted in full with the display-settings-change event.
Keyboard focus-ring colors set via ChartUiTheme.focus: one ring for buttons, links, and composite controls, plus a quieter ring used by text inputs.
Options for exporting the chart as a bitmap (screenshots and clipboard copies), controlling overlay inclusion, encoding format, and background fill.
Colors of the loading spinner shown in chart chrome and widgets, set via ChartUiTheme.loader.
Built-in three-dot loading indicator.
Host-owned image used in place of a built-in spinner.
Visual and accessible presentation for one chart loading phase.
Built-in circular loading indicator.
Configures the loading screen painted into the mount target while the chart runtime boots. Hosts pass it as the widget loadingScreen option, or pass false there to keep the mount blank until the runtime surface loads.
Configures chart loading feedback from runtime boot through initial bars and historical fetching. Each phase can use a built-in indicator, a host image, or be disabled independently.
Main price-series override bucket used as ChartOverrideSettings.mainSeries. Beyond the typed visible flag, arbitrary extra keys pass through as untyped engine overrides.
Colors for small marker elements in the chart chrome — switch thumbs, the replay-scrubber knob, and the active pill in the period bar. Applied through ChartUiTheme.marker and emitted as the --ts-chart-marker-* CSS variables.
Colors for SDK-owned modal dialogs (settings, storage, notice/confirm dialogs), applied through ChartUiTheme.modal. Unset fields keep the active theme's defaults.
Typed, bucketed chart appearance overrides applied via the widget chartOverrides option or CustomizationControllerApi.applyOverrides. Values set here win over the active theme's colors layer.
Colors for radio-button controls in SDK dialogs and panels, applied through ChartUiTheme.radio. Unset fields keep the active theme's defaults.
Meaning-carrying accent and profit/loss/warning colors shared by chart chrome and widgets (badges, P&L cells, quote deltas, status tones), applied through ChartUiTheme.semantic. Purely visual: changing them never changes which value is treated as a gain or a loss.
Colors and metrics for panels, popovers, and other chrome surfaces around the chart canvas, applied through ChartUiTheme.surface. Includes the hover/selected states used by multi-chart grid panes and workspace tabs.
A host-authored theme accepted wherever a theme name is (the widget theme option, setTheme, registerTheme). Layers optional canvas plot colors, UI-chrome token groups, CSS variables, and scoped custom CSS on top of an optional built-in base preset.
One shipped theme preset: its identity and copy, the light/dark base, the eight-decision seed it derives from, plus its derived chrome tokens, plot palette, and a ready-to-apply theme object.
The eight decisions that define a derived preset.
Read/write access to the chart's time-scale geometry — bar spacing in CSS pixels, right offset in bars, inactivity-gap policy, and plot width — with change subscriptions for each. Obtained via ChartApi.getTimeScale().
Subscription handle returned by the time-scale change accessors (barSpacingChanged(), rightOffsetChanged(), inactivityGapsChanged()), supporting both callback-keyed and owner-keyed subscribe/unsubscribe styles.
One host-owned toolbar item. Unlike a registered action, which the SDK renders as a button from a label and an icon, an item's content is entirely the host's: a button, an input, a switch, a panel trigger, anything. Supply render for a React node or extension for framework-neutral DOM. When both are set render wins. An item id may not collide with a built-in control id.
Declares a host toolbar item to the agent and MCP layer. Absent means the item is human-only: placing a control in the toolbar never makes it agent-callable by itself.
Chart facts handed to host toolbar content on mount and on every subsequent change.
Font tokens for chart chrome and widgets — UI and monospace font stacks, base size, and weight — applied through ChartUiTheme.typography. The base size is pinned to the chart rather than the host page's root size, so embedding-app typography cannot resize chart controls.
The grouped UI-chrome token sets of a theme — buttons, surfaces, modals, controls, semantic colors, typography, and more — carried on ChartTheme.ui. Each group maps to --ts-chart-* CSS variables; unset groups keep the base theme's values.
Host customization of the chart context menu: disable it, choose and order which registered actions appear, post-process the assembled item list, or replace the menu UI entirely with a custom renderer.
One entry in the chart context menu: an invocable action, a separator, a submenu, or a custom item. Items are assembled from registered actions and can be transformed by a ContextMenuItemsProcessor before rendering.
Style settings for one crosshair direction (the horizontal or vertical arm), pairing the guide-line style with the axis-label style rendered where the arm meets its axis.
Style of the value labels rendered where the crosshair meets the price or time axis, covering text, background, border, and padding.
Style of a crosshair guide line (one arm of the crosshair): color, width, dash pattern, opacity, and canvas stroke behavior.
Position and visibility of the chart crosshair. Read via ChartApi.getCrosshair(), set programmatically via setCrosshair(), carried by the crosshair-change event, and persisted in ChartState.
Top-level crosshair styling: a master visibility switch plus independent line and axis-label styles for the horizontal and vertical arms.
Context passed to custom action and context-menu handlers when they run. Exposes the public chart API plus whatever the invocation knows about its target: the hit object, pixel point, time, bar index, price, and symbol.
A host-registered chart action with its id, presentation, and handler. Depending on its placements it is surfaced in the chart toolbar, the context menu, and/or bound to a keyboard shortcut.
Controller returned by ChartApi.customization() (and the widget-level customization(chartId?)) that owns runtime look-and-feel: themes, watermark, localization, shortcuts, legend and tooltip presentation, toolbar and context-menu configuration, style overrides, drawing/indicator defaults, and custom actions. Hosts use it to read and mutate the chart's CustomizationState and to observe every change through subscribe.
Tracker that records labeled customization-state snapshots at host-defined precedence boundaries and resolves them on demand into effective fields with per-field source histories; dispose stops controller-event observation and is safe to call repeatedly.
Aggregated snapshot of every customization facet the customization controller owns. Returned by getCustomizationState and carried on every CustomizationEvent; each field is optional, and absence means that facet is unset and SDK defaults apply.
Native drawing defaults applied to future drawings by exact drawing tool id. These groups mirror the renderer-backed style ids published by the drawing tool catalog, for example line.*, polygon.*, circle.*, and text.*.
Default stroke styling for line-based drawing figures; also reused for indicator line styles and the global overlay arc style.
Style for drawing selection handles (control-point dots), including the variant used while a point is active.
Default fill and border styling for closed drawing figures such as polygons, rectangles, and circles.
Global native drawing renderer styling used as StyleOverrideSettings.drawings; extends the per-figure drawing defaults with global control-point (point), arc, and rectangle (rect) styles plus host metadata.
Default typography and box styling for text drawing figures such as labels and notes.
Style for one family of native grid lines (horizontal, vertical, minor, or major) inside GridStyleSettings.
Native grid styling bucket applied through styleOverrides.grid, covering horizontal grid lines and the tiered vertical grid line families.
Styling for the high/low reference price lines that mark the highest high and lowest low of the visible bars, applied through styleOverrides.highLowPriceLine.
How a shared binding map is merged into a scope.
Outcome of importing a whole binding map in one step.
One preset entry that could not be applied, with the collisions that refused it.
A chord occupied by two different logical widget actions in the same registry scope.
A titled run of rows inside one widget — mirrors WidgetHotkeyActionDefinition.group.
Everything the editor renders for one pass over the registry.
One editable action together with everything the row needs to render itself.
Every action one mounted widget contributes to the editor.
Composition-scoped runtime authority for widget action registration, remapping, and dispatch.
Registry lifecycle event emitted after registration, binding, dispatch, or hydration changes.
Configuration for one composition-scoped hotkey registry.
Persistence boundary for one composition-scoped set of shortcut overrides.
Identity colours (SDK-CHROME-003). A legend avatar is coloured by hashing its symbol so two tickers never look alike. That makes it identity colour, not chrome: routing it through the surface tokens would paint every logo the same and destroy the only thing it does. It still has to be host-overridable, which is the whole product invariant. So the palette is six token pairs rather than six literals. A host that wants its own identity colours sets ui.identity (or the variables directly) and every avatar follows; a host that sets nothing gets the shipped six, because each token carries its original literal as the var() fallback. The hash is stable and order-dependent — changing the palette's length or order reassigns every existing symbol's colour, which is why the array is fixed at six and new entries are a deliberate change rather than an append.
Defaults applied to future indicators with one exact indicator name, registered per name through CustomizationState.indicatorDefaults.
Styling for indicator last-value marks — the latest plot-value labels shown on the price scale — applied through styleOverrides.indicators.lastValueMark.
Text-badge styling for indicator last-value marks on the price scale: font, fill and border treatment, and padding.
Style entry for one indicator line plot, sharing the native line style shape (color, size, stroke style, dash pattern, opacity, smoothing). Used per plot in IndicatorStyleOverrideSettings.lines.
Styling for indicator plots that render OHLC figures: the comparison rule and the colors used for up, down, and unchanged bars.
Styling for indicator polygon figures such as bars, histograms, and circles: fill treatment, border stroke, and up/down/no-change colors.
Controls the selection focus highlight drawn around the pane of the currently selected indicator, via styleOverrides.indicators.sourceSelectionMarkers.
Chart-wide default indicator styling applied through styleOverrides.indicators, grouped by figure family plus last-value marks, selection markers, and tooltips.
Text styling and value policy for the per-plot value legend inside indicator tooltips, extending the shared tooltip text styling.
Layout and content policy for indicator tooltips: pane-edge offsets, visibility rule, presentation type, and title/legend styling.
Shared font and margin styling for indicator tooltip text, extended by the tooltip title and legend settings.
Styling and content policy for the indicator tooltip title row: name and parameter visibility plus symbol-title sourcing.
Configuration block for the chart legend: visibility, the symbol identity row, per-row action buttons, candle and indicator values, quote fields, and market-status sections. Supplied at chart creation and updated through the customization APIs.