charton

Appearance

charton API

charton API / @chart-on/core / index / ChartOptions

Interface: ChartOptions ​

Defined in: packages/core/src/chart.ts:347

Every chart option: theme, grid, axes, bar spacing and scroll limits, built-in features, access rules and more. createChart and applyOptions take them in part (ChartOptionsPatch); defaultChartOptions fills the rest.

Properties ​

access ​

access: AccessOptions

Defined in: packages/core/src/chart.ts:365

Which drawing tools and indicators users may add, and the indicator limit, as createChart and applyOptions last set them. drawings.setAccess() and indicators.setAccess() override the rule for their kind until the next applyOptions({ access: { allow } }).

accessibility ​

accessibility: AccessibilityOptions

Defined in: packages/core/src/chart.ts:354

What screen readers get: a summary of the chart (on by default) and an optional live readout of the crosshair values. applyOptions merges a partial object into the current one. See chart.describe().

adjustment ​

adjustment: AdjustmentMode

Defined in: packages/core/src/chart.ts:546

Back-adjust the data source's bars for corporate actions from its adjustments: 'splits' for splits only, 'all' for dividends and other actions too. Older bars are scaled so they compare with newer ones; switching refetches nothing and keeps the view. Default 'none'.

adjustmentMarkers ​

adjustmentMarkers: boolean

Defined in: packages/core/src/chart.ts:553

Mark the corporate actions the data source reports (adjustments) on the main series, in the bottom lane of its pane, whatever adjustment applies. The markers' kind is the action's, so setMarkerFilter can select them. Default true.

animateViewChanges ​

animateViewChanges: boolean

Defined in: packages/core/src/chart.ts:465

Animate programmatic view changes (scroll to latest, fit, ranges).

applySymbolTimezone ​

applySymbolTimezone: boolean

Defined in: packages/core/src/chart.ts:514

Show each symbol loaded through the data source in its own timezone (SymbolInfo.timezone), or in timezone when it has none. Setting timezone with applyOptions while this is on keeps that timezone for later symbols too, until this option is set to true again. Default false.

barSpacing ​

barSpacing: number

Defined in: packages/core/src/chart.ts:378

crosshair ​

crosshair: CrosshairOptions

Defined in: packages/core/src/chart.ts:580

Crosshair mode, lines, labels and placement; applyOptions merges a partial one.

direction ​

direction: ChartDirection

Defined in: packages/core/src/chart.ts:500

Reading direction the defaults follow. In 'rtl' the main price scale's axis is on the left (unless setPriceScaleOptions picks a side), the legend's start corners are on the right, and the pane buttons and the scroll-to-newest button on the left. Time still runs left to right. 'auto' (the default) reads the container's computed direction when the chart is created and on each applyOptions.

extendedSession? ​

optional extendedSession?: SessionSchedule

Defined in: packages/core/src/chart.ts:570

Extended trading hours (pre- and post-market) around the regular session, in timezone. Only used for the market phase; unset means none.

features ​

features: Partial<ChartFeatures>

Defined in: packages/core/src/chart.ts:358

Built-in UI and input switches; flags left out keep their current value (see defaultChartFeatures).

fixLeftEdge ​

fixLeftEdge: boolean

Defined in: packages/core/src/chart.ts:383

The plot's left edge cannot go before the first bar; zooming out stops there too.

fixRightEdge ​

fixRightEdge: boolean

Defined in: packages/core/src/chart.ts:385

The view cannot go further right than the newest bar plus rightOffset.

focusable ​

focusable: boolean

Defined in: packages/core/src/chart.ts:428

Whether the chart is in the page's Tab order (tabIndex 0). false leaves it out (tabIndex -1); a click still focuses it, so keyboard shortcuts keep working for a chart the user clicked. Default true.

followNewBars ​

followNewBars: "always" | "whenAtEnd" | "never"

Defined in: packages/core/src/chart.ts:400

When bars are appended: 'whenAtEnd' scrolls with them while the newest bar is on screen, 'always' also scrolls back to it from older bars, 'never' keeps the same bars on screen.

formatTime? ​

optional formatTime?: (time, intervalSec) => string

Defined in: packages/core/src/chart.ts:597

