Skip to main content
Version: 4.2

Interface: ChartOptionsImpl<HorzScaleItem>

Structure describing options of the chart. Series options are to be set separately

Type parameters

Name
HorzScaleItem

Hierarchy

Properties

width

width: number

Width of the chart in pixels

Default Value

If 0 (default) or none value provided, then a size of the widget will be calculated based its container's size.

Inherited from

ChartOptionsBase.width


height

height: number

Height of the chart in pixels

Default Value

If 0 (default) or none value provided, then a size of the widget will be calculated based its container's size.

Inherited from

ChartOptionsBase.height


autoSize

autoSize: boolean

Setting this flag to true will make the chart watch the chart container's size and automatically resize the chart to fit its container whenever the size changes.

This feature requires ResizeObserver class to be available in the global scope. Note that calling code is responsible for providing a polyfill if required. If the global scope does not have ResizeObserver, a warning will appear and the flag will be ignored.

Please pay attention that autoSize option and explicit sizes options width and height don't conflict with one another. If you specify autoSize flag, then width and height options will be ignored unless ResizeObserver has failed. If it fails then the values will be used as fallback.

The flag autoSize could also be set with and unset with applyOptions function.

const chart = LightweightCharts.createChart(document.body, {
autoSize: true,
});

Inherited from

ChartOptionsBase.autoSize


watermark

watermark: WatermarkOptions

Watermark options.

A watermark is a background label that includes a brief description of the drawn data. Any text can be added to it.

Please make sure you enable it and set an appropriate font color and size to make your watermark visible in the background of the chart. We recommend a semi-transparent color and a large font. Also note that watermark position can be aligned vertically and horizontally.

Inherited from

ChartOptionsBase.watermark


layout

layout: LayoutOptions

Layout options

Inherited from

ChartOptionsBase.layout


leftPriceScale

leftPriceScale: PriceScaleOptions

Left price scale options

Inherited from

ChartOptionsBase.leftPriceScale


rightPriceScale

rightPriceScale: PriceScaleOptions

Right price scale options

Inherited from

ChartOptionsBase.rightPriceScale


overlayPriceScales

overlayPriceScales: OverlayPriceScaleOptions

Overlay price scale options

Inherited from

ChartOptionsBase.overlayPriceScales


timeScale

timeScale: HorzScaleOptions

Time scale options

Inherited from

ChartOptionsBase.timeScale


crosshair

crosshair: CrosshairOptions

The crosshair shows the intersection of the price and time scale values at any point on the chart.

Inherited from

ChartOptionsBase.crosshair


grid

grid: GridOptions

A grid is represented in the chart background as a vertical and horizontal lines drawn at the levels of visible marks of price and the time scales.

Inherited from

ChartOptionsBase.grid


handleScroll

handleScroll: boolean | HandleScrollOptions

Scroll options, or a boolean flag that enables/disables scrolling

Inherited from

ChartOptionsBase.handleScroll


handleScale

handleScale: boolean | HandleScaleOptions

Scale options, or a boolean flag that enables/disables scaling

Inherited from

ChartOptionsBase.handleScale


kineticScroll

kineticScroll: KineticScrollOptions

Kinetic scroll options

Inherited from

ChartOptionsBase.kineticScroll


trackingMode

trackingMode: TrackingModeOptions

Represent options for the tracking mode's behavior.

Mobile users will not have the ability to see the values/dates like they do on desktop. To see it, they should enter the tracking mode. The tracking mode will deactivate the scrolling and make it possible to check values and dates.

Inherited from

ChartOptionsBase.trackingMode


localization

localization: LocalizationOptions<HorzScaleItem>

Localization options.

Overrides

ChartOptionsBase.localization