Stock chart options

Importar

import type { StockChartOptions } from "@sixtyfold/stock";

Usa el punto de entrada público indicado arriba. Las importaciones solo de tipos se eliminan del JavaScript de la aplicación.

`BollingerBandsIndicatorConfig`

Bollinger bands indicator options.

Import @sixtyfold/stockinterface

interface BollingerBandsIndicatorConfig extends StockIndicatorStyle

Member	Definition	Description
`color?`	`string \| undefined`	Bollinger bands indicator color.
`deviation?`	`number \| undefined`	Standard-deviation multiplier. Defaults to 2.
`fillColor?`	`string \| undefined`	Fill color.
`fillOpacity?`	`number \| undefined`	Fill opacity from `0` to `1`.
`id?`	`string \| undefined`	Unique identifier for this bollinger bands indicator.
`includeInScale?`	`boolean \| undefined`	Whether this layer affects automatic Y-axis scaling.
`label?`	`string \| undefined`	Bollinger bands indicator label.
`lineDash?`	`StockIndicatorLineDash \| undefined`	Canvas dash pattern in CSS pixels.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`lowerColor?`	`string \| undefined`	Lower color.
`middleColor?`	`string \| undefined`	Middle color.
`period`	`number`	Lookback period in raw candles.
`source?`	`StockPriceSource \| undefined`	Defaults to close.
`type`	`"bollinger"`	Selects the type.
`upperColor?`	`string \| undefined`	Upper color.
`visible?`	`boolean \| undefined`	Whether to render the bollinger bands indicator.

`CandleColors`

Candle colors.

Import @sixtyfold/stockinterface

interface CandleColors

Member	Definition	Description
`down?`	`string \| undefined`	Color used when `close < open`.
`up?`	`string \| undefined`	Color used when `close >= open`.
`wickDown?`	`string \| undefined`	Wick color for down candles (defaults to down color)
`wickUp?`	`string \| undefined`	Wick color for up candles (defaults to up color)

`EMAIndicatorConfig`

EMA indicator options.

Import @sixtyfold/stockinterface

interface EMAIndicatorConfig extends StockIndicatorStyle

Member	Definition	Description
`color?`	`string \| undefined`	EMA indicator color.
`id?`	`string \| undefined`	Unique identifier for this EMA indicator.
`includeInScale?`	`boolean \| undefined`	Whether this layer affects automatic Y-axis scaling.
`label?`	`string \| undefined`	EMA indicator label.
`lineDash?`	`StockIndicatorLineDash \| undefined`	Canvas dash pattern in CSS pixels.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`period`	`number`	Lookback period in raw candles.
`source?`	`StockPriceSource \| undefined`	Defaults to close.
`type`	`"ema"`	Selects the type.
`visible?`	`boolean \| undefined`	Whether to render the EMA indicator.

`SMAIndicatorConfig`

SMA indicator options.

Import @sixtyfold/stockinterface

interface SMAIndicatorConfig extends StockIndicatorStyle

Member	Definition	Description
`color?`	`string \| undefined`	SMA indicator color.
`id?`	`string \| undefined`	Unique identifier for this SMA indicator.
`includeInScale?`	`boolean \| undefined`	Whether this layer affects automatic Y-axis scaling.
`label?`	`string \| undefined`	SMA indicator label.
`lineDash?`	`StockIndicatorLineDash \| undefined`	Canvas dash pattern in CSS pixels.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`period`	`number`	Lookback period in raw candles.
`source?`	`StockPriceSource \| undefined`	Defaults to close.
`type`	`"sma"`	Selects the type.
`visible?`	`boolean \| undefined`	Whether to render the SMA indicator.

`StockAddCandlesOptions`

Options for stock add candles.

Import @sixtyfold/stockinterface

interface StockAddCandlesOptions

Member	Definition	Description
`initialTimeRange?`	`"1D" \| "5D" \| "1M" \| "3M" \| "6M" \| "YTD" \| "1Y" \| "5Y" \| "ALL" \| undefined`	Apply a preset before the initial streamed dataset can render.

`StockAppearanceOptions`

Stock chart appearance — base appearance + stock-specific visual fields

Import @sixtyfold/stockinterface

interface StockAppearanceOptions extends BaseAppearanceOptions