Crosshair time label; intervalSec is the bar interval. Defaults to the date for daily and longer bars, else date and time, in timezone.

Parameters ​

time ​

number

intervalSec ​

number

Returns ​

string

formatTimeTick? ​

optional formatTimeTick?: (time, weight) => string

Defined in: packages/core/src/chart.ts:602

Time-axis label at a boundary of weight (TickWeight: minute up to year). Defaults to the year, month, day or hh:mm, in timezone.

Parameters ​

time ​

number

weight ​

number

Returns ​

string

gl ​

gl: "own" | "shared"

Defined in: packages/core/src/chart.ts:422

'shared' draws through one WebGL context shared by every chart created with it, instead of one context per chart ('own', the default), so a page can have any number of charts within the browser's context limit. Each chart draws into a hidden shared canvas and copies the result into its own 2D canvas. Needs the sharedContext() plugin in the creation plugins (builtins() has it); without it the chart gets its own context and gl reads 'own'. Set at creation.

grid ​

grid: GridOptions

Defined in: packages/core/src/chart.ts:356

Grid lines per direction; applyOptions merges a partial grid into the current one.

grouping ​

grouping: GroupingOptions | null

Defined in: packages/core/src/chart.ts:615

Draw several bars as one when zoomed out far, so any number of bars fits the plot: zooming can go past minBarSpacing and bars group so no bucket is narrower than about two device pixels. { mode: 'pixel' } groups 2^level bars at a time; { mode: 'calendar', steps? } groups by the finest calendar period that fits (1m, 5m, 15m, 1h, 4h, 1d, 1w, 1M, or steps), following the timezone and session, so a grouped bar looks like the bar of that interval. Candles merge into one bar (first open, highest high, lowest low, last close), histograms by their groupBy. Null (the default) draws every bar. See chart.grouping. Needs the grouping() plugin; without it the option is kept and checked, but bars draw singly.

historyThreshold ​

historyThreshold: number

Defined in: packages/core/src/chart.ts:502

Bars from the left edge that trigger a history:request event.

inertia ​

inertia: boolean

Defined in: packages/core/src/chart.ts:430

Momentum after drag-panning.

interactive ​

interactive: boolean

Defined in: packages/core/src/chart.ts:412

false makes a static chart, for thumbnails and sparklines: no pointer, wheel, touch or keyboard input, no crosshair, no animations, and it holds a WebGL context only while it draws. After each drawing settles, the GPU layer is copied into a 2D canvas and the context is given back (the context:lost / context:restored events say 'budget'), so many static charts fit within the browser's context limit. New data, options or a new size take a context back for one more drawing. Set at creation; default true.

keepRangeOnIntervalChange ​

keepRangeOnIntervalChange: boolean

Defined in: packages/core/src/chart.ts:531

Keep the visible start and end times when setSymbol changes only the interval (a view reaching the newest bar keeps the newest bar): older history pages in, one page per task, until the range is covered, then the view fits it. Too long a range for the minimum bar spacing keeps its right edge, and pages in only the bars that fit.

keepZoomOnSymbolChange ​

keepZoomOnSymbolChange: boolean

Defined in: packages/core/src/chart.ts:539

Keep the zoom (the bar spacing) when setSymbol loads another symbol: it opens at its newest bars with the same number of bars in view, and pages in older history when the view is wider than the first load. Off, the new symbol opens at the default zoom with every pane autoscaled, like resetView.

keyboard ​

keyboard: object

Defined in: packages/core/src/chart.ts:455

Where keyboard shortcuts work: 'focus' (default) while the chart has focus, 'hover' also while the pointer is over it, 'global' anywhere on the page. Keys typed into an input or editable element, or inside a dialog, are left alone.

scope ​

scope: "focus" | "hover" | "global"

legend ​

legend: LegendOptions

Defined in: packages/core/src/chart.ts:480

Legend settings: position, mode, change, idle values and a formatter (see LegendOptions). chart.options.legend mirrors the resolved settings, with visible from features.legend.

localization ​

localization: LocalizationOptions

Defined in: packages/core/src/chart.ts:592

Language of numbers, dates and built-in text: a locale for Intl, a decimal mark and hour cycle of your own, and message overrides or a translate hook. applyOptions merges a partial object into the current one; a messages object there replaces the previous one. Default {}: the built-in English formats. See chart.localization and localization:change. Takes effect with the localization() plugin; without it the option is only checked and the chart keeps the built-in English.

lockVisibleRangeOnResize ​

lockVisibleRangeOnResize: boolean

Defined in: packages/core/src/chart.ts:394

When the plot width changes, rescale the bar spacing so the same bars stay visible, instead of keeping the spacing and showing more or fewer bars.

lowPower ​

lowPower: boolean

Defined in: packages/core/src/chart.ts:651

Spend less GPU and battery, for machines without a dedicated GPU: no decorative animations (forming-bar tween, eased zoom, price-scale and view easing, the last-point pulse ring), the WebGL layer at most at pixel ratio 1, heatmaps sampled at one cell per pixel, and at most 20 frames a second while there is no input. Data and drawings show as before. Independent of prefers-reduced-motion, which still applies when this is off. See chart.frameTime and the frame:slow event for offering it. Default false.

marketStatus ​

marketStatus: boolean

Defined in: packages/core/src/chart.ts:572

Badge in the main pane's legend with the market phase and the data delay. Needs the marketStatus() plugin.

marks ​

marks: boolean

Defined in: packages/core/src/chart.ts:559

Draw the data source's markers placed on bars (DataSource.markers) on the main series. With timeMarks also off, none are fetched and sourceMarkers is empty. Default true.

maxBarSpacing ​

maxBarSpacing: number

Defined in: packages/core/src/chart.ts:380

maxGlDpr ​

maxGlDpr: number

Defined in: packages/core/src/chart.ts:402

Device-pixel-ratio cap for the WebGL layer (fill-rate on hi-dpi screens).

maxRightOffset? ​

optional maxRightOffset?: number

Defined in: packages/core/src/chart.ts:387

Most empty bars allowed right of the newest bar; unset for no limit.

minBarCoverage ​

minBarCoverage: number

Defined in: packages/core/src/chart.ts:389

Share of the plot width (0 to 1) bars keep covering when panning towards either end, the same at every zoom.

minBarSpacing ​

minBarSpacing: number

Defined in: packages/core/src/chart.ts:379

paneButtons ​

paneButtons: boolean

Defined in: packages/core/src/chart.ts:482

Per-pane buttons (move, maximize, collapse, remove) on hover.

paneDoubleClickMaximize ​

paneDoubleClickMaximize: boolean

Defined in: packages/core/src/chart.ts:491

Double-clicking a pane's plot maximizes it, or restores the others, like its maximize button. Default true: every double-click on a chart region resets that region's prominent state (the time axis scrolls to the newest bar, a price axis turns autoscale back on), so the plot's toggles its pane. Single-pane charts and double-clicks a drawing handles are left alone; plot:dblclick still fires.

plotDragScale ​

plotDragScale: boolean

Defined in: packages/core/src/chart.ts:461

The vertical part of a plot drag rescales the pane's main price scale and turns its autoscale off, like dragging the axis. Needs the axisDragScale feature. Default false.

priceAxis ​

priceAxis: PriceAxisOptions

Defined in: packages/core/src/chart.ts:375

How priceAxisWidth: 'auto' sizes the axis columns, the axis lines and font, and the filled labels; applyOptions merges a partial one.

priceAxisWidth ​

priceAxisWidth: number | "auto"

Defined in: packages/core/src/chart.ts:370

Width (css px) of one price axis column, or 'auto' to fit each side's columns to their widest label (see priceAxis). Default 'auto'.

referenceLines? ​

optional referenceLines?: ReferenceLinesUpdate

Defined in: packages/core/src/chart.ts:624

Previous close, visible high/low/average, bid/ask and extended-hours lines, merged per line; all are off by default. They need the referenceLines() plugin: with it, chart.options.referenceLines is the resolved chart.referenceLines.options, not the last patch; without it, the patches merged per line, kept for a later install. An unknown line or line style throws either way.

renderStats ​

renderStats: boolean

Defined in: packages/core/src/chart.ts:631