Member	Definition	Description
`axis?`	`AxisAppearanceOptions \| undefined`	Runtime appearance options for axis.
`candleColors?`	`CandleColors \| undefined`	Colors used for candle bodies and wicks.
`candleStrokeWidth?`	`number \| undefined`	Candle outline and OHLC-bar width in CSS pixels.
`chartBackground?`	`BackgroundOptions \| undefined`	Runtime appearance options for chart background.
`crosshairStyle?`	`CrosshairOptions \| undefined`	Runtime appearance options for crosshair style.
`grid?`	`GridOptions \| undefined`	Runtime appearance options for grid.
`labels?`	`ChartLabels \| undefined`	Runtime appearance options for labels.
`overlay?`	`OverlayOptions \| undefined`	Runtime appearance options for overlay.
`padding?`	`PaddingOptions \| undefined`	Runtime appearance options for padding.
`previewLineColor?`	`string \| undefined`	Line color used by the range-selector preview.
`rangeSelector?`	`RangeSelectorAppearanceOptions \| undefined`	Runtime appearance options for range selector.
`selection?`	`SelectionOptions \| undefined`	Runtime appearance options for selection.
`textDirection?`	`TextDirection \| undefined`	Runtime appearance options for text direction.
`tooltip?`	`TooltipOptions \| undefined`	Runtime appearance options for tooltip.

`StockChartOptions`

Construction, interaction, appearance, range, and market-layer options for a stock chart.

Import @sixtyfold/stockinterface

interface StockChartOptions