Measure every frame: GPU draw calls, instances and uploads, CPU time per phase and GPU memory, reported by chart.frameStats and the frame:render event. Needs the statsOverlay() plugin (or builtins()). Off by default; while off, frames make no timing calls.

renderStatsOverlay ​

renderStatsOverlay: boolean | "bounds"

Defined in: packages/core/src/chart.ts:641

Show the render statistics on the chart: a small panel in the bottom-left corner of the lowest pane with a sparkline of recent frame times and the last frame's counters, GPU time and memory. 'bounds' also outlines the panes, axis columns, lanes and time axis, and shades where the pointer would grab each drawing. Measures frames while on, as renderStats does. Needs the statsOverlay() plugin (or builtins()). Off (false) by default.

renderWhenHidden ​

renderWhenHidden: boolean

Defined in: packages/core/src/chart.ts:472

Keep drawing while the chart is scrolled out of view or its page is in a background tab. Off by default: a hidden chart keeps its data, view and events current but draws nothing, and draws once, with animations at their end, when it is shown again. captureImage and resize draw either way.

rightOffset ​

rightOffset: number

Defined in: packages/core/src/chart.ts:381

scrollButton ​

scrollButton: boolean

Defined in: packages/core/src/chart.ts:474

Floating button that scrolls back to the newest bar.

session ​

session: SessionSchedule

Defined in: packages/core/src/chart.ts:519

Trading hours in timezone: weekly ranges, holidays and one-day overrides. Day, month and year boundaries follow its trading days. Default ALWAYS_OPEN.

sessionBreaks ​

sessionBreaks: boolean

Defined in: packages/core/src/chart.ts:521

Dashed line where each trading day starts on intraday charts with a session.

sessionShading ​

sessionShading: boolean

Defined in: packages/core/src/chart.ts:523

Shade bars outside the session.

sketch ​

sketch: SketchGestureOptions

Defined in: packages/core/src/chart.ts:582

The sketch gesture's hold time; applyOptions merges a partial one.

smoothScale ​

smoothScale: boolean

Defined in: packages/core/src/chart.ts:463

Ease price-scale range changes instead of jumping.

smoothZoom ​

smoothZoom: boolean

Defined in: packages/core/src/chart.ts:432

Animate mouse-wheel zoom and scroll steps.

theme ​

theme: Partial<ChartTheme>

Defined in: packages/core/src/chart.ts:348

timeAxis ​

timeAxis: TimeAxisOptions

Defined in: packages/core/src/chart.ts:377

Time axis visibility, height, lines, font and time labels; applyOptions merges a partial one.

timeMarks ​

timeMarks: boolean

Defined in: packages/core/src/chart.ts:565

Draw the data source's timeAxis markers in their band under the time labels; off, the band goes too. With marks also off, none are fetched. Default true.

timezone ​

timezone: string

Defined in: packages/core/src/chart.ts:507

IANA timezone for axis labels, the crosshair and the countdown, e.g. 'America/New_York', or 'local' (the default) for the machine's timezone.

touchInspect ​

touchInspect: "off" | "release" | "tap"

Defined in: packages/core/src/chart.ts:578

Touch long-press: the crosshair follows the finger and the chart does not pan. 'release' ends it when the finger lifts, 'tap' keeps the crosshair until the next tap, 'off' turns the long-press off.

wheel ​

wheel: "zoom" | "pan" | "page"

Defined in: packages/core/src/chart.ts:438

What the plain mouse wheel does: 'zoom' zooms time, 'pan' scrolls it, 'page' leaves it to the page (for charts in a scrolling page). Ctrl/⌘+wheel zooms and Shift+wheel pans in every mode. Default 'zoom'.

zoomAnchor ​

zoomAnchor: ZoomAnchorOptions

Defined in: packages/core/src/chart.ts:448

What a time zoom keeps fixed: plot for the wheel, pinch and + / - keys, timeAxis for dragging the time axis. 'pointer' keeps the bar under the pointer (the press point for a time-axis drag; the keys, which have no pointer, use the right edge), 'newest' the newest bar while it is on screen and the pointer otherwise, 'right-edge' the plot's right edge. applyOptions takes one anchor for both or a partial object. Default { plot: 'pointer', timeAxis: 'right-edge' }.