Member	Definition	Description
`animated?`	`boolean \| undefined`	Animate data reveal and viewport/axis transitions. When omitted, animation is enabled unless the browser reports `prefers-reduced-motion: reduce`.
`axis?`	`AxisOptions \| undefined`	Axis customization (line color and label colors)
`candleColors?`	`CandleColors \| undefined`	Custom colors for candles
`candleStrokeWidth?`	`number \| undefined` = `1`	Stroke width for candle outlines and OHLC bars
`candleStyle?`	`CandleStyle \| undefined`	Style for rendering price data: - 'filled': solid filled candles (default) - 'hollow': candles with stroke outline only - 'ohlc': classic OHLC bars with horizontal ticks
`chartBackground?`	`BackgroundOptions \| undefined` = `#16213e`	Chart background (covers entire canvas including preview area). Can be a solid color string, gradient definition, or image.
`crosshairMarkerColor?`	`string \| undefined`	Legacy fallback color for left and right Y-axis cursor labels. Explicit axis cursor-label colors take precedence.
`crosshairStyle?`	`CrosshairOptions \| undefined`	Crosshair lines styling (vertical and horizontal guide lines)
`grid?`	`GridOptions \| undefined`	Grid line customization for main chart
`indicators?`	`StockIndicator[] \| undefined`	Built-in worker-rendered technical indicators.
`interactive?`	`boolean \| undefined` = `true`	Enable user interactions (pan/zoom/pinch). When false, chart is view-only but still shows crosshair/tooltip on hover.
`keepAliveInterval?`	`number \| undefined` = `0 (disabled)`	Keep-alive interval in seconds to prevent Safari from releasing GPU resources. Safari aggressively cleans up "unused" canvases, causing blank charts.
`keyboardActivation?`	`"focus" \| "hover" \| undefined`	How keyboard controls become active. - "focus" (default): chart must have DOM focus - "hover": chart under the mouse pointer receives keyboard navigation
`keyboardAnnouncements?`	`false \| KeyboardAnnouncementMessages \| undefined`	Localize keyboard-action announcements for assistive technologies, or set `false` to disable them. Omitted messages use concise English defaults.
`keyboardPanSpeed?`	`number \| undefined` = `0.1 (10%)`	Keyboard pan speed (arrow keys). Fraction of visible range to pan per keypress.1 (10%)
`keyboardZoomSpeed?`	`number \| undefined` = `0.1 (10% per keypress)`	Keyboard zoom speed (+/- keys). Higher values = faster zoom.1 (10% per keypress)
`labels?`	`ChartLabels \| undefined`	Text labels around the chart (title, axis labels)
`markers?`	`StockMarker[] \| undefined`	Sparse timestamp/price event markers.
`minViewportRange?`	`number \| undefined`	Smallest interactive X viewport span, expressed in the same units as the chart's X values. Invalid or non-positive values retain the chart-type default. This construction option is not part of mutable appearance.
`onCrosshairMove?`	`((detail: StockCrosshairMoveDetail \| null) => void) \| undefined`	Called as the crosshair moves between candles, and with null when it leaves.
`onTimeRangeChange?`	`((range: TimeRange \| null) => void) \| undefined`	Called with the active preset, or `null` when the viewport no longer matches a named preset.
`onVisibleRangeChange?`	`((detail: StockVisibleRangeChangeDetail) => void) \| undefined`	Called when the renderer reports a changed visible range or data extent.
`overlay?`	`OverlayOptions \| undefined`	Declarative overlay primitives rendered above chart content
`padding?`	`PaddingOptions \| undefined` = `{ top: 20, right: 80, bottom: 40, left: 80 }`	Custom padding in pixels
`previewLineColor?`	`string \| undefined` = `#4a90d9`	Color for the preview line in range selector
`priceLines?`	`StockPriceLine[] \| undefined`	Horizontal data-anchored price levels.
`priceUnit?`	`UnitOptions \| undefined`	Unit config for price values (OHLC) in tooltip and axis labels
`rangeSelector?`	`RangeSelectorOptions \| undefined`	Range selector (preview chart) configuration
`rendererInitializationTimeout?`	`number \| undefined` = `15000`	Maximum time in milliseconds allowed for renderer startup. The watchdog starts during chart construction, so it also protects applications that do not await `BaseChart.initialize`. Set to `0` to disable it.
`renderMode?`	`"auto" \| "worker" \| "main" \| undefined`	Selecciona el modo de renderizado. `auto` prefiere Worker + OffscreenCanvas; `worker` fuerza el worker con respaldo en el hilo principal; `main` renderiza en el hilo principal del navegador y requiere DOM.
`selection?`	`SelectionOptions \| undefined`	Selection range (drag-to-zoom) styling
`showLeftPriceMarker?`	`boolean \| undefined`	Alias for showLeftAxisLabel - show price marker on left Y-axis
`showRightPriceMarker?`	`boolean \| undefined`	Alias for showRightAxisLabel - show price marker on right Y-axis
`showVolume?`	`boolean \| undefined`	Whether to show volume.
`textDirection?`	`TextDirection \| undefined` = `inherit`	Direction used for Canvas2D text. Use "auto" to infer from the first strong character of each string, or "rtl"/"ltr" to force a chart-wide direction.
`timeScale?`	`StockTimeScale \| undefined`	X-axis behavior. `market` compresses intervals without observations while preserving real timestamps in labels and events.
`tooltip?`	`StockTooltipOptions \| undefined`	Tooltip options with stock-specific onRender params
`volumeColors?`	`VolumeColors \| undefined`	Custom colors for volume bars (defaults to candle colors)
`volumeHeightRatio?`	`number \| undefined` = `0.15`	Height of volume area as fraction of chart height (0-1,15)
`volumeOpacity?`	`number \| undefined` = `0.35`	Opacity of volume bars (0-1,35)
`volumeProfile?`	`false \| VolumeProfileOptions \| undefined`	Estimated candle-derived visible-range volume-by-price profile, or false to disable it.
`volumeUnit?`	`UnitOptions \| undefined`	Unit config for volume values in tooltip
`wheelZoomDirection?`	`"up-in" \| "up-out" \| undefined`	Mouse wheel zoom direction. - "up-in" (default): wheel up/backward zooms in, wheel down/forward zooms out - "up-out": wheel up/backward zooms out, wheel down/forward zooms in
`wheelZoomSpeed?`	`number \| undefined` = `0.1 (10% per wheel tick)`	Mouse wheel zoom speed. Higher values = faster zoom.1 (10% per wheel tick)
`yDomain?`	`YDomainOptions \| undefined`	Pin either or both edges of the rendered Y domain. Omitted edges continue to auto-scale from visible data. Supplying both finite edges keeps the Y viewport stable across zoom, LOD selection, and streaming updates. The option is disabled by default and is construction configuration rather than mutable appearance.

`StockChartStatsOptions`

Controls how frequently stock telemetry is published.

Import @sixtyfold/stockinterface

interface StockChartStatsOptions

Member	Definition	Description
`intervalMs?`	`number \| undefined` = `250`	Minimum interval between stats updates in milliseconds

`StockIndicatorStyle`

Renderer-facing metadata shared by all indicators. Calculations ignore it.

Import @sixtyfold/stockinterface

interface StockIndicatorStyle

Member	Definition	Description
`color?`	`string \| undefined`	Stock indicator style color.
`id?`	`string \| undefined`	Unique identifier for this stock indicator style.
`includeInScale?`	`boolean \| undefined`	Whether this layer affects automatic Y-axis scaling.
`label?`	`string \| undefined`	Stock indicator style label.
`lineDash?`	`StockIndicatorLineDash \| undefined`	Canvas dash pattern in CSS pixels.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`visible?`	`boolean \| undefined`	Whether to render the stock indicator style.

`StockMarker`

A sparse event/trade marker anchored to a timestamp and optionally a price.

Import @sixtyfold/stockinterface

interface StockMarker

Member	Definition	Description
`color?`	`string \| undefined`	Marker fill color.
`id?`	`string \| undefined`	Identificador opcional, estable y definido por la aplicación, conservado con el marcador.
`label?`	`string \| undefined`	Optional short marker label.
`position?`	`StockMarkerPosition \| undefined`	Place above/below the nearest candle or at an explicit price.
`price?`	`number \| undefined`	Explicit price anchor. Required when position is `price`.
`shape?`	`StockMarkerShape \| undefined`	Marker glyph.
`size?`	`number \| undefined`	Marker radius/half-size in CSS pixels.
`textColor?`	`string \| undefined`	Marker label color.
`timestamp`	`number`	Marker timestamp, in the same units as the chart data.

`StockPriceLine`

A horizontal, data-anchored price level rendered over the stock chart.

Import @sixtyfold/stockinterface

interface StockPriceLine

Member	Definition	Description
`axisLabelBackground?`	`string \| undefined`	Background color for the optional axis label.
`axisLabelColor?`	`string \| undefined`	Text color for the optional axis label.
`color?`	`string \| undefined`	Line color.
`extendScale?`	`boolean \| undefined`	Include this price when calculating the visible Y scale.
`id?`	`string \| undefined`	Identificador opcional, estable y definido por la aplicación, conservado con la línea de precio.
`label?`	`string \| undefined`	Optional text rendered alongside the line.
`lineDash?`	`number[] \| undefined`	Canvas dash pattern. An empty array renders a solid line.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`price`	`number`	Price represented by the horizontal line.
`showAxisLabel?`	`boolean \| undefined`	Show a value label on the price axis.

`StockTooltipOptions`

Tooltip options for stock charts - overrides onRender with stock-specific params

Import @sixtyfold/stockinterface

interface StockTooltipOptions extends Omit<TooltipOptions, "onRender">

Member	Definition	Description
`backdropBlur?`	`number \| undefined` = `0`	Backdrop blur radius in pixels
`backgroundColor?`	`string \| undefined` = `rgba(22, 33, 62, 0.95)`	Background color with transparency')
`borderColor?`	`string \| undefined` = `#4a6fa1`	Border color
`borderRadius?`	`number \| undefined` = `0`	Border radius in pixels
`borderStyle?`	`"solid" \| "dashed" \| "dotted" \| undefined` = `solid`	Border style
`borderWidth?`	`number \| undefined` = `1`	Border width in pixels
`candleBorder?`	`boolean \| undefined` = `false`	Stock chart: use candle color (green/red) for tooltip border
`direction?`	`TextDirection \| undefined`	Text direction for tooltip text. Defaults to the chart-level textDirection.
`fieldLabels?`	`Partial<Record<StockTooltipField, string>> \| undefined`	Stock chart: display labels for built-in tooltip fields. Defaults to blank labels.
`fields?`	`StockTooltipField[] \| undefined`	Stock chart: which fields to show and in what order. Default: ['open', 'high', 'low', 'close', 'change', 'changePercent', 'volume']
`labelFont?`	`FontStyle \| undefined`	Font style for row labels (series names)
`onLeave?`	`(() => void) \| undefined`	Called when mouse leaves the chart area (useful for hiding custom HTML tooltips)
`onRender?`	`((params: StockTooltipRenderParams) => StockTooltipRenderResult) \| undefined`	Custom render callback for stock tooltip content (called on main thread)
`padding?`	`{ top?: number; right?: number; bottom?: number; left?: number; } \| undefined` = `8`	Inner padding in pixels
`position?`	`"cursor-top" \| "cursor-bottom" \| "cursor" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| undefined` = `cursor-top`	Tooltip position - 'cursor-top'/'cursor-bottom': horizontally follows crosshair, pinned to top/bottom edge - 'cursor': follows mouse position - 'top-left'/'top-right'/'bottom-left'/'bottom-right': fixed in corner
`shadow?`	`boolean \| TooltipShadowOptions \| undefined` = `disabled`	Drop shadow around tooltip box
`showSwatch?`	`boolean \| undefined` = `true`	Show color swatch next to each series label
`titleFont?`	`FontStyle \| undefined`	Font style for the tooltip title line
`titleFormat?`	`XAxisFormat \| undefined` = `auto`	Format for the tooltip title (X-axis value). - 'time': format as date/time - 'number': format as plain number - UnitOptions: custom formatting with prefix/suffix/decimals Note: auto-detection is heuristic and can classify large non-time values as time. Use explicit `titleFormat` when X values are large numeric quantities.
`valueFont?`	`FontStyle \| undefined`	Font style for row values. When color is omitted, each value uses its row/series color.
`visibleSeries?`	`number[] \| undefined` = `all series`	Line chart: which series indices to show in tooltip. Controls both visibility and order. E.g. [0, 2] shows only series 0 and 2.
`width?`	`number \| undefined`	Fixed tooltip width in pixels. - Exact: the box is always this width, regardless of content - No auto-fit: content that exceeds this width will overflow/clip - When omitted: the tooltip auto-sizes with a ratchet that prevents shrinking during a hover session

`VolumeColors`

Volume colors.

Import @sixtyfold/stockinterface

interface VolumeColors

Member	Definition	Description
`down?`	`string \| undefined`	Volume color used when `close < open`.
`up?`	`string \| undefined`	Volume color used when `close >= open`.

`VolumeProfileOptions`

Estimated visible-range volume-by-price histogram configuration. The renderer distributes each OHLCV candle's volume uniformly across its reported low-to-high range. This is a candle-derived approximation, not exact trades-at-price or order-flow data.

Import @sixtyfold/stockinterface

interface VolumeProfileOptions

Member	Definition	Description
`downColor?`	`string \| undefined`	Color assigned to bearish volume.
`opacity?`	`number \| undefined`	Profile opacity in the inclusive range 0..1.
`placement?`	`"left" \| "right" \| undefined`	Side of the price pane on which the profile is anchored.
`pointOfControlColor?`	`string \| undefined`	Point-of-control highlight color.
`rows?`	`number \| undefined`	Number of estimated price buckets.
`showPointOfControl?`	`boolean \| undefined`	Highlight the point-of-control row.
`upColor?`	`string \| undefined`	Color assigned to bullish volume.
`valueAreaPercent?`	`number \| undefined`	Percentage of volume included in the value area.
`visible?`	`boolean \| undefined`	Whether the profile is rendered. Defaults to true when configured.
`width?`	`number \| undefined`	Maximum profile width in CSS pixels.

`VWAPIndicatorConfig`

VWAP indicator options.

Import @sixtyfold/stockinterface

interface VWAPIndicatorConfig extends VWAPCalculationOptions, StockIndicatorStyle

Member	Definition	Description
`color?`	`string \| undefined`	VWAP indicator color.
`id?`	`string \| undefined`	Unique identifier for this VWAP indicator.
`includeInScale?`	`boolean \| undefined`	Whether this layer affects automatic Y-axis scaling.
`label?`	`string \| undefined`	VWAP indicator label.
`lineDash?`	`StockIndicatorLineDash \| undefined`	Canvas dash pattern in CSS pixels.
`lineWidth?`	`number \| undefined`	Line width in CSS pixels.
`reset?`	`VWAPReset \| undefined`	UTC-aligned accumulation window. Defaults to day.
`resetOffsetMs?`	`number \| undefined`	Moves the UTC reset boundary by this many milliseconds. Defaults to 0.
`source?`	`StockPriceSource \| undefined`	Defaults to the typical price, hlc3.
`type`	`"vwap"`	Selects the type.
`visible?`	`boolean \| undefined`	Whether to render the VWAP indicator.