# Table of Contents - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [lightweight-charts | Lightweight Charts](#lightweight-charts-lightweight-charts) - [Variable: AreaSeries | Lightweight Charts](#variable-areaseries-lightweight-charts) - [Enumeration: ColorType | Lightweight Charts](#enumeration-colortype-lightweight-charts) - [Enumeration: CrosshairMode | Lightweight Charts](#enumeration-crosshairmode-lightweight-charts) - [Enumeration: LastPriceAnimationMode | Lightweight Charts](#enumeration-lastpriceanimationmode-lightweight-charts) - [Enumeration: LineStyle | Lightweight Charts](#enumeration-linestyle-lightweight-charts) - [Enumeration: LineType | Lightweight Charts](#enumeration-linetype-lightweight-charts) - [Enumeration: PriceLineSource | Lightweight Charts](#enumeration-pricelinesource-lightweight-charts) - [Enumeration: PriceScaleMode | Lightweight Charts](#enumeration-pricescalemode-lightweight-charts) - [Enumeration: TickMarkType | Lightweight Charts](#enumeration-tickmarktype-lightweight-charts) - [Enumeration: TrackingModeExitMode | Lightweight Charts](#enumeration-trackingmodeexitmode-lightweight-charts) - [Enumeration: MismatchDirection | Lightweight Charts](#enumeration-mismatchdirection-lightweight-charts) - [Enumeration: MarkerSign | Lightweight Charts](#enumeration-markersign-lightweight-charts) - [Function: createChart() | Lightweight Charts](#function-createchart-lightweight-charts) - [Variable: customSeriesDefaultOptions | Lightweight Charts](#variable-customseriesdefaultoptions-lightweight-charts) - [Variable: BarSeries | Lightweight Charts](#variable-barseries-lightweight-charts) - [Variable: BaselineSeries | Lightweight Charts](#variable-baselineseries-lightweight-charts) - [Variable: HistogramSeries | Lightweight Charts](#variable-histogramseries-lightweight-charts) - [Variable: CandlestickSeries | Lightweight Charts](#variable-candlestickseries-lightweight-charts) - [Variable: LineSeries | Lightweight Charts](#variable-lineseries-lightweight-charts) - [Function: version() | Lightweight Charts](#function-version-lightweight-charts) - [Function: isUTCTimestamp() | Lightweight Charts](#function-isutctimestamp-lightweight-charts) - [Function: isBusinessDay() | Lightweight Charts](#function-isbusinessday-lightweight-charts) - [Function: createChartEx() | Lightweight Charts](#function-createchartex-lightweight-charts) - [Function: defaultHorzScaleBehavior() | Lightweight Charts](#function-defaulthorzscalebehavior-lightweight-charts) - [Function: createOptionsChart() | Lightweight Charts](#function-createoptionschart-lightweight-charts) - [Function: createYieldCurveChart() | Lightweight Charts](#function-createyieldcurvechart-lightweight-charts) - [Function: createImageWatermark() | Lightweight Charts](#function-createimagewatermark-lightweight-charts) - [Function: createTextWatermark() | Lightweight Charts](#function-createtextwatermark-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Function: createUpDownMarkers() | Lightweight Charts](#function-createupdownmarkers-lightweight-charts) - [Function: createSeriesMarkers() | Lightweight Charts](#function-createseriesmarkers-lightweight-charts) - [Type alias: AlphaComponent | Lightweight Charts](#type-alias-alphacomponent-lightweight-charts) - [Type alias: BarPrice | Lightweight Charts](#type-alias-barprice-lightweight-charts) - [Type alias: AreaSeriesOptions | Lightweight Charts](#type-alias-areaseriesoptions-lightweight-charts) - [Type alias: AreaSeriesPartialOptions | Lightweight Charts](#type-alias-areaseriespartialoptions-lightweight-charts) - [Type alias: AutoscaleInfoProvider() | Lightweight Charts](#type-alias-autoscaleinfoprovider-lightweight-charts) - [Type alias: BarSeriesOptions | Lightweight Charts](#type-alias-barseriesoptions-lightweight-charts) - [Type alias: BarSeriesPartialOptions | Lightweight Charts](#type-alias-barseriespartialoptions-lightweight-charts) - [Type alias: BaseValueType | Lightweight Charts](#type-alias-basevaluetype-lightweight-charts) - [Type alias: BaselineSeriesOptions | Lightweight Charts](#type-alias-baselineseriesoptions-lightweight-charts) - [Type alias: Coordinate | Lightweight Charts](#type-alias-coordinate-lightweight-charts) - [Interface: AreaData\ | Lightweight Charts](#interface-areadata-horzscaleitem-lightweight-charts) - [Type alias: Background | Lightweight Charts](#type-alias-background-lightweight-charts) - [Type alias: BaselineSeriesPartialOptions | Lightweight Charts](#type-alias-baselineseriespartialoptions-lightweight-charts) - [Type alias: CandlestickSeriesOptions | Lightweight Charts](#type-alias-candlestickseriesoptions-lightweight-charts) - [Type alias: CandlestickSeriesPartialOptions | Lightweight Charts](#type-alias-candlestickseriespartialoptions-lightweight-charts) - [Type alias: DeepPartial\ | Lightweight Charts](#type-alias-deeppartial-t-lightweight-charts) - [Type alias: HorzAlign | Lightweight Charts](#type-alias-horzalign-lightweight-charts) - [Interface: AutoscaleInfo | Lightweight Charts](#interface-autoscaleinfo-lightweight-charts) - [Interface: AutoScaleMargins | Lightweight Charts](#interface-autoscalemargins-lightweight-charts) - [Type alias: CreatePriceLineOptions | Lightweight Charts](#type-alias-createpricelineoptions-lightweight-charts) - [Type alias: HistogramSeriesOptions | Lightweight Charts](#type-alias-histogramseriesoptions-lightweight-charts) - [Type alias: HistogramSeriesPartialOptions | Lightweight Charts](#type-alias-histogramseriespartialoptions-lightweight-charts) - [Type alias: CustomSeriesPricePlotValues | Lightweight Charts](#type-alias-customseriespriceplotvalues-lightweight-charts) - [Type alias: DataChangedHandler() | Lightweight Charts](#type-alias-datachangedhandler-lightweight-charts) - [Type alias: LineWidth | Lightweight Charts](#type-alias-linewidth-lightweight-charts) - [Type alias: Logical | Lightweight Charts](#type-alias-logical-lightweight-charts) - [Type alias: ChartOptions | Lightweight Charts](#type-alias-chartoptions-lightweight-charts) - [Type alias: DataChangedScope | Lightweight Charts](#type-alias-datachangedscope-lightweight-charts) - [Interface: AxisPressedMouseMoveOptions | Lightweight Charts](#interface-axispressedmousemoveoptions-lightweight-charts) - [Type alias: CustomSeriesOptions | Lightweight Charts](#type-alias-customseriesoptions-lightweight-charts) - [Type alias: LineSeriesOptions | Lightweight Charts](#type-alias-lineseriesoptions-lightweight-charts) - [Type alias: LineSeriesPartialOptions | Lightweight Charts](#type-alias-lineseriespartialoptions-lightweight-charts) - [Type alias: LogicalRangeChangeEventHandler() | Lightweight Charts](#type-alias-logicalrangechangeeventhandler-lightweight-charts) - [Interface: BarStyleOptions | Lightweight Charts](#interface-barstyleoptions-lightweight-charts) - [Type alias: BlueComponent | Lightweight Charts](#type-alias-bluecomponent-lightweight-charts) - [Type alias: CustomSeriesPartialOptions | Lightweight Charts](#type-alias-customseriespartialoptions-lightweight-charts) - [Type alias: HorzScaleItemConverterToInternalObj()\ | Lightweight Charts](#type-alias-horzscaleitemconvertertointernalobj-horzscaleitem-lightweight-charts) - [Type alias: Nominal\ | Lightweight Charts](#type-alias-nominal-t-name-lightweight-charts) - [Type alias: ColorSpace | Lightweight Charts](#type-alias-colorspace-lightweight-charts) - [Type alias: InternalHorzScaleItem | Lightweight Charts](#type-alias-internalhorzscaleitem-lightweight-charts) - [Type alias: LogicalRange | Lightweight Charts](#type-alias-logicalrange-lightweight-charts) - [Type alias: OverlayPriceScaleOptions | Lightweight Charts](#type-alias-overlaypricescaleoptions-lightweight-charts) - [Type alias: PriceFormatterFn() | Lightweight Charts](#type-alias-priceformatterfn-lightweight-charts) - [Interface: AxisDoubleClickOptions | Lightweight Charts](#interface-axisdoubleclickoptions-lightweight-charts) - [Type alias: DataItem\ | Lightweight Charts](#type-alias-dataitem-horzscaleitem-lightweight-charts) - [Type alias: InternalHorzScaleItemKey | Lightweight Charts](#type-alias-internalhorzscaleitemkey-lightweight-charts) - [Type alias: MouseEventHandler()\ | Lightweight Charts](#type-alias-mouseeventhandler-horzscaleitem-lightweight-charts) - [Type alias: SeriesMarkerPosition | Lightweight Charts](#type-alias-seriesmarkerposition-lightweight-charts) - [Type alias: SeriesMarkerShape | Lightweight Charts](#type-alias-seriesmarkershape-lightweight-charts) - [Interface: BarData\ | Lightweight Charts](#interface-bardata-horzscaleitem-lightweight-charts) - [Interface: BarsInfo\ | Lightweight Charts](#interface-barsinfo-horzscaleitem-lightweight-charts) - [Type alias: CustomColorParser() | Lightweight Charts](#type-alias-customcolorparser-lightweight-charts) - [Type alias: GreenComponent | Lightweight Charts](#type-alias-greencomponent-lightweight-charts) - [Type alias: Mutable\ | Lightweight Charts](#type-alias-mutable-t-lightweight-charts) - [Interface: BaseValuePrice | Lightweight Charts](#interface-basevalueprice-lightweight-charts) - [Type alias: HorzScalePriceItem | Lightweight Charts](#type-alias-horzscalepriceitem-lightweight-charts) - [Type alias: PriceFormat | Lightweight Charts](#type-alias-priceformat-lightweight-charts) - [Type alias: PercentageFormatterFn() | Lightweight Charts](#type-alias-percentageformatterfn-lightweight-charts) - [Type alias: SizeChangeEventHandler() | Lightweight Charts](#type-alias-sizechangeeventhandler-lightweight-charts) - [Type alias: SeriesPartialOptions\ | Lightweight Charts](#type-alias-seriespartialoptions-t-lightweight-charts) - [Type alias: SeriesOptions\ | Lightweight Charts](#type-alias-seriesoptions-t-lightweight-charts) - [Type alias: ISeriesPrimitive\ | Lightweight Charts](#type-alias-iseriesprimitive-horzscaleitem-lightweight-charts) - [Type alias: PriceToCoordinateConverter() | Lightweight Charts](#type-alias-pricetocoordinateconverter-lightweight-charts) - [Type alias: TimeFormatterFn()\ | Lightweight Charts](#type-alias-timeformatterfn-horzscaleitem-lightweight-charts) - [Type alias: VertAlign | Lightweight Charts](#type-alias-vertalign-lightweight-charts) - [Type alias: SeriesType | Lightweight Charts](#type-alias-seriestype-lightweight-charts) - [Interface: CandlestickStyleOptions | Lightweight Charts](#interface-candlestickstyleoptions-lightweight-charts) - [Interface: BusinessDay | Lightweight Charts](#interface-businessday-lightweight-charts) - [Type alias: UTCTimestamp | Lightweight Charts](#type-alias-utctimestamp-lightweight-charts) - [Interface: AreaStyleOptions | Lightweight Charts](#interface-areastyleoptions-lightweight-charts) - [Type alias: TickMarkFormatter() | Lightweight Charts](#type-alias-tickmarkformatter-lightweight-charts) - [Type alias: TimeRangeChangeEventHandler()\ | Lightweight Charts](#type-alias-timerangechangeeventhandler-horzscaleitem-lightweight-charts) - [Type alias: Time | Lightweight Charts](#type-alias-time-lightweight-charts) - [Interface: BaselineData\ | Lightweight Charts](#interface-baselinedata-horzscaleitem-lightweight-charts) - [Interface: CandlestickData\ | Lightweight Charts](#interface-candlestickdata-horzscaleitem-lightweight-charts) - [Type alias: TickMarkWeightValue | Lightweight Charts](#type-alias-tickmarkweightvalue-lightweight-charts) - [Type alias: IImageWatermarkPluginApi\ | Lightweight Charts](#type-alias-iimagewatermarkpluginapi-t-lightweight-charts) - [Type alias: IPanePrimitive\ | Lightweight Charts](#type-alias-ipaneprimitive-horzscaleitem-lightweight-charts) - [Type alias: ITextWatermarkPluginApi\ | Lightweight Charts](#type-alias-itextwatermarkpluginapi-t-lightweight-charts) - [Type alias: PrimitivePaneViewZOrder | Lightweight Charts](#type-alias-primitivepaneviewzorder-lightweight-charts) - [Type alias: PrimitiveHasApplyOptions\ | Lightweight Charts](#type-alias-primitivehasapplyoptions-t-lightweight-charts) - [Type alias: Rgba | Lightweight Charts](#type-alias-rgba-lightweight-charts) - [Type alias: RedComponent | Lightweight Charts](#type-alias-redcomponent-lightweight-charts) - [Type alias: TimePointIndex | Lightweight Charts](#type-alias-timepointindex-lightweight-charts) - [Type alias: VisiblePriceScaleOptions | Lightweight Charts](#type-alias-visiblepricescaleoptions-lightweight-charts) - [Type alias: LastValueDataResult | Lightweight Charts](#type-alias-lastvaluedataresult-lightweight-charts) - [Type alias: SeriesMarkerBarPosition | Lightweight Charts](#type-alias-seriesmarkerbarposition-lightweight-charts) - [Type alias: SeriesMarkerPricePosition | Lightweight Charts](#type-alias-seriesmarkerpriceposition-lightweight-charts) - [Interface: CrosshairOptions | Lightweight Charts](#interface-crosshairoptions-lightweight-charts) - [Type alias: SeriesMarkerZOrder | Lightweight Charts](#type-alias-seriesmarkerzorder-lightweight-charts) - [Interface: CrosshairLineOptions | Lightweight Charts](#interface-crosshairlineoptions-lightweight-charts) - [Type alias: TickmarksPercentageFormatterFn() | Lightweight Charts](#type-alias-tickmarkspercentageformatterfn-lightweight-charts) - [Type alias: TickmarksPriceFormatterFn() | Lightweight Charts](#type-alias-tickmarkspriceformatterfn-lightweight-charts) - [Interface: CustomBarItemData\ | Lightweight Charts](#interface-custombaritemdata-horzscaleitem-tdata-lightweight-charts) - [Type alias: UpDownMarkersSupportedSeriesTypes | Lightweight Charts](#type-alias-updownmarkerssupportedseriestypes-lightweight-charts) - [Interface: HandleScaleOptions | Lightweight Charts](#interface-handlescaleoptions-lightweight-charts) - [Interface: GridOptions | Lightweight Charts](#interface-gridoptions-lightweight-charts) - [Type alias: SeriesMarker\ | Lightweight Charts](#type-alias-seriesmarker-timetype-lightweight-charts) - [Interface: HandleScrollOptions | Lightweight Charts](#interface-handlescrolloptions-lightweight-charts) - [Type alias: YieldCurveSeriesType | Lightweight Charts](#type-alias-yieldcurveseriestype-lightweight-charts) - [Interface: ChartOptionsBase | Lightweight Charts](#interface-chartoptionsbase-lightweight-charts) - [Interface: CustomSeriesWhitespaceData\ | Lightweight Charts](#interface-customserieswhitespacedata-horzscaleitem-lightweight-charts) - [Interface: GridLineOptions | Lightweight Charts](#interface-gridlineoptions-lightweight-charts) - [Interface: HistogramStyleOptions | Lightweight Charts](#interface-histogramstyleoptions-lightweight-charts) - [Interface: BaselineStyleOptions | Lightweight Charts](#interface-baselinestyleoptions-lightweight-charts) - [Interface: CustomData\ | Lightweight Charts](#interface-customdata-horzscaleitem-lightweight-charts) - [Interface: CustomStyleOptions | Lightweight Charts](#interface-customstyleoptions-lightweight-charts) - [Interface: ChartOptionsImpl\ | Lightweight Charts](#interface-chartoptionsimpl-horzscaleitem-lightweight-charts) - [Interface: HistogramData\ | Lightweight Charts](#interface-histogramdata-horzscaleitem-lightweight-charts) - [Interface: IPriceFormatter | Lightweight Charts](#interface-ipriceformatter-lightweight-charts) - [Interface: IPriceLine | Lightweight Charts](#interface-ipriceline-lightweight-charts) - [Interface: IPriceScaleApi | Lightweight Charts](#interface-ipricescaleapi-lightweight-charts) - [Interface: ICustomSeriesPaneRenderer | Lightweight Charts](#interface-icustomseriespanerenderer-lightweight-charts) - [Interface: DrawingUtils | Lightweight Charts](#interface-drawingutils-lightweight-charts) - [Interface: HorzScaleOptions | Lightweight Charts](#interface-horzscaleoptions-lightweight-charts) - [Interface: CustomConflationContext\ | Lightweight Charts](#interface-customconflationcontext-horzscaleitem-tdata-lightweight-charts) - [Interface: KineticScrollOptions | Lightweight Charts](#interface-kineticscrolloptions-lightweight-charts) - [Interface: ISeriesPrimitiveAxisView | Lightweight Charts](#interface-iseriesprimitiveaxisview-lightweight-charts) - [Interface: IPanePrimitiveBase\ | Lightweight Charts](#interface-ipaneprimitivebase-tpaneattachedparameters-lightweight-charts) - [Interface: IPrimitivePaneRenderer | Lightweight Charts](#interface-iprimitivepanerenderer-lightweight-charts) - [Interface: ICustomSeriesPaneView\ | Lightweight Charts](#interface-icustomseriespaneview-horzscaleitem-tdata-tseriesoptions-lightweight-charts) - [Interface: IPanePrimitivePaneView | Lightweight Charts](#interface-ipaneprimitivepaneview-lightweight-charts) - [Interface: IPanePrimitiveWrapper\ | Lightweight Charts](#interface-ipaneprimitivewrapper-t-options-lightweight-charts) - [Interface: LineData\ | Lightweight Charts](#interface-linedata-horzscaleitem-lightweight-charts) - [Interface: IRange\ | Lightweight Charts](#interface-irange-t-lightweight-charts) - [Interface: ISeriesPrimitiveBase\ | Lightweight Charts](#interface-iseriesprimitivebase-tseriesattachedparameters-lightweight-charts) - [Interface: OhlcData\ | Lightweight Charts](#interface-ohlcdata-horzscaleitem-lightweight-charts) - [Interface: IPrimitivePaneView | Lightweight Charts](#interface-iprimitivepaneview-lightweight-charts) - [Interface: Point | Lightweight Charts](#interface-point-lightweight-charts) - [Interface: PaneRendererCustomData\ | Lightweight Charts](#interface-panerenderercustomdata-horzscaleitem-tdata-lightweight-charts) - [Interface: ImageWatermarkOptions | Lightweight Charts](#interface-imagewatermarkoptions-lightweight-charts) - [Interface: PaneSize | Lightweight Charts](#interface-panesize-lightweight-charts) - [Interface: IHorzScaleBehavior\ | Lightweight Charts](#interface-ihorzscalebehavior-horzscaleitem-lightweight-charts) - [Interface: PriceFormatBuiltIn | Lightweight Charts](#interface-priceformatbuiltin-lightweight-charts) - [Interface: LayoutPanesOptions | Lightweight Charts](#interface-layoutpanesoptions-lightweight-charts) - [Interface: LastValueDataResultWithoutData | Lightweight Charts](#interface-lastvaluedataresultwithoutdata-lightweight-charts) - [Interface: LastValueDataResultWithData | Lightweight Charts](#interface-lastvaluedataresultwithdata-lightweight-charts) - [Interface: LayoutOptions | Lightweight Charts](#interface-layoutoptions-lightweight-charts) - [Interface: LineStyleOptions | Lightweight Charts](#interface-linestyleoptions-lightweight-charts) - [Interface: PaneAttachedParameter\ | Lightweight Charts](#interface-paneattachedparameter-horzscaleitem-lightweight-charts) - [Interface: PriceRange | Lightweight Charts](#interface-pricerange-lightweight-charts) - [Interface: PriceScaleMargins | Lightweight Charts](#interface-pricescalemargins-lightweight-charts) - [Interface: LocalizationOptions\ | Lightweight Charts](#interface-localizationoptions-horzscaleitem-lightweight-charts) - [Interface: LocalizationOptionsBase | Lightweight Charts](#interface-localizationoptionsbase-lightweight-charts) - [Interface: PriceFormatCustom | Lightweight Charts](#interface-priceformatcustom-lightweight-charts) - [Interface: SeriesDataItemTypeMap\ | Lightweight Charts](#interface-seriesdataitemtypemap-horzscaleitem-lightweight-charts) - [Interface: PriceScaleOptions | Lightweight Charts](#interface-pricescaleoptions-lightweight-charts) - [Interface: PriceLineOptions | Lightweight Charts](#interface-pricelineoptions-lightweight-charts) - [Interface: SolidColor | Lightweight Charts](#interface-solidcolor-lightweight-charts) - [Interface: IChartApi | Lightweight Charts](#interface-ichartapi-lightweight-charts) - [Interface: PriceChartOptions | Lightweight Charts](#interface-pricechartoptions-lightweight-charts) - [Interface: SingleValueData\ | Lightweight Charts](#interface-singlevaluedata-horzscaleitem-lightweight-charts) - [Interface: PrimitiveHoveredItem | Lightweight Charts](#interface-primitivehovereditem-lightweight-charts) - [Interface: SeriesPartialOptionsMap | Lightweight Charts](#interface-seriespartialoptionsmap-lightweight-charts) - [Interface: IPaneApi\ | Lightweight Charts](#interface-ipaneapi-horzscaleitem-lightweight-charts) - [Interface: IChartApiBase\ | Lightweight Charts](#interface-ichartapibase-horzscaleitem-lightweight-charts) - [Interface: ITimeScaleApi\ | Lightweight Charts](#interface-itimescaleapi-horzscaleitem-lightweight-charts) - [Interface: ISeriesApi\ | Lightweight Charts](#interface-iseriesapi-tseriestype-horzscaleitem-tdata-toptions-tpartialoptions-lightweight-charts) - [Interface: SeriesAttachedParameter\ | Lightweight Charts](#interface-seriesattachedparameter-horzscaleitem-tseriestype-lightweight-charts) - [Interface: ISeriesPrimitiveWrapper\ | Lightweight Charts](#interface-iseriesprimitivewrapper-t-options-lightweight-charts) - [Interface: VerticalGradientColor | Lightweight Charts](#interface-verticalgradientcolor-lightweight-charts) - [Interface: MouseEventParams\ | Lightweight Charts](#interface-mouseeventparams-horzscaleitem-lightweight-charts) - [Interface: TrackingModeOptions | Lightweight Charts](#interface-trackingmodeoptions-lightweight-charts) - [Interface: ISeriesMarkersPluginApi\ | Lightweight Charts](#interface-iseriesmarkerspluginapi-horzscaleitem-lightweight-charts) - [Interface: PriceChartLocalizationOptions | Lightweight Charts](#interface-pricechartlocalizationoptions-lightweight-charts) - [Interface: SeriesDefinition\ | Lightweight Charts](#interface-seriesdefinition-t-lightweight-charts) - [Interface: SeriesStyleOptionsMap | Lightweight Charts](#interface-seriesstyleoptionsmap-lightweight-charts) - [Interface: WhitespaceData\ | Lightweight Charts](#interface-whitespacedata-horzscaleitem-lightweight-charts) - [Interface: TouchMouseEventData | Lightweight Charts](#interface-touchmouseeventdata-lightweight-charts) - [Interface: SeriesMarkersOptions | Lightweight Charts](#interface-seriesmarkersoptions-lightweight-charts) - [Interface: TimeMark | Lightweight Charts](#interface-timemark-lightweight-charts) - [Interface: TimeScaleOptions | Lightweight Charts](#interface-timescaleoptions-lightweight-charts) - [Interface: ISeriesUpDownMarkerPluginApi\ | Lightweight Charts](#interface-iseriesupdownmarkerpluginapi-horzscaleitem-tdata-lightweight-charts) - [Interface: TextWatermarkLineOptions | Lightweight Charts](#interface-textwatermarklineoptions-lightweight-charts) - [Interface: TimeScalePoint | Lightweight Charts](#interface-timescalepoint-lightweight-charts) - [Interface: SeriesMarkerPrice\ | Lightweight Charts](#interface-seriesmarkerprice-timetype-lightweight-charts) - [Interface: SeriesUpDownMarker\ | Lightweight Charts](#interface-seriesupdownmarker-t-lightweight-charts) - [Interface: TickMark | Lightweight Charts](#interface-tickmark-lightweight-charts) - [Interface: SeriesMarkerBar\ | Lightweight Charts](#interface-seriesmarkerbar-timetype-lightweight-charts) - [Interface: SeriesOptionsCommon | Lightweight Charts](#interface-seriesoptionscommon-lightweight-charts) - [Interface: SeriesMarkerBase\ | Lightweight Charts](#interface-seriesmarkerbase-timetype-lightweight-charts) - [Interface: TimeChartOptions | Lightweight Charts](#interface-timechartoptions-lightweight-charts) - [Interface: SeriesOptionsMap | Lightweight Charts](#interface-seriesoptionsmap-lightweight-charts) - [Interface: UpDownMarkersPluginOptions | Lightweight Charts](#interface-updownmarkerspluginoptions-lightweight-charts) - [Interface: YieldCurveOptions | Lightweight Charts](#interface-yieldcurveoptions-lightweight-charts) - [Interface: TextWatermarkOptions | Lightweight Charts](#interface-textwatermarkoptions-lightweight-charts) - [Interface: IYieldCurveChartApi | Lightweight Charts](#interface-iyieldcurvechartapi-lightweight-charts) - [Interface: YieldCurveChartOptions | Lightweight Charts](#interface-yieldcurvechartoptions-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Getting started | Lightweight Charts](#getting-started-lightweight-charts) - [Series | Lightweight Charts](#series-lightweight-charts) - [Chart types | Lightweight Charts](#chart-types-lightweight-charts) - [Price scale | Lightweight Charts](#price-scale-lightweight-charts) - [Time scale | Lightweight Charts](#time-scale-lightweight-charts) - [Panes | Lightweight Charts](#panes-lightweight-charts) - [Time zones | Lightweight Charts](#time-zones-lightweight-charts) - [Plugins | Lightweight Charts](#plugins-lightweight-charts) - [From v2 to v3 | Lightweight Charts](#from-v2-to-v3-lightweight-charts) - [iOS wrapper | Lightweight Charts](#ios-wrapper-lightweight-charts) - [Android wrapper | Lightweight Charts](#android-wrapper-lightweight-charts) - [Release Notes | Lightweight Charts](#release-notes-lightweight-charts) - [Price scale | Lightweight Charts](#price-scale-lightweight-charts) - [Panes | Lightweight Charts](#panes-lightweight-charts) - [Series | Lightweight Charts](#series-lightweight-charts) - [Time zones | Lightweight Charts](#time-zones-lightweight-charts) - [Chart types | Lightweight Charts](#chart-types-lightweight-charts) - [Time scale | Lightweight Charts](#time-scale-lightweight-charts) - [Plugins | Lightweight Charts](#plugins-lightweight-charts) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/api#enumerations "Direct link to Enumerations") ---------------------------------------------------------------------------------------------------------------------- * [MarkerSign](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign) * [ColorType](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/api#interfaces "Direct link to Interfaces") ---------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) * [ChartOptionsBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) * [ChartOptionsImpl](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) * [CustomBarItemData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData) * [CustomConflationContext](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext) * [CustomData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) * [CustomSeriesWhitespaceData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) * [CustomStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) * [DrawingUtils](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) * [HorzScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) * [IChartApiBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) * [ICustomSeriesPaneRenderer](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer) * [ICustomSeriesPaneView](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) * [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) * [IPaneApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) * [IPanePrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase) * [IPanePrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView) * [IPanePrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) * [IPrimitivePaneRenderer](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer) * [IPrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) * [IRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) * [ISeriesMarkersPluginApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi) * [ISeriesPrimitiveAxisView](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView) * [ISeriesPrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase) * [ISeriesPrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) * [ISeriesUpDownMarkerPluginApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) * [IYieldCurveChartApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi) * [ImageWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) * [LastValueDataResultWithData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData) * [LastValueDataResultWithoutData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) * [LayoutPanesOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) * [LocalizationOptionsBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) * [PaneAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter) * [PaneRendererCustomData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData) * [PaneSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) * [Point](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point) * [PriceChartLocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions) * [PriceChartOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) * [PrimitiveHoveredItem](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem) * [SeriesAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) * [SeriesDefinition](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) * [SeriesMarkerBar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar) * [SeriesMarkerBase](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) * [SeriesMarkerPrice](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice) * [SeriesMarkersOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) * [SeriesStyleOptionsMap](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap) * [SeriesUpDownMarker](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor) * [TextWatermarkLineOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions) * [TextWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions) * [TickMark](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark) * [TimeChartOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions) * [TimeMark](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) * [TimeScalePoint](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions) * [UpDownMarkersPluginOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * [YieldCurveChartOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions) * [YieldCurveOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/api#type-aliases "Direct link to Type Aliases") ---------------------------------------------------------------------------------------------------------------------- * [AlphaComponent](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AlphaComponent) * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesPartialOptions) * [BlueComponent](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BlueComponent) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesPartialOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ChartOptions) * [ColorSpace](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ColorSpace) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CreatePriceLineOptions) * [CustomColorParser](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser) * [CustomSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) * [CustomSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPartialOptions) * [CustomSeriesPricePlotValues](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPricePlotValues) * [DataChangedHandler](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler) * [DataChangedScope](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedScope) * [DataItem](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) * [GreenComponent](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/GreenComponent) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzAlign) * [HorzScaleItemConverterToInternalObj](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj) * [HorzScalePriceItem](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScalePriceItem) * [IImageWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi) * [IPanePrimitive](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive) * [ISeriesPrimitive](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive) * [ITextWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi) * [InternalHorzScaleItem](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItem) * [InternalHorzScaleItemKey](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItemKey) * [LastValueDataResult](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LastValueDataResult) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) * [Mutable](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Mutable) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) * [PercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn) * [PriceToCoordinateConverter](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter) * [PrimitiveHasApplyOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions) * [PrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) * [RedComponent](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/RedComponent) * [Rgba](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Rgba) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker) * [SeriesMarkerBarPosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerBarPosition) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerShape) * [SeriesMarkerZOrder](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerZOrder) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter) * [TickMarkWeightValue](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) * [TickmarksPercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn) * [TickmarksPriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn) * [Time](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn) * [TimePointIndex](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimePointIndex) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp) * [UpDownMarkersSupportedSeriesTypes](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UpDownMarkersSupportedSeriesTypes) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VisiblePriceScaleOptions) * [YieldCurveSeriesType](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/YieldCurveSeriesType) Variables[​](https://tradingview.github.io/lightweight-charts/docs/api#variables "Direct link to Variables") ------------------------------------------------------------------------------------------------------------- * [AreaSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/AreaSeries) * [BarSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/BarSeries) * [BaselineSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/BaselineSeries) * [CandlestickSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/CandlestickSeries) * [HistogramSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/HistogramSeries) * [LineSeries](https://tradingview.github.io/lightweight-charts/docs/api/variables/LineSeries) * [customSeriesDefaultOptions](https://tradingview.github.io/lightweight-charts/docs/api/variables/customSeriesDefaultOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/api#functions "Direct link to Functions") ------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart) * [createChartEx](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx) * [createImageWatermark](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark) * [createOptionsChart](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart) * [createSeriesMarkers](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers) * [createTextWatermark](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark) * [createUpDownMarkers](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers) * [createYieldCurveChart](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart) * [defaultHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/api#type-aliases) * [Variables](https://tradingview.github.io/lightweight-charts/docs/api#variables) * [Functions](https://tradingview.github.io/lightweight-charts/docs/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/api#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: Next On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/next/api#enumerations "Direct link to Enumerations") --------------------------------------------------------------------------------------------------------------------------- * [MarkerSign](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/MarkerSign) * [ColorType](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/next/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/next/api#interfaces "Direct link to Interfaces") --------------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CandlestickStyleOptions) * [ChartOptionsBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsBase) * [ChartOptionsImpl](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsImpl) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CrosshairOptions) * [CustomBarItemData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CustomBarItemData) * [CustomConflationContext](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CustomConflationContext) * [CustomData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CustomData) * [CustomSeriesWhitespaceData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CustomSeriesWhitespaceData) * [CustomStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CustomStyleOptions) * [DrawingUtils](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/DrawingUtils) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HistogramStyleOptions) * [HorzScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HorzScaleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi) * [IChartApiBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApiBase) * [ICustomSeriesPaneRenderer](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ICustomSeriesPaneRenderer) * [ICustomSeriesPaneView](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ICustomSeriesPaneView) * [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IHorzScaleBehavior) * [IPaneApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPaneApi) * [IPanePrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPanePrimitiveBase) * [IPanePrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPanePrimitivePaneView) * [IPanePrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPanePrimitiveWrapper) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPriceScaleApi) * [IPrimitivePaneRenderer](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPrimitivePaneRenderer) * [IPrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPrimitivePaneView) * [IRange](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IRange) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi) * [ISeriesMarkersPluginApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesMarkersPluginApi) * [ISeriesPrimitiveAxisView](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesPrimitiveAxisView) * [ISeriesPrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesPrimitiveBase) * [ISeriesPrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesPrimitiveWrapper) * [ISeriesUpDownMarkerPluginApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesUpDownMarkerPluginApi) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi) * [IYieldCurveChartApi](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IYieldCurveChartApi) * [ImageWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ImageWatermarkOptions) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/KineticScrollOptions) * [LastValueDataResultWithData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LastValueDataResultWithData) * [LastValueDataResultWithoutData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LastValueDataResultWithoutData) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutOptions) * [LayoutPanesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutPanesOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LocalizationOptions) * [LocalizationOptionsBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LocalizationOptionsBase) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/OhlcData) * [PaneAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PaneAttachedParameter) * [PaneRendererCustomData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PaneRendererCustomData) * [PaneSize](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PaneSize) * [Point](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/Point) * [PriceChartLocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceChartLocalizationOptions) * [PriceChartOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceChartOptions) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceScaleOptions) * [PrimitiveHoveredItem](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PrimitiveHoveredItem) * [SeriesAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesAttachedParameter) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesDataItemTypeMap) * [SeriesDefinition](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesDefinition) * [SeriesMarkerBar](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesMarkerBar) * [SeriesMarkerBase](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesMarkerBase) * [SeriesMarkerPrice](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesMarkerPrice) * [SeriesMarkersOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesMarkersOptions) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesPartialOptionsMap) * [SeriesStyleOptionsMap](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesStyleOptionsMap) * [SeriesUpDownMarker](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesUpDownMarker) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SolidColor) * [TextWatermarkLineOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TextWatermarkLineOptions) * [TextWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TextWatermarkOptions) * [TickMark](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TickMark) * [TimeChartOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeChartOptions) * [TimeMark](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeMark) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScaleOptions) * [TimeScalePoint](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScalePoint) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TrackingModeOptions) * [UpDownMarkersPluginOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/UpDownMarkersPluginOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/VerticalGradientColor) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * [YieldCurveChartOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/YieldCurveChartOptions) * [YieldCurveOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/YieldCurveOptions) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/next/api#type-aliases "Direct link to Type Aliases") --------------------------------------------------------------------------------------------------------------------------- * [AlphaComponent](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/AlphaComponent) * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BaselineSeriesPartialOptions) * [BlueComponent](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/BlueComponent) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CandlestickSeriesPartialOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/ChartOptions) * [ColorSpace](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/ColorSpace) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CreatePriceLineOptions) * [CustomColorParser](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CustomColorParser) * [CustomSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CustomSeriesOptions) * [CustomSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CustomSeriesPartialOptions) * [CustomSeriesPricePlotValues](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/CustomSeriesPricePlotValues) * [DataChangedHandler](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/DataChangedHandler) * [DataChangedScope](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/DataChangedScope) * [DataItem](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/DataItem) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/DeepPartial) * [GreenComponent](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/GreenComponent) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/HorzAlign) * [HorzScaleItemConverterToInternalObj](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/HorzScaleItemConverterToInternalObj) * [HorzScalePriceItem](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/HorzScalePriceItem) * [IImageWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/IImageWatermarkPluginApi) * [IPanePrimitive](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/IPanePrimitive) * [ISeriesPrimitive](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/ISeriesPrimitive) * [ITextWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/ITextWatermarkPluginApi) * [InternalHorzScaleItem](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/InternalHorzScaleItem) * [InternalHorzScaleItemKey](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/InternalHorzScaleItemKey) * [LastValueDataResult](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LastValueDataResult) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/MouseEventHandler) * [Mutable](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Mutable) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/OverlayPriceScaleOptions) * [PercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PercentageFormatterFn) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PriceFormatterFn) * [PriceToCoordinateConverter](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PriceToCoordinateConverter) * [PrimitiveHasApplyOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PrimitiveHasApplyOptions) * [PrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/PrimitivePaneViewZOrder) * [RedComponent](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/RedComponent) * [Rgba](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Rgba) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarker) * [SeriesMarkerBarPosition](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarkerBarPosition) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarkerPricePosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarkerShape) * [SeriesMarkerZOrder](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesMarkerZOrder) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesPartialOptions) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TickMarkFormatter) * [TickMarkWeightValue](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TickMarkWeightValue) * [TickmarksPercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TickmarksPercentageFormatterFn) * [TickmarksPriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TickmarksPriceFormatterFn) * [Time](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TimeFormatterFn) * [TimePointIndex](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TimePointIndex) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/UTCTimestamp) * [UpDownMarkersSupportedSeriesTypes](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/UpDownMarkersSupportedSeriesTypes) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/VisiblePriceScaleOptions) * [YieldCurveSeriesType](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/YieldCurveSeriesType) Variables[​](https://tradingview.github.io/lightweight-charts/docs/next/api#variables "Direct link to Variables") ------------------------------------------------------------------------------------------------------------------ * [AreaSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/AreaSeries) * [BarSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/BarSeries) * [BaselineSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/BaselineSeries) * [CandlestickSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/CandlestickSeries) * [HistogramSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/HistogramSeries) * [LineSeries](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/LineSeries) * [customSeriesDefaultOptions](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/customSeriesDefaultOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/next/api#functions "Direct link to Functions") ------------------------------------------------------------------------------------------------------------------ * [createChart](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChart) * [createChartEx](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChartEx) * [createImageWatermark](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createImageWatermark) * [createOptionsChart](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createOptionsChart) * [createSeriesMarkers](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createSeriesMarkers) * [createTextWatermark](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createTextWatermark) * [createUpDownMarkers](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createUpDownMarkers) * [createYieldCurveChart](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createYieldCurveChart) * [defaultHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/defaultHorzScaleBehavior) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/next/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/next/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/next/api#type-aliases) * [Variables](https://tradingview.github.io/lightweight-charts/docs/next/api#variables) * [Functions](https://tradingview.github.io/lightweight-charts/docs/next/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/5.0/api#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **5.0**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: 5.0 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/5.0/api#enumerations "Direct link to Enumerations") -------------------------------------------------------------------------------------------------------------------------- * [MarkerSign](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/MarkerSign) * [ColorType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/5.0/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/5.0/api#interfaces "Direct link to Interfaces") -------------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CandlestickStyleOptions) * [ChartOptionsBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ChartOptionsBase) * [ChartOptionsImpl](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ChartOptionsImpl) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CrosshairOptions) * [CustomBarItemData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CustomBarItemData) * [CustomData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CustomData) * [CustomSeriesWhitespaceData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CustomSeriesWhitespaceData) * [CustomStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CustomStyleOptions) * [DrawingUtils](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/DrawingUtils) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/HistogramStyleOptions) * [HorzScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/HorzScaleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi) * [IChartApiBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApiBase) * [ICustomSeriesPaneRenderer](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ICustomSeriesPaneRenderer) * [ICustomSeriesPaneView](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ICustomSeriesPaneView) * [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IHorzScaleBehavior) * [IPaneApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPaneApi) * [IPanePrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPanePrimitiveBase) * [IPanePrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPanePrimitivePaneView) * [IPanePrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPanePrimitiveWrapper) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPriceScaleApi) * [IPrimitivePaneRenderer](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPrimitivePaneRenderer) * [IPrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPrimitivePaneView) * [IRange](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IRange) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi) * [ISeriesMarkersPluginApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesMarkersPluginApi) * [ISeriesPrimitiveAxisView](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveAxisView) * [ISeriesPrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveBase) * [ISeriesPrimitiveWrapper](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveWrapper) * [ISeriesUpDownMarkerPluginApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesUpDownMarkerPluginApi) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ITimeScaleApi) * [IYieldCurveChartApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IYieldCurveChartApi) * [ImageWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ImageWatermarkOptions) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/KineticScrollOptions) * [LastValueDataResultWithData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LastValueDataResultWithData) * [LastValueDataResultWithoutData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LastValueDataResultWithoutData) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LayoutOptions) * [LayoutPanesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LayoutPanesOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LocalizationOptions) * [LocalizationOptionsBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LocalizationOptionsBase) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/OhlcData) * [PaneAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PaneAttachedParameter) * [PaneRendererCustomData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PaneRendererCustomData) * [PaneSize](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PaneSize) * [Point](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/Point) * [PriceChartLocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceChartLocalizationOptions) * [PriceChartOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceChartOptions) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceScaleOptions) * [PrimitiveHoveredItem](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PrimitiveHoveredItem) * [SeriesAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesAttachedParameter) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesDataItemTypeMap) * [SeriesDefinition](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesDefinition) * [SeriesMarkerBar](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesMarkerBar) * [SeriesMarkerBase](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesMarkerBase) * [SeriesMarkerPrice](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesMarkerPrice) * [SeriesMarkersOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesMarkersOptions) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesPartialOptionsMap) * [SeriesStyleOptionsMap](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesStyleOptionsMap) * [SeriesUpDownMarker](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesUpDownMarker) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SolidColor) * [TextWatermarkLineOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TextWatermarkLineOptions) * [TextWatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TextWatermarkOptions) * [TickMark](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TickMark) * [TimeChartOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TimeChartOptions) * [TimeMark](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TimeMark) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TimeScaleOptions) * [TimeScalePoint](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TimeScalePoint) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/TrackingModeOptions) * [UpDownMarkersPluginOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/UpDownMarkersPluginOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/VerticalGradientColor) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/WhitespaceData) * [YieldCurveChartOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/YieldCurveChartOptions) * [YieldCurveOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/YieldCurveOptions) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/5.0/api#type-aliases "Direct link to Type Aliases") -------------------------------------------------------------------------------------------------------------------------- * [AlphaComponent](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/AlphaComponent) * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BaselineSeriesPartialOptions) * [BlueComponent](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/BlueComponent) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CandlestickSeriesPartialOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/ChartOptions) * [ColorSpace](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/ColorSpace) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CreatePriceLineOptions) * [CustomColorParser](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CustomColorParser) * [CustomSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CustomSeriesOptions) * [CustomSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CustomSeriesPartialOptions) * [CustomSeriesPricePlotValues](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/CustomSeriesPricePlotValues) * [DataChangedHandler](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/DataChangedHandler) * [DataChangedScope](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/DataChangedScope) * [DataItem](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/DataItem) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/DeepPartial) * [GreenComponent](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/GreenComponent) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/HorzAlign) * [HorzScaleItemConverterToInternalObj](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/HorzScaleItemConverterToInternalObj) * [HorzScalePriceItem](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/HorzScalePriceItem) * [IImageWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/IImageWatermarkPluginApi) * [IPanePrimitive](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/IPanePrimitive) * [ISeriesPrimitive](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/ISeriesPrimitive) * [ITextWatermarkPluginApi](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/ITextWatermarkPluginApi) * [InternalHorzScaleItem](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/InternalHorzScaleItem) * [InternalHorzScaleItemKey](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/InternalHorzScaleItemKey) * [LastValueDataResult](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LastValueDataResult) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/MouseEventHandler) * [Mutable](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Mutable) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/OverlayPriceScaleOptions) * [PercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PercentageFormatterFn) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PriceFormatterFn) * [PriceToCoordinateConverter](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PriceToCoordinateConverter) * [PrimitiveHasApplyOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PrimitiveHasApplyOptions) * [PrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/PrimitivePaneViewZOrder) * [RedComponent](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/RedComponent) * [Rgba](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Rgba) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarker) * [SeriesMarkerBarPosition](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarkerBarPosition) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarkerPricePosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarkerShape) * [SeriesMarkerZOrder](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesMarkerZOrder) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesPartialOptions) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TickMarkFormatter) * [TickMarkWeightValue](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TickMarkWeightValue) * [TickmarksPercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TickmarksPercentageFormatterFn) * [TickmarksPriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TickmarksPriceFormatterFn) * [Time](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TimeFormatterFn) * [TimePointIndex](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TimePointIndex) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/UTCTimestamp) * [UpDownMarkersSupportedSeriesTypes](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/UpDownMarkersSupportedSeriesTypes) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/VisiblePriceScaleOptions) * [YieldCurveSeriesType](https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/YieldCurveSeriesType) Variables[​](https://tradingview.github.io/lightweight-charts/docs/5.0/api#variables "Direct link to Variables") ----------------------------------------------------------------------------------------------------------------- * [AreaSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/AreaSeries) * [BarSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/BarSeries) * [BaselineSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/BaselineSeries) * [CandlestickSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/CandlestickSeries) * [HistogramSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/HistogramSeries) * [LineSeries](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/LineSeries) * [customSeriesDefaultOptions](https://tradingview.github.io/lightweight-charts/docs/5.0/api/variables/customSeriesDefaultOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/5.0/api#functions "Direct link to Functions") ----------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createChart) * [createChartEx](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createChartEx) * [createImageWatermark](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createImageWatermark) * [createOptionsChart](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createOptionsChart) * [createSeriesMarkers](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createSeriesMarkers) * [createTextWatermark](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createTextWatermark) * [createUpDownMarkers](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createUpDownMarkers) * [createYieldCurveChart](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createYieldCurveChart) * [defaultHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/defaultHorzScaleBehavior) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/5.0/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/5.0/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/5.0/api#type-aliases) * [Variables](https://tradingview.github.io/lightweight-charts/docs/5.0/api#variables) * [Functions](https://tradingview.github.io/lightweight-charts/docs/5.0/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.2/api#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.2**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: 4.2 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/4.2/api#enumerations "Direct link to Enumerations") -------------------------------------------------------------------------------------------------------------------------- * [ColorType](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/4.2/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/4.2/api#interfaces "Direct link to Interfaces") -------------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CandlestickStyleOptions) * [ChartOptionsBase](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ChartOptionsBase) * [ChartOptionsImpl](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ChartOptionsImpl) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CrosshairOptions) * [CustomBarItemData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CustomBarItemData) * [CustomData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CustomData) * [CustomSeriesWhitespaceData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CustomSeriesWhitespaceData) * [CustomStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/CustomStyleOptions) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/HistogramStyleOptions) * [HorzScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/HorzScaleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IChartApi) * [IChartApiBase](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IChartApiBase) * [ICustomSeriesPaneRenderer](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ICustomSeriesPaneRenderer) * [ICustomSeriesPaneView](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ICustomSeriesPaneView) * [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IHorzScaleBehavior) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IPriceScaleApi) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesApi) * [ISeriesPrimitiveAxisView](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesPrimitiveAxisView) * [ISeriesPrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesPrimitiveBase) * [ISeriesPrimitivePaneRenderer](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesPrimitivePaneRenderer) * [ISeriesPrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesPrimitivePaneView) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ITimeScaleApi) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/KineticScrollOptions) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/LayoutOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/LocalizationOptions) * [LocalizationOptionsBase](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/LocalizationOptionsBase) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/OhlcData) * [PaneRendererCustomData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PaneRendererCustomData) * [PaneSize](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PaneSize) * [Point](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/Point) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PriceScaleOptions) * [PrimitiveHoveredItem](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/PrimitiveHoveredItem) * [Range](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/Range) * [SeriesAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesAttachedParameter) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesDataItemTypeMap) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesMarker) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SeriesPartialOptionsMap) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/SolidColor) * [TickMark](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TickMark) * [TimeChartOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TimeChartOptions) * [TimeMark](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TimeMark) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TimeScaleOptions) * [TimeScalePoint](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TimeScalePoint) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/TrackingModeOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/VerticalGradientColor) * [WatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/WatermarkOptions) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/WhitespaceData) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/4.2/api#type-aliases "Direct link to Type Aliases") -------------------------------------------------------------------------------------------------------------------------- * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/BaselineSeriesPartialOptions) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CandlestickSeriesPartialOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/ChartOptions) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CreatePriceLineOptions) * [CustomSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CustomSeriesOptions) * [CustomSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CustomSeriesPartialOptions) * [CustomSeriesPricePlotValues](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/CustomSeriesPricePlotValues) * [DataChangedHandler](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/DataChangedHandler) * [DataChangedScope](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/DataChangedScope) * [DataItem](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/DataItem) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/DeepPartial) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/HorzAlign) * [HorzScaleItemConverterToInternalObj](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/HorzScaleItemConverterToInternalObj) * [ISeriesPrimitive](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/ISeriesPrimitive) * [InternalHorzScaleItem](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/InternalHorzScaleItem) * [InternalHorzScaleItemKey](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/InternalHorzScaleItemKey) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/MouseEventHandler) * [Mutable](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Mutable) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/OverlayPriceScaleOptions) * [PercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/PercentageFormatterFn) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/PriceFormatterFn) * [PriceToCoordinateConverter](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/PriceToCoordinateConverter) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesMarkerShape) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesPartialOptions) * [SeriesPrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesPrimitivePaneViewZOrder) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/TickMarkFormatter) * [TickMarkWeightValue](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/TickMarkWeightValue) * [Time](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/TimeFormatterFn) * [TimePointIndex](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/TimePointIndex) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/UTCTimestamp) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/type-aliases/VisiblePriceScaleOptions) Variables[​](https://tradingview.github.io/lightweight-charts/docs/4.2/api#variables "Direct link to Variables") ----------------------------------------------------------------------------------------------------------------- * [customSeriesDefaultOptions](https://tradingview.github.io/lightweight-charts/docs/4.2/api/variables/customSeriesDefaultOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/4.2/api#functions "Direct link to Functions") ----------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/createChart) * [createChartEx](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/createChartEx) * [defaultHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/defaultHorzScaleBehavior) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/4.2/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/4.2/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/4.2/api#type-aliases) * [Variables](https://tradingview.github.io/lightweight-charts/docs/4.2/api#variables) * [Functions](https://tradingview.github.io/lightweight-charts/docs/4.2/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.1/api#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.1**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: 4.1 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/4.1/api#enumerations "Direct link to Enumerations") -------------------------------------------------------------------------------------------------------------------------- * [ColorType](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/4.1/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/4.1/api#interfaces "Direct link to Interfaces") -------------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CandlestickStyleOptions) * [ChartOptionsBase](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ChartOptionsBase) * [ChartOptionsImpl](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ChartOptionsImpl) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CrosshairOptions) * [CustomBarItemData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CustomBarItemData) * [CustomData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CustomData) * [CustomSeriesWhitespaceData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CustomSeriesWhitespaceData) * [CustomStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/CustomStyleOptions) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/HistogramStyleOptions) * [HorzScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/HorzScaleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IChartApi) * [IChartApiBase](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IChartApiBase) * [ICustomSeriesPaneRenderer](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ICustomSeriesPaneRenderer) * [ICustomSeriesPaneView](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ICustomSeriesPaneView) * [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IHorzScaleBehavior) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IPriceScaleApi) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesApi) * [ISeriesPrimitiveAxisView](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesPrimitiveAxisView) * [ISeriesPrimitiveBase](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesPrimitiveBase) * [ISeriesPrimitivePaneRenderer](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesPrimitivePaneRenderer) * [ISeriesPrimitivePaneView](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesPrimitivePaneView) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ITimeScaleApi) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/KineticScrollOptions) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/LayoutOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/LocalizationOptions) * [LocalizationOptionsBase](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/LocalizationOptionsBase) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/OhlcData) * [PaneRendererCustomData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PaneRendererCustomData) * [PaneSize](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PaneSize) * [Point](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/Point) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PriceScaleOptions) * [PrimitiveHoveredItem](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/PrimitiveHoveredItem) * [Range](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/Range) * [SeriesAttachedParameter](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesAttachedParameter) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesDataItemTypeMap) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesMarker) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SeriesPartialOptionsMap) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/SolidColor) * [TickMark](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TickMark) * [TimeChartOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TimeChartOptions) * [TimeMark](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TimeMark) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TimeScaleOptions) * [TimeScalePoint](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TimeScalePoint) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/TrackingModeOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/VerticalGradientColor) * [WatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/WatermarkOptions) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/WhitespaceData) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/4.1/api#type-aliases "Direct link to Type Aliases") -------------------------------------------------------------------------------------------------------------------------- * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/BaselineSeriesPartialOptions) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CandlestickSeriesPartialOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/ChartOptions) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CreatePriceLineOptions) * [CustomSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CustomSeriesOptions) * [CustomSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CustomSeriesPartialOptions) * [CustomSeriesPricePlotValues](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/CustomSeriesPricePlotValues) * [DataChangedHandler](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/DataChangedHandler) * [DataChangedScope](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/DataChangedScope) * [DataItem](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/DataItem) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/DeepPartial) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/HorzAlign) * [HorzScaleItemConverterToInternalObj](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/HorzScaleItemConverterToInternalObj) * [ISeriesPrimitive](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/ISeriesPrimitive) * [InternalHorzScaleItem](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/InternalHorzScaleItem) * [InternalHorzScaleItemKey](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/InternalHorzScaleItemKey) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/MouseEventHandler) * [Mutable](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Mutable) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/OverlayPriceScaleOptions) * [PercentageFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/PercentageFormatterFn) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/PriceFormatterFn) * [PriceToCoordinateConverter](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/PriceToCoordinateConverter) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesMarkerShape) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesPartialOptions) * [SeriesPrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesPrimitivePaneViewZOrder) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/TickMarkFormatter) * [TickMarkWeightValue](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/TickMarkWeightValue) * [Time](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/TimeFormatterFn) * [TimePointIndex](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/TimePointIndex) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/UTCTimestamp) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/type-aliases/VisiblePriceScaleOptions) Variables[​](https://tradingview.github.io/lightweight-charts/docs/4.1/api#variables "Direct link to Variables") ----------------------------------------------------------------------------------------------------------------- * [customSeriesDefaultOptions](https://tradingview.github.io/lightweight-charts/docs/4.1/api/variables/customSeriesDefaultOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/4.1/api#functions "Direct link to Functions") ----------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/createChart) * [createChartEx](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/createChartEx) * [defaultHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/defaultHorzScaleBehavior) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/4.1/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/4.1/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/4.1/api#type-aliases) * [Variables](https://tradingview.github.io/lightweight-charts/docs/4.1/api#variables) * [Functions](https://tradingview.github.io/lightweight-charts/docs/4.1/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.0/api#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.0**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: 4.0 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/4.0/api#enumerations "Direct link to Enumerations") -------------------------------------------------------------------------------------------------------------------------- * [ColorType](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/LineType) * [MismatchDirection](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/MismatchDirection) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/4.0/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/4.0/api#interfaces "Direct link to Interfaces") -------------------------------------------------------------------------------------------------------------------- * [AreaData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AreaData) * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AutoscaleInfo) * [AxisDoubleClickOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AxisDoubleClickOptions) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BarData) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BaseValuePrice) * [BaselineData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BaselineData) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/CandlestickStyleOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ChartOptions) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/CrosshairOptions) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/HistogramStyleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IChartApi) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IPriceScaleApi) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ISeriesApi) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ITimeScaleApi) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/KineticScrollOptions) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/LayoutOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/LocalizationOptions) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/OhlcData) * [Point](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/Point) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/PriceScaleOptions) * [Range](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/Range) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SeriesDataItemTypeMap) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SeriesMarker) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SeriesPartialOptionsMap) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/SolidColor) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/TimeScaleOptions) * [TouchMouseEventData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/TouchMouseEventData) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/TrackingModeOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/VerticalGradientColor) * [WatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/WatermarkOptions) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/WhitespaceData) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/4.0/api#type-aliases "Direct link to Type Aliases") -------------------------------------------------------------------------------------------------------------------------- * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/BaselineSeriesPartialOptions) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/CandlestickSeriesPartialOptions) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/Coordinate) * [CreatePriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/CreatePriceLineOptions) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/DeepPartial) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/HorzAlign) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/MouseEventHandler) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/OverlayPriceScaleOptions) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/PriceFormatterFn) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SeriesMarkerShape) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SeriesPartialOptions) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/TickMarkFormatter) * [Time](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/TimeFormatterFn) * [TimeRange](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/TimeRange) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/UTCTimestamp) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/4.0/api/type-aliases/VisiblePriceScaleOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/4.0/api#functions "Direct link to Functions") ----------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/4.0/api/functions/createChart) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/4.0/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/4.0/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/4.0/api/functions/version) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/4.0/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/4.0/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/4.0/api#type-aliases) * [Functions](https://tradingview.github.io/lightweight-charts/docs/4.0/api#functions) --- # lightweight-charts | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/3.8/api#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **3.8**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/api) ** (5.1). Version: 3.8 On this page Enumerations[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#enumerations "Direct link to Enumerations") -------------------------------------------------------------------------------------------------------------------------- * [ColorType](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/ColorType) * [CrosshairMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/CrosshairMode) * [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/LastPriceAnimationMode) * [LineStyle](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/LineStyle) * [LineType](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/LineType) * [PriceLineSource](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/PriceLineSource) * [PriceScaleMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/PriceScaleMode) * [TickMarkType](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/TickMarkType) * [TrackingModeExitMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/TrackingModeExitMode) Interfaces[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#interfaces "Direct link to Interfaces") -------------------------------------------------------------------------------------------------------------------- * [AreaStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/AreaStyleOptions) * [AutoScaleMargins](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/AutoScaleMargins) * [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/AutoscaleInfo) * [AxisPressedMouseMoveOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/AxisPressedMouseMoveOptions) * [BarData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BarData) * [BarPrices](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BarPrices) * [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BarStyleOptions) * [BarsInfo](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BarsInfo) * [BaseValuePrice](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BaseValuePrice) * [BaselineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BaselineStyleOptions) * [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/BusinessDay) * [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/CandlestickData) * [CandlestickStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/CandlestickStyleOptions) * [ChartOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ChartOptions) * [CrosshairLineOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/CrosshairLineOptions) * [CrosshairOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/CrosshairOptions) * [GridLineOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/GridLineOptions) * [GridOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/GridOptions) * [HandleScaleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/HandleScaleOptions) * [HandleScrollOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/HandleScrollOptions) * [HistogramData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/HistogramData) * [HistogramStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/HistogramStyleOptions) * [IChartApi](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IChartApi) * [IPriceFormatter](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IPriceFormatter) * [IPriceLine](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IPriceLine) * [IPriceScaleApi](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IPriceScaleApi) * [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ISeriesApi) * [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ITimeScaleApi) * [KineticScrollOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/KineticScrollOptions) * [LayoutOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/LayoutOptions) * [LineData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/LineData) * [LineStyleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/LineStyleOptions) * [LocalizationOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/LocalizationOptions) * [MouseEventParams](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/MouseEventParams) * [OhlcData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/OhlcData) * [Point](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/Point) * [PriceFormatBuiltIn](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceFormatBuiltIn) * [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceFormatCustom) * [PriceLineOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceLineOptions) * [PriceRange](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceRange) * [PriceScaleMargins](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceScaleMargins) * [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/PriceScaleOptions) * [Range](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/Range) * [SeriesDataItemTypeMap](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SeriesDataItemTypeMap) * [SeriesMarker](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SeriesMarker) * [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SeriesOptionsCommon) * [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SeriesOptionsMap) * [SeriesPartialOptionsMap](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SeriesPartialOptionsMap) * [SingleValueData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SingleValueData) * [SolidColor](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/SolidColor) * [TimeScaleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/TimeScaleOptions) * [TrackingModeOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/TrackingModeOptions) * [VerticalGradientColor](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/VerticalGradientColor) * [WatermarkOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/WatermarkOptions) * [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/WhitespaceData) Type Aliases[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#type-aliases "Direct link to Type Aliases") -------------------------------------------------------------------------------------------------------------------------- * [AreaSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/AreaSeriesOptions) * [AreaSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/AreaSeriesPartialOptions) * [AutoscaleInfoProvider](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/AutoscaleInfoProvider) * [Background](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/Background) * [BarPrice](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BarPrice) * [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BarSeriesOptions) * [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BarSeriesPartialOptions) * [BaseValueType](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BaseValueType) * [BaselineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BaselineSeriesOptions) * [BaselineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/BaselineSeriesPartialOptions) * [CandlestickSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/CandlestickSeriesOptions) * [CandlestickSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/CandlestickSeriesPartialOptions) * [Coordinate](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/Coordinate) * [DeepPartial](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/DeepPartial) * [HistogramSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/HistogramSeriesOptions) * [HistogramSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/HistogramSeriesPartialOptions) * [HorzAlign](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/HorzAlign) * [LineSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/LineSeriesOptions) * [LineSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/LineSeriesPartialOptions) * [LineWidth](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/LineWidth) * [Logical](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/Logical) * [LogicalRange](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/LogicalRange) * [LogicalRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/LogicalRangeChangeEventHandler) * [MouseEventHandler](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/MouseEventHandler) * [Nominal](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/Nominal) * [OverlayPriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/OverlayPriceScaleOptions) * [PriceFormat](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/PriceFormat) * [PriceFormatterFn](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/PriceFormatterFn) * [SeriesMarkerPosition](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SeriesMarkerPosition) * [SeriesMarkerShape](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SeriesMarkerShape) * [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SeriesOptions) * [SeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SeriesPartialOptions) * [SeriesType](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SeriesType) * [SizeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/SizeChangeEventHandler) * [TickMarkFormatter](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/TickMarkFormatter) * [Time](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/Time) * [TimeFormatterFn](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/TimeFormatterFn) * [TimeRange](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/TimeRange) * [TimeRangeChangeEventHandler](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/TimeRangeChangeEventHandler) * [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/UTCTimestamp) * [VertAlign](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/VertAlign) * [VisiblePriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/3.8/api/type-aliases/VisiblePriceScaleOptions) Functions[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#functions "Direct link to Functions") ----------------------------------------------------------------------------------------------------------------- * [createChart](https://tradingview.github.io/lightweight-charts/docs/3.8/api/functions/createChart) * [isBusinessDay](https://tradingview.github.io/lightweight-charts/docs/3.8/api/functions/isBusinessDay) * [isUTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/3.8/api/functions/isUTCTimestamp) * [version](https://tradingview.github.io/lightweight-charts/docs/3.8/api/functions/version) References[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#references "Direct link to References") -------------------------------------------------------------------------------------------------------------------- ### LasPriceAnimationMode[​](https://tradingview.github.io/lightweight-charts/docs/3.8/api#laspriceanimationmode "Direct link to LasPriceAnimationMode") Renames and re-exports [LastPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api/enumerations/LastPriceAnimationMode) * [Enumerations](https://tradingview.github.io/lightweight-charts/docs/3.8/api#enumerations) * [Interfaces](https://tradingview.github.io/lightweight-charts/docs/3.8/api#interfaces) * [Type Aliases](https://tradingview.github.io/lightweight-charts/docs/3.8/api#type-aliases) * [Functions](https://tradingview.github.io/lightweight-charts/docs/3.8/api#functions) * [References](https://tradingview.github.io/lightweight-charts/docs/3.8/api#references) * [LasPriceAnimationMode](https://tradingview.github.io/lightweight-charts/docs/3.8/api#laspriceanimationmode) --- # Variable: AreaSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/AreaSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **AreaSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Area"`\> --- # Enumeration: ColorType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a type of color. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#enumeration-members "Direct link to Enumeration Members") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### Solid[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#solid "Direct link to Solid") > **Solid**: `"solid"` Solid color * * * ### VerticalGradient[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#verticalgradient "Direct link to VerticalGradient") > **VerticalGradient**: `"gradient"` Vertical gradient color * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#enumeration-members) * [Solid](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#solid) * [VerticalGradient](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#verticalgradient) --- # Enumeration: CrosshairMode | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the crosshair mode. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#enumeration-members "Direct link to Enumeration Members") ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Normal[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#normal "Direct link to Normal") > **Normal**: `0` This mode allows crosshair to move freely on the chart. * * * ### Magnet[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#magnet "Direct link to Magnet") > **Magnet**: `1` This mode sticks crosshair's horizontal line to the price value of a single-value series or to the close price of OHLC-based series. * * * ### Hidden[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#hidden "Direct link to Hidden") > **Hidden**: `2` This mode disables rendering of the crosshair. * * * ### MagnetOHLC[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#magnetohlc "Direct link to MagnetOHLC") > **MagnetOHLC**: `3` This mode sticks crosshair's horizontal line to the price value of a single-value series or to the open/high/low/close price of OHLC-based series. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#enumeration-members) * [Normal](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#normal) * [Magnet](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#magnet) * [Hidden](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#hidden) * [MagnetOHLC](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode#magnetohlc) --- # Enumeration: LastPriceAnimationMode | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of the last price animation for series such as area or line. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#enumeration-members "Direct link to Enumeration Members") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Disabled[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#disabled "Direct link to Disabled") > **Disabled**: `0` Animation is always disabled * * * ### Continuous[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#continuous "Direct link to Continuous") > **Continuous**: `1` Animation is always enabled. * * * ### OnDataUpdate[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#ondataupdate "Direct link to OnDataUpdate") > **OnDataUpdate**: `2` Animation is active after new data. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#enumeration-members) * [Disabled](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#disabled) * [Continuous](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#continuous) * [OnDataUpdate](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode#ondataupdate) --- # Enumeration: LineStyle | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the possible line styles. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#enumeration-members "Direct link to Enumeration Members") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### Solid[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#solid "Direct link to Solid") > **Solid**: `0` A solid line. * * * ### Dotted[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#dotted "Direct link to Dotted") > **Dotted**: `1` A dotted line. * * * ### Dashed[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#dashed "Direct link to Dashed") > **Dashed**: `2` A dashed line. * * * ### LargeDashed[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#largedashed "Direct link to LargeDashed") > **LargeDashed**: `3` A dashed line with bigger dashes. * * * ### SparseDotted[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#sparsedotted "Direct link to SparseDotted") > **SparseDotted**: `4` A dotted line with more space between dots. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#enumeration-members) * [Solid](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#solid) * [Dotted](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#dotted) * [Dashed](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#dashed) * [LargeDashed](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#largedashed) * [SparseDotted](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle#sparsedotted) --- # Enumeration: LineType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the possible line types. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#enumeration-members "Direct link to Enumeration Members") ----------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Simple[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#simple "Direct link to Simple") > **Simple**: `0` A line. * * * ### WithSteps[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#withsteps "Direct link to WithSteps") > **WithSteps**: `1` A stepped line. * * * ### Curved[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#curved "Direct link to Curved") > **Curved**: `2` A curved line. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#enumeration-members) * [Simple](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#simple) * [WithSteps](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#withsteps) * [Curved](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType#curved) --- # Enumeration: PriceLineSource | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the source of data to be used for the horizontal price line. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#enumeration-members "Direct link to Enumeration Members") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ### LastBar[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#lastbar "Direct link to LastBar") > **LastBar**: `0` Use the last bar data. * * * ### LastVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#lastvisible "Direct link to LastVisible") > **LastVisible**: `1` Use the last visible data of the chart viewport. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#enumeration-members) * [LastBar](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#lastbar) * [LastVisible](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource#lastvisible) --- # Enumeration: PriceScaleMode | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the price scale mode. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#enumeration-members "Direct link to Enumeration Members") ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Normal[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#normal "Direct link to Normal") > **Normal**: `0` Price scale shows prices. Price range changes linearly. * * * ### Logarithmic[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#logarithmic "Direct link to Logarithmic") > **Logarithmic**: `1` Price scale shows prices. Price range changes logarithmically. * * * ### Percentage[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#percentage "Direct link to Percentage") > **Percentage**: `2` Price scale shows percentage values according the first visible value of the price scale. The first visible value is 0% in this mode. * * * ### IndexedTo100[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#indexedto100 "Direct link to IndexedTo100") > **IndexedTo100**: `3` The same as percentage mode, but the first value is moved to 100. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#enumeration-members) * [Normal](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#normal) * [Logarithmic](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#logarithmic) * [Percentage](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#percentage) * [IndexedTo100](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode#indexedto100) --- # Enumeration: TickMarkType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of a tick mark on the time axis. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#enumeration-members "Direct link to Enumeration Members") --------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Year[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#year "Direct link to Year") > **Year**: `0` The start of the year (e.g. it's the first tick mark in a year). * * * ### Month[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#month "Direct link to Month") > **Month**: `1` The start of the month (e.g. it's the first tick mark in a month). * * * ### DayOfMonth[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#dayofmonth "Direct link to DayOfMonth") > **DayOfMonth**: `2` A day of the month. * * * ### Time[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#time "Direct link to Time") > **Time**: `3` A time without seconds. * * * ### TimeWithSeconds[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#timewithseconds "Direct link to TimeWithSeconds") > **TimeWithSeconds**: `4` A time with seconds. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#enumeration-members) * [Year](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#year) * [Month](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#month) * [DayOfMonth](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#dayofmonth) * [Time](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#time) * [TimeWithSeconds](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType#timewithseconds) --- # Enumeration: TrackingModeExitMode | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Determine how to exit the tracking mode. By default, mobile users will long press to deactivate the scroll and have the ability to check values and dates. Another press is required to activate the scroll, be able to move left/right, zoom, etc. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#enumeration-members "Direct link to Enumeration Members") ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### OnTouchEnd[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#ontouchend "Direct link to OnTouchEnd") > **OnTouchEnd**: `0` Tracking Mode will be deactivated on touch end event. * * * ### OnNextTap[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#onnexttap "Direct link to OnNextTap") > **OnNextTap**: `1` Tracking Mode will be deactivated on the next tap event. * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#enumeration-members) * [OnTouchEnd](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#ontouchend) * [OnNextTap](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode#onnexttap) --- # Enumeration: MismatchDirection | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Search direction if no data found at provided index Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#enumeration-members "Direct link to Enumeration Members") -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### NearestLeft[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#nearestleft "Direct link to NearestLeft") > **NearestLeft**: `-1` Search the nearest left item * * * ### None[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#none "Direct link to None") > **None**: `0` Do not search * * * ### NearestRight[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#nearestright "Direct link to NearestRight") > **NearestRight**: `1` Search the nearest right item * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#enumeration-members) * [NearestLeft](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#nearestleft) * [None](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#none) * [NearestRight](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection#nearestright) --- # Enumeration: MarkerSign | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Enumeration representing the sign of a marker. Enumeration Members[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#enumeration-members "Direct link to Enumeration Members") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Negative[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#negative "Direct link to Negative") > **Negative**: `-1` Represents a negative change (-1) * * * ### Neutral[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#neutral "Direct link to Neutral") > **Neutral**: `0` Represents no change (0) * * * ### Positive[​](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#positive "Direct link to Positive") > **Positive**: `1` Represents a positive change (1) * [Enumeration Members](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#enumeration-members) * [Negative](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#negative) * [Neutral](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#neutral) * [Positive](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign#positive) --- # Function: createChart() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createChart**(`container`, `options`?): [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) This function is the simplified main entry point of the Lightweight Charting Library with time points for the horizontal scale. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart#parameters "Direct link to Parameters") -------------------------------------------------------------------------------------------------------------------------------------- • **container**: `string` | `HTMLElement` ID of HTML element or element itself • **options?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`TimeChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions) \> Any subset of options to be applied at start. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart#returns "Direct link to Returns") ----------------------------------------------------------------------------------------------------------------------------- [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) An interface to the created chart * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart#returns) --- # Variable: customSeriesDefaultOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/customSeriesDefaultOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **customSeriesDefaultOptions**: [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) --- # Variable: BarSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/BarSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **BarSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Bar"`\> --- # Variable: BaselineSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/BaselineSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **BaselineSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Baseline"`\> --- # Variable: HistogramSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/HistogramSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **HistogramSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Histogram"`\> --- # Variable: CandlestickSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/CandlestickSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **CandlestickSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Candlestick"`\> --- # Variable: LineSeries | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/variables/LineSeries#__docusaurus_skipToContent_fallback) Version: 5.1 > `const` **LineSeries**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) > <`"Line"`\> --- # Function: version() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/version#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **version**(): `string` Returns the current version as a string. For example `'3.3.0'`. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/version#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------- `string` * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/version#returns) --- # Function: isUTCTimestamp() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **isUTCTimestamp**(`time`): `time is UTCTimestamp` Check if a time value is a UTC timestamp number. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------- • **time**: [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) The time to check. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------- `time is UTCTimestamp` `true` if `time` is a [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp) number, false otherwise. * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/isUTCTimestamp#returns) --- # Function: isBusinessDay() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **isBusinessDay**(`time`): `time is BusinessDay` Check if a time value is a business day object. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------- • **time**: [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) The time to check. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------- `time is BusinessDay` `true` if `time` is a [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay) object, false otherwise. * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/isBusinessDay#returns) --- # Function: createChartEx() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createChartEx**<`HorzScaleItem`, `THorzScaleBehavior`\>(`container`, `horzScaleBehavior`, `options`?): [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) > <`HorzScaleItem`\> This function is the main entry point of the Lightweight Charting Library. If you are using time values for the horizontal scale then it is recommended that you rather use the [createChart](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart) function. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** type of points on the horizontal scale • **THorzScaleBehavior** _extends_ [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <`HorzScaleItem`\> type of horizontal axis strategy that encapsulate all the specific behaviors of the horizontal scale type Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------- • **container**: `string` | `HTMLElement` ID of HTML element or element itself • **horzScaleBehavior**: `THorzScaleBehavior` Horizontal scale behavior • **options?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`ReturnType`<`THorzScaleBehavior`\[`"options"`\]>> Any subset of options to be applied at start. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------- [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) <`HorzScaleItem`\> An interface to the created chart * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx#returns) --- # Function: defaultHorzScaleBehavior() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **defaultHorzScaleBehavior**(): () => [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \> Provides the default implementation of the horizontal scale (time-based) that can be used as a base for extending the horizontal scale with custom behavior. This allows for the introduction of custom functionality without re-implementing the entire [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <[Time](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> interface. For further details, refer to the [createChartEx](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx) chart constructor method. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------------ `Function` An uninitialized class implementing the [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <[Time](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> interface ### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior#returns-1 "Direct link to Returns") [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior#returns) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/defaultHorzScaleBehavior#returns-1) --- # Function: createOptionsChart() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createOptionsChart**(`container`, `options`?): [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) > <`number`\> Creates an 'options' chart with price values on the horizontal scale. This function is used to create a specialized chart type where the horizontal scale represents price values instead of time. It's particularly useful for visualizing option chains, price distributions, or any data where price is the primary x-axis metric. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart#parameters "Direct link to Parameters") --------------------------------------------------------------------------------------------------------------------------------------------- • **container**: `string` | `HTMLElement` The DOM element or its id where the chart will be rendered. • **options?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`PriceChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions) \> Optional configuration options for the price chart. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------ [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) <`number`\> An instance of IChartApiBase configured for price-based horizontal scaling. * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart#returns) --- # Function: createYieldCurveChart() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createYieldCurveChart**(`container`, `options`?): [`IYieldCurveChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi) Creates a yield curve chart with the specified options. A yield curve chart differs from the default chart type in the following ways: * Horizontal scale is linearly spaced, and defined in monthly time duration units * Whitespace is ignored for the crosshair and grid lines Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart#parameters "Direct link to Parameters") ------------------------------------------------------------------------------------------------------------------------------------------------ • **container**: `string` | `HTMLElement` ID of HTML element or element itself • **options?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`YieldCurveChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions) \> The yield chart options. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart#returns "Direct link to Returns") --------------------------------------------------------------------------------------------------------------------------------------- [`IYieldCurveChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi) An interface to the created chart * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart#returns) --- # Function: createImageWatermark() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createImageWatermark**<`T`\>(`pane`, `imageUrl`, `options`): [`IImageWatermarkPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi) > <`T`\> Creates an image watermark. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------------- • **pane**: [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`T`\> Target pane. • **imageUrl**: `string` Image URL. • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`ImageWatermarkOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions) \> Watermark options. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------------- [`IImageWatermarkPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi) <`T`\> Image watermark wrapper. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#example "Direct link to Example") -------------------------------------------------------------------------------------------------------------------------------------- import { createImageWatermark } from 'lightweight-charts';const firstPane = chart.panes()[0];const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', { alpha: 0.5, padding: 20,});// to change optionsimageWatermark.applyOptions({ padding: 10 });// to remove watermark from the paneimageWatermark.detach(); * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#returns) * [Example](https://tradingview.github.io/lightweight-charts/docs/api/functions/createImageWatermark#example) --- # Function: createTextWatermark() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createTextWatermark**<`T`\>(`pane`, `options`): [`ITextWatermarkPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi) > <`T`\> Creates an image watermark. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------------- • **pane**: [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`T`\> Target pane. • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`TextWatermarkOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions) \> Watermark options. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------- [`ITextWatermarkPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi) <`T`\> Image watermark wrapper. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#example "Direct link to Example") ------------------------------------------------------------------------------------------------------------------------------------- import { createTextWatermark } from 'lightweight-charts';const firstPane = chart.panes()[0];const textWatermark = createTextWatermark(firstPane, { horzAlign: 'center', vertAlign: 'center', lines: [ { text: 'Hello', color: 'rgba(255,0,0,0.5)', fontSize: 100, fontStyle: 'bold', }, { text: 'This is a text watermark', color: 'rgba(0,0,255,0.5)', fontSize: 50, fontStyle: 'italic', fontFamily: 'monospace', }, ],});// to change optionstextWatermark.applyOptions({ horzAlign: 'left' });// to remove watermark from the panetextWatermark.detach(); * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#returns) * [Example](https://tradingview.github.io/lightweight-charts/docs/api/functions/createTextWatermark#example) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs#requirements "Direct link to Requirements") ------------------------------------------------------------------------------------------------------------------ Lightweight Charts™ is _a client-side_ library that is not designed to work on the server side, for example, with Node.js. The library code targets the [_ES2020_ language specification](https://262.ecma-international.org/11.0/) . Therefore, the browsers you work with should support this language revision. Consider the following [table](https://compat-table.github.io/compat-table/es2016plus/) to ensure the browser compatibility. To support previous revisions, you can set up a transpilation process for the `lightweight-charts` package in your build system using tools such as Babel. If you encounter any issues, open a [GitHub issue](https://github.com/tradingview/lightweight-charts/issues) with detailed information, and we will investigate potential solutions. Installation[​](https://tradingview.github.io/lightweight-charts/docs#installation "Direct link to Installation") ------------------------------------------------------------------------------------------------------------------ To set up the library, install the [`lightweight-charts`](https://www.npmjs.com/package/lightweight-charts) npm package: npm install --save lightweight-charts The package includes TypeScript declarations, enabling seamless integration within TypeScript projects. ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | `lightweight-charts.standalone.development.js` | License and attribution[​](https://tradingview.github.io/lightweight-charts/docs#license-and-attribution "Direct link to License and attribution") --------------------------------------------------------------------------------------------------------------------------------------------------- The Lightweight Charts™ license **requires** specifying TradingView as the product creator. You should add the following attributes to a public page of your website or mobile application: * Attribution notice from the [`NOTICE`](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file * The [https://www.tradingview.com](https://www.tradingview.com/) link Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs#creating-a-chart "Direct link to Creating a chart") ------------------------------------------------------------------------------------------------------------------------------ As a first step, import the library to your file: import { createChart } from 'lightweight-charts'; To create a chart, use the [`createChart`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart) function. You can call the function multiple times to create as many charts as needed: import { createChart } from 'lightweight-charts';// ...const firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); As a result, `createChart` returns an [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) object that allows you to interact with the created chart. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs#creating-a-series "Direct link to Creating a series") --------------------------------------------------------------------------------------------------------------------------------- When the chart is created, you can display data on it. The basic primitive to display data is a [series](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) . The library supports the following series types: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series, use the [`addSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addseries) method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) . As a parameter, specify a [series type](https://tradingview.github.io/lightweight-charts/docs/series-types) you would like to create: import { AreaSeries, BarSeries, BaselineSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);const barSeries = chart.addSeries(BarSeries);const baselineSeries = chart.addSeries(BaselineSeries);// ... Note that a series **cannot be transferred** from one type to another one, since different series types require different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs#setting-and-updating-a-data "Direct link to Setting and updating a data") --------------------------------------------------------------------------------------------------------------------------------------------------------------- When the series is created, you can populate it with data. Note that the API calls remain the same regardless of the series type, although the data format may vary. ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data to a series, you should call the [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)',});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries, { upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350',});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); You can also use `setData` to replace all data items. ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs#updating-the-data-in-a-series "Direct link to Updating the data in a series") If your data is updated, for example in real-time, you may also need to refresh the chart accordingly. To do this, call the [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#update) method that allows you to update the last data item or add a new one. import { AreaSeries, CandlestickSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);areaSeries.setData([ // Other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries);candlestickSeries.setData([ // Other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// ...// Update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// Creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); We do not recommend calling [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setdata) to update the chart, as this method replaces all series data and can significantly affect the performance. * [Requirements](https://tradingview.github.io/lightweight-charts/docs#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs#updating-the-data-in-a-series) --- # Function: createUpDownMarkers() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createUpDownMarkers**<`T`\>(`series`, `options`?): [`ISeriesUpDownMarkerPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi) > <`T`\> Creates and attaches the Series Up Down Markers Plugin. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------------- • **series**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`T`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`T`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`T`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`T`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`T`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`T`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`T`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`T`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> Series to which attach the Up Down Markers Plugin • **options?**: `Partial` <[`UpDownMarkersPluginOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions) \> options for the Up Down Markers Plugin Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------- [`ISeriesUpDownMarkerPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi) <`T`\> Api for Series Up Down Marker Plugin. [ISeriesUpDownMarkerPluginApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi) Example[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#example "Direct link to Example") ------------------------------------------------------------------------------------------------------------------------------------- import { createUpDownMarkers, createChart, LineSeries } from 'lightweight-charts';const chart = createChart('container');const lineSeries = chart.addSeries(LineSeries);const upDownMarkers = createUpDownMarkers(lineSeries, { positiveColor: '#22AB94', negativeColor: '#F7525F', updateVisibilityDuration: 5000,});// to add some dataupDownMarkers.setData( [ { time: '2020-02-02', value: 12.34 }, //... more line series data ]);// ... Update some valuesupDownMarkers.update({ time: '2020-02-02', value: 13.54 }, true);// to remove plugin from the seriesupDownMarkers.detach(); * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#returns) * [Example](https://tradingview.github.io/lightweight-charts/docs/api/functions/createUpDownMarkers#example) --- # Function: createSeriesMarkers() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **createSeriesMarkers**<`HorzScaleItem`\>(`series`, `markers`?, `options`?): [`ISeriesMarkersPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi) > <`HorzScaleItem`\> A function to create a series markers primitive. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------------- • **series**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> The series to which the primitive will be attached. • **markers?**: [`SeriesMarker`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker) <`HorzScaleItem`\>\[\] An array of markers to be displayed on the series. • **options?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`SeriesMarkersOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions) \> Options for the series markers plugin. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------- [`ISeriesMarkersPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi) <`HorzScaleItem`\> Example[​](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#example "Direct link to Example") ------------------------------------------------------------------------------------------------------------------------------------- import { createSeriesMarkers } from 'lightweight-charts'; const seriesMarkers = createSeriesMarkers( series, [ { color: 'green', position: 'inBar', shape: 'arrowDown', time: 1556880900, }, ] ); // and then you can modify the markers // set it to empty array to remove all markers seriesMarkers.setMarkers([]); // `seriesMarkers.markers()` returns current markers * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#returns) * [Example](https://tradingview.github.io/lightweight-charts/docs/api/functions/createSeriesMarkers#example) --- # Type alias: AlphaComponent | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AlphaComponent#__docusaurus_skipToContent_fallback) Version: 5.1 > **AlphaComponent**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"AlphaComponent"`\> Alpha component of the RGBA color value The valid values are integers in range \[0, 1\] --- # Type alias: BarPrice | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice#__docusaurus_skipToContent_fallback) Version: 5.1 > **BarPrice**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"BarPrice"`\> Represents a price as a `number`. --- # Type alias: AreaSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **AreaSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > \> Represents area series options. --- # Type alias: AreaSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **AreaSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > \> Represents area series options where all properties are optional. --- # Type alias: AutoscaleInfoProvider() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **AutoscaleInfoProvider**: (`baseImplementation`) => [`AutoscaleInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) > | `null` A custom function used to get autoscale information. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider#parameters "Direct link to Parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **baseImplementation** The default implementation of autoscale algorithm, you can use it to adjust the result. Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------------ [`AutoscaleInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) | `null` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider#returns) --- # Type alias: BarSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **BarSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > \> Represents bar series options. --- # Type alias: BarSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **BarSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > \> Represents bar series options where all properties are options. --- # Type alias: BaseValueType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaseValueType#__docusaurus_skipToContent_fallback) Version: 5.1 > **BaseValueType**: [`BaseValuePrice`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice) Represents a type of a base value of baseline series type. --- # Type alias: BaselineSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **BaselineSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > \> Structure describing baseline series options. --- # Type alias: Coordinate | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate#__docusaurus_skipToContent_fallback) Version: 5.1 > **Coordinate**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"Coordinate"`\> Represents a coordiate as a `number`. --- # Interface: AreaData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for area series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#extends "Direct link to Extends") --------------------------------------------------------------------------------------------------------------------------- * [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### lineColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#linecolor "Direct link to lineColor?") > `optional` **lineColor**: `string` Optional line color value for certain data item. If missed, color from options is used * * * ### topColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#topcolor "Direct link to topColor?") > `optional` **topColor**: `string` Optional top color value for certain data item. If missed, color from options is used * * * ### bottomColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#bottomcolor "Direct link to bottomColor?") > `optional` **bottomColor**: `string` Optional bottom color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#inherited-from "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time) * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#value "Direct link to value") > **value**: `number` Price value of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#inherited-from-1 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`value`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#inherited-from-2 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#properties) * [lineColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#linecolor) * [topColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#topcolor) * [bottomColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#bottomcolor) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#value) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData#customvalues) --- # Type alias: Background | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Background#__docusaurus_skipToContent_fallback) Version: 5.1 > **Background**: [`SolidColor`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor) > | [`VerticalGradientColor`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor) Represents the background color of the chart. --- # Type alias: BaselineSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **BaselineSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > \> Represents baseline series options where all properties are options. --- # Type alias: CandlestickSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **CandlestickSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > \> Represents candlestick series options. --- # Type alias: CandlestickSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **CandlestickSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > \> Represents candlestick series options where all properties are optional. --- # Type alias: DeepPartial\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **DeepPartial**<`T`\>: `{ [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial[] : T[P] extends readonly (infer X)[] ? readonly DeepPartial[] : DeepPartial }` Represents a type `T` where every property is optional. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial#type-parameters) --- # Type alias: HorzAlign | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzAlign#__docusaurus_skipToContent_fallback) Version: 5.1 > **HorzAlign**: `"left"` | `"center"` | `"right"` Represents a horizontal alignment. --- # Interface: AutoscaleInfo | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents information used to update a price scale. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------- ### priceRange[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#pricerange "Direct link to priceRange") > **priceRange**: [`PriceRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange) Price range. * * * ### margins?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#margins "Direct link to margins?") > `optional` **margins**: [`AutoScaleMargins`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins) Scale margins. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#properties) * [priceRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#pricerange) * [margins?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo#margins) --- # Interface: AutoScaleMargins | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the margin used when updating a price scale. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### below[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#below "Direct link to below") > **below**: `number` The number of pixels for bottom margin * * * ### above[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#above "Direct link to above") > **above**: `number` The number of pixels for top margin * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#properties) * [below](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#below) * [above](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoScaleMargins#above) --- # Type alias: CreatePriceLineOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CreatePriceLineOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **CreatePriceLineOptions**: `Partial` <[`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) > \> & `Pick` <[`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) > , `"price"`\> Price line options for the [ISeriesApi.createPriceLine](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#createpriceline) method. `price` is required, while the rest of the options are optional. --- # Type alias: HistogramSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **HistogramSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > \> Represents histogram series options. --- # Type alias: HistogramSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **HistogramSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > \> Represents histogram series options where all properties are optional. --- # Type alias: CustomSeriesPricePlotValues | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPricePlotValues#__docusaurus_skipToContent_fallback) Version: 5.1 > **CustomSeriesPricePlotValues**: `number`\[\] Price values for the custom series. This list should include the largest, smallest, and current price values for the data point. The last value in the array will be used for the current value. You shouldn't need to have more than 3 values in this array since the library only needs a largest, smallest, and current value. Examples: * For a line series, this would contain a single number representing the current value. * For a candle series, this would contain the high, low, and close values. Where the last value would be the close value. --- # Type alias: DataChangedHandler() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **DataChangedHandler**: (`scope`) => `void` A custom function use to handle data changed events. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler#parameters "Direct link to Parameters") ------------------------------------------------------------------------------------------------------------------------------------------------ • **scope**: [`DataChangedScope`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedScope) Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler#returns "Direct link to Returns") --------------------------------------------------------------------------------------------------------------------------------------- `void` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler#returns) --- # Type alias: LineWidth | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth#__docusaurus_skipToContent_fallback) Version: 5.1 > **LineWidth**: `1` | `2` | `3` | `4` Represents the width of a line. --- # Type alias: Logical | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical#__docusaurus_skipToContent_fallback) Version: 5.1 > **Logical**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"Logical"`\> Represents the `to` or `from` number in a logical range. --- # Type alias: ChartOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ChartOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **ChartOptions**: [`TimeChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions) Structure describing options of the chart with time points at the horizontal scale. Series options are to be set separately --- # Type alias: DataChangedScope | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedScope#__docusaurus_skipToContent_fallback) Version: 5.1 > **DataChangedScope**: `"full"` | `"update"` The extent of the data change. --- # Interface: AxisPressedMouseMoveOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for how the time and price axes react to mouse movements. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#time "Direct link to time") > **time**: `boolean` Enable scaling the time axis by holding down the left mouse button and moving the mouse. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#default-value "Direct link to Default Value") `true` * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#price "Direct link to price") > **price**: `boolean` Enable scaling the price axis by holding down the left mouse button and moving the mouse. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#default-value-1 "Direct link to Default Value") `true` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#time) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions#price) --- # Type alias: CustomSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **CustomSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > \> Represents a custom series options. --- # Type alias: LineSeriesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **LineSeriesOptions**: [`SeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > \> Represents line series options. --- # Type alias: LineSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **LineSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > \> Represents line series options where all properties are optional. --- # Type alias: LogicalRangeChangeEventHandler() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **LogicalRangeChangeEventHandler**: (`logicalRange`) => `void` A custom function used to handle changes to the time scale's logical range. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler#parameters "Direct link to Parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------ • **logicalRange**: [`LogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange) | `null` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler#returns "Direct link to Returns") --------------------------------------------------------------------------------------------------------------------------------------------------- `void` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler#returns) --- # Interface: BarStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a bar series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------- ### upColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#upcolor "Direct link to upColor") > **upColor**: `string` Color of rising bars. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#default-value "Direct link to Default Value") `'#26a69a'` * * * ### downColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#downcolor "Direct link to downColor") > **downColor**: `string` Color of falling bars. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#default-value-1 "Direct link to Default Value") `'#ef5350'` * * * ### openVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#openvisible "Direct link to openVisible") > **openVisible**: `boolean` Show open lines on bars. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#default-value-2 "Direct link to Default Value") `true` * * * ### thinBars[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#thinbars "Direct link to thinBars") > **thinBars**: `boolean` Show bars as sticks. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#default-value-3 "Direct link to Default Value") `true` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#properties) * [upColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#upcolor) * [downColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#downcolor) * [openVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#openvisible) * [thinBars](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions#thinbars) --- # Type alias: BlueComponent | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BlueComponent#__docusaurus_skipToContent_fallback) Version: 5.1 > **BlueComponent**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"BlueComponent"`\> Blue component of the RGB color value The valid values are integers in range \[0, 255\] --- # Type alias: CustomSeriesPartialOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **CustomSeriesPartialOptions**: [`SeriesPartialOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > \> Represents a custom series options where all properties are optional. --- # Type alias: HorzScaleItemConverterToInternalObj()\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **HorzScaleItemConverterToInternalObj**<`HorzScaleItem`\>: (`time`) => [`InternalHorzScaleItem`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItem) Function for converting a horizontal scale item to an internal item. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------------- • **time**: `HorzScaleItem` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------------------------------- [`InternalHorzScaleItem`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItem) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj#returns) --- # Type alias: Nominal\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **Nominal**<`T`, `Name`\>: `T` & `object` This is the generic type useful for declaring a nominal type, which does not structurally matches with the base type and the other types declared over the same base type Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#examples "Direct link to Examples") ------------------------------------------------------------------------------------------------------------------------------- type Index = Nominal;// let i: Index = 42; // this fails to compilelet i: Index = 42 as Index; // OK type TagName = Nominal; Type declaration[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#type-declaration "Direct link to Type declaration") ------------------------------------------------------------------------------------------------------------------------------------------------------- ### \[species\][​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#species "Direct link to [species]") > **\[species\]**: `Name` The 'name' or species of the nominal. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------- • **T** • **Name** _extends_ `string` * [Examples](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#examples) * [Type declaration](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#type-declaration) * [\[species\]](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#species) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal#type-parameters) --- # Type alias: ColorSpace | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ColorSpace#__docusaurus_skipToContent_fallback) Version: 5.1 > **ColorSpace**: `"display-p3"` | `"srgb"` --- # Type alias: InternalHorzScaleItem | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItem#__docusaurus_skipToContent_fallback) Version: 5.1 > **InternalHorzScaleItem**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`unknown`, `"InternalHorzScaleItem"`\> Internal Horizontal Scale Item --- # Type alias: LogicalRange | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange#__docusaurus_skipToContent_fallback) Version: 5.1 > **LogicalRange**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) > <[`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) > \> A logical range is an object with 2 properties: `from` and `to`, which are numbers and represent logical indexes on the time scale. The starting point of the time scale's logical range is the first data item among all series. Before that point all indexes are negative, starting from that point - positive. Indexes might have fractional parts, for instance 4.2, due to the time-scale being continuous rather than discrete. Integer part of the logical index means index of the fully visible bar. Thus, if we have 5.2 as the last visible logical index (`to` field), that means that the last visible bar has index 5, but we also have partially visible (for 20%) 6th bar. Half (e.g. 1.5, 3.5, 10.5) means exactly a middle of the bar. --- # Type alias: OverlayPriceScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 > **OverlayPriceScaleOptions**: `Omit` <[`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) > , `"visible"` | `"autoScale"`\> Represents overlay price scale options. --- # Type alias: PriceFormatterFn() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **PriceFormatterFn**: (`priceValue`) => `string` A function used to format a [BarPrice](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) as a string. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------------- • **priceValue**: [`BarPrice`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------- `string` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn#returns) --- # Interface: AxisDoubleClickOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for how the time and price axes react to mouse double click. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#time "Direct link to time") > **time**: `boolean` Enable resetting scaling the time axis by double-clicking the left mouse button. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#default-value "Direct link to Default Value") `true` * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#price "Direct link to price") > **price**: `boolean` Enable reseting scaling the price axis by by double-clicking the left mouse button. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#default-value-1 "Direct link to Default Value") `true` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#time) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions#price) --- # Type alias: DataItem\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **DataItem**<`HorzScaleItem`\>: [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) > <`HorzScaleItem`\>\[[`SeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType)\ > \] Represents the type of data that a series contains. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem#type-parameters) --- # Type alias: InternalHorzScaleItemKey | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItemKey#__docusaurus_skipToContent_fallback) Version: 5.1 > **InternalHorzScaleItemKey**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"InternalHorzScaleItemKey"`\> Index key for a horizontal scale item. --- # Type alias: MouseEventHandler()\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **MouseEventHandler**<`HorzScaleItem`\>: (`param`) => `void` A custom function use to handle mouse events. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------------- • **param**: [`MouseEventParams`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams) <`HorzScaleItem`\> Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------------- `void` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler#returns) --- # Type alias: SeriesMarkerPosition | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPosition#__docusaurus_skipToContent_fallback) Version: 5.1 > **SeriesMarkerPosition**: [`SeriesMarkerBarPosition`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerBarPosition) > | [`SeriesMarkerPricePosition`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) Represents the position of a series marker relative to a bar. --- # Type alias: SeriesMarkerShape | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerShape#__docusaurus_skipToContent_fallback) Version: 5.1 > **SeriesMarkerShape**: `"circle"` | `"square"` | `"arrowUp"` | `"arrowDown"` Represents the shape of a series marker. --- # Interface: BarData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for bar series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#extends "Direct link to Extends") -------------------------------------------------------------------------------------------------------------------------- * [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------- ### color?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#color "Direct link to color?") > `optional` **color**: `string` Optional color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#time "Direct link to time") > **time**: `HorzScaleItem` The bar time. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#time) * * * ### open[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#open "Direct link to open") > **open**: `number` The open price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from-1 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`open`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#open) * * * ### high[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#high "Direct link to high") > **high**: `number` The high price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from-2 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`high`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#high) * * * ### low[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#low "Direct link to low") > **low**: `number` The low price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from-3 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`low`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#low) * * * ### close[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#close "Direct link to close") > **close**: `number` The close price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from-4 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`close`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#close) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#inherited-from-5 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#properties) * [color?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#color) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#time) * [open](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#open) * [high](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#high) * [low](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#low) * [close](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#close) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData#customvalues) --- # Interface: BarsInfo\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a range of bars and the number of bars outside the range. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#extends "Direct link to Extends") --------------------------------------------------------------------------------------------------------------------------- * `Partial` <[`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`HorzScaleItem`\>> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### barsBefore[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#barsbefore "Direct link to barsBefore") > **barsBefore**: `number` The number of bars before the start of the range. Positive value means that there are some bars before (out of logical range from the left) the [IRange.from](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#from) logical index in the series. Negative value means that the first series' bar is inside the passed logical range, and between the first series' bar and the [IRange.from](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#from) logical index are some bars. * * * ### barsAfter[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#barsafter "Direct link to barsAfter") > **barsAfter**: `number` The number of bars after the end of the range. Positive value in the `barsAfter` field means that there are some bars after (out of logical range from the right) the [IRange.to](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#to) logical index in the series. Negative value means that the last series' bar is inside the passed logical range, and between the last series' bar and the [IRange.to](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#to) logical index are some bars. * * * ### from?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#from "Direct link to from?") > `optional` **from**: `HorzScaleItem` The from value. The start of the range. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#inherited-from "Direct link to Inherited from") `Partial.from` * * * ### to?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#to "Direct link to to?") > `optional` **to**: `HorzScaleItem` The to value. The end of the range. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#inherited-from-1 "Direct link to Inherited from") `Partial.to` * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#properties) * [barsBefore](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#barsbefore) * [barsAfter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#barsafter) * [from?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#from) * [to?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo#to) --- # Type alias: CustomColorParser() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **CustomColorParser**: (`color`) => [`Rgba`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Rgba) > | `null` Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------------- • **color**: `string` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------------- [`Rgba`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Rgba) | `null` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser#returns) --- # Type alias: GreenComponent | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/GreenComponent#__docusaurus_skipToContent_fallback) Version: 5.1 > **GreenComponent**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"GreenComponent"`\> Green component of the RGB color value The valid values are integers in range \[0, 255\] --- # Type alias: Mutable\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Mutable#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **Mutable**<`T`\>: `{ -readonly [P in keyof T]: T[P] }` Removes "readonly" from all properties Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Mutable#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Mutable#type-parameters) --- # Interface: BaseValuePrice | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a type of priced base value of baseline series type. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------ ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#type "Direct link to type") > **type**: `"price"` Distinguished type value. * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#price "Direct link to price") > **price**: `number` Price value. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#type) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice#price) --- # Type alias: HorzScalePriceItem | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScalePriceItem#__docusaurus_skipToContent_fallback) Version: 5.1 > **HorzScalePriceItem**: `number` --- # Type alias: PriceFormat | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormat#__docusaurus_skipToContent_fallback) Version: 5.1 > **PriceFormat**: [`PriceFormatBuiltIn`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn) > | [`PriceFormatCustom`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom) Represents information used to format prices. --- # Type alias: PercentageFormatterFn() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **PercentageFormatterFn**: (`percentageValue`) => `string` A function used to format a percentage value as a string. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn#parameters "Direct link to Parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **percentageValue**: `number` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------------ `string` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn#returns) --- # Type alias: SizeChangeEventHandler() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **SizeChangeEventHandler**: (`width`, `height`) => `void` A custom function used to handle changes to the time scale's size. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler#parameters "Direct link to Parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------- • **width**: `number` • **height**: `number` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------------- `void` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler#returns) --- # Type alias: SeriesPartialOptions\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **SeriesPartialOptions**<`T`\>: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <`T` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> Represents a [SeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions) where every property is optional. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesPartialOptions#type-parameters) --- # Type alias: SeriesOptions\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **SeriesOptions**<`T`\>: `T` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) Represents the intersection of a series type `T`'s options and common series options. See[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions#see "Direct link to See") ---------------------------------------------------------------------------------------------------------------------- [SeriesOptionsCommon](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) for common options. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [See](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions#see) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesOptions#type-parameters) --- # Type alias: ISeriesPrimitive\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **ISeriesPrimitive**<`HorzScaleItem`\>: [`ISeriesPrimitiveBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase) > <[`SeriesAttachedParameter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter) > <`HorzScaleItem`, [`SeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType) > \>> Interface for series primitives. It must be implemented to add some external graphics to series. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive#type-parameters) --- # Type alias: PriceToCoordinateConverter() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **PriceToCoordinateConverter**: (`price`) => [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) > | `null` Converter function for changing prices into vertical coordinate values. This is provided as a convenience function since the series original data will most likely be defined in price values, and the renderer needs to draw with coordinates. This returns the same values as directly using the series' priceToCoordinate method. Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter#parameters "Direct link to Parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------- • **price**: `number` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter#returns "Direct link to Returns") ----------------------------------------------------------------------------------------------------------------------------------------------- [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) | `null` * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter#returns) --- # Type alias: TimeFormatterFn()\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TimeFormatterFn**<`HorzScaleItem`\>: (`time`) => `string` A custom function used to override formatting of a time to a string. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#parameters "Direct link to Parameters") --------------------------------------------------------------------------------------------------------------------------------------------- • **time**: `HorzScaleItem` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------ `string` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn#returns) --- # Type alias: VertAlign | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VertAlign#__docusaurus_skipToContent_fallback) Version: 5.1 > **VertAlign**: `"top"` | `"center"` | `"bottom"` Represents a vertical alignment. --- # Type alias: SeriesType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **SeriesType**: keyof [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) Represents a type of series. See[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType#see "Direct link to See") ------------------------------------------------------------------------------------------------------------------- [SeriesOptionsMap](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) * [See](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType#see) --- # Interface: CandlestickStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a candlestick series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### upColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#upcolor "Direct link to upColor") > **upColor**: `string` Color of rising candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value "Direct link to Default Value") `'#26a69a'` * * * ### downColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#downcolor "Direct link to downColor") > **downColor**: `string` Color of falling candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-1 "Direct link to Default Value") `'#ef5350'` * * * ### wickVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickvisible "Direct link to wickVisible") > **wickVisible**: `boolean` Enable high and low prices candle wicks. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-2 "Direct link to Default Value") `true` * * * ### borderVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#bordervisible "Direct link to borderVisible") > **borderVisible**: `boolean` Enable candle borders. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-3 "Direct link to Default Value") `true` * * * ### borderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#bordercolor "Direct link to borderColor") > **borderColor**: `string` Border color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-4 "Direct link to Default Value") `'#378658'` * * * ### borderUpColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#borderupcolor "Direct link to borderUpColor") > **borderUpColor**: `string` Border color of rising candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-5 "Direct link to Default Value") `'#26a69a'` * * * ### borderDownColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#borderdowncolor "Direct link to borderDownColor") > **borderDownColor**: `string` Border color of falling candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-6 "Direct link to Default Value") `'#ef5350'` * * * ### wickColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickcolor "Direct link to wickColor") > **wickColor**: `string` Wick color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-7 "Direct link to Default Value") `'#737375'` * * * ### wickUpColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickupcolor "Direct link to wickUpColor") > **wickUpColor**: `string` Wick color of rising candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-8 "Direct link to Default Value") `'#26a69a'` * * * ### wickDownColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickdowncolor "Direct link to wickDownColor") > **wickDownColor**: `string` Wick color of falling candles. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#default-value-9 "Direct link to Default Value") `'#ef5350'` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#properties) * [upColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#upcolor) * [downColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#downcolor) * [wickVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickvisible) * [borderVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#bordervisible) * [borderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#bordercolor) * [borderUpColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#borderupcolor) * [borderDownColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#borderdowncolor) * [wickColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickcolor) * [wickUpColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickupcolor) * [wickDownColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions#wickdowncolor) --- # Interface: BusinessDay | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a time as a day/month/year. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#example "Direct link to Example") ------------------------------------------------------------------------------------------------------------------------------ const day = { year: 2019, month: 6, day: 1 }; // June 1, 2019 Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------- ### year[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#year "Direct link to year") > **year**: `number` The year. * * * ### month[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#month "Direct link to month") > **month**: `number` The month. * * * ### day[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#day "Direct link to day") > **day**: `number` The day. * [Example](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#example) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#properties) * [year](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#year) * [month](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#month) * [day](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay#day) --- # Type alias: UTCTimestamp | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **UTCTimestamp**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"UTCTimestamp"`\> Represents a time as a UNIX timestamp. If your chart displays an intraday interval you should use a UNIX Timestamp. Note that JavaScript Date APIs like `Date.now` return a number of milliseconds but UTCTimestamp expects a number of seconds. Note that to prevent errors, you should cast the numeric type of the time to `UTCTimestamp` type from the package (`value as UTCTimestamp`) in TypeScript code. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp#example "Direct link to Example") --------------------------------------------------------------------------------------------------------------------------------- const timestamp = 1529899200 as UTCTimestamp; // Literal timestamp representing 2018-06-25T04:00:00.000Zconst timestamp2 = (Date.now() / 1000) as UTCTimestamp; * [Example](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp#example) --- # Interface: AreaStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for an area series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### topColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#topcolor "Direct link to topColor") > **topColor**: `string` Color of the top part of the area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value "Direct link to Default Value") `'rgba( 46, 220, 135, 0.4)'` * * * ### bottomColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#bottomcolor "Direct link to bottomColor") > **bottomColor**: `string` Color of the bottom part of the area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-1 "Direct link to Default Value") `'rgba( 40, 221, 100, 0)'` * * * ### relativeGradient[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#relativegradient "Direct link to relativeGradient") > **relativeGradient**: `boolean` Gradient is relative to the base value and the currently visible range. If it is false, the gradient is relative to the top and bottom of the chart. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-2 "Direct link to Default Value") `false` * * * ### invertFilledArea[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#invertfilledarea "Direct link to invertFilledArea") > **invertFilledArea**: `boolean` Invert the filled area. Fills the area above the line if set to true. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-3 "Direct link to Default Value") `false` * * * ### lineColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linecolor "Direct link to lineColor") > **lineColor**: `string` Line color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-4 "Direct link to Default Value") `'#33D778'` * * * ### lineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linestyle "Direct link to lineStyle") > **lineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-5 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### lineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linewidth "Direct link to lineWidth") > **lineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Line width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-6 "Direct link to Default Value") `3` * * * ### lineType[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linetype "Direct link to lineType") > **lineType**: [`LineType`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType) Line type. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-7 "Direct link to Default Value") {@link LineType.Simple} * * * ### lineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linevisible "Direct link to lineVisible") > **lineVisible**: `boolean` Show series line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-8 "Direct link to Default Value") `true` * * * ### pointMarkersVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#pointmarkersvisible "Direct link to pointMarkersVisible") > **pointMarkersVisible**: `boolean` Show circle markers on each point. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-9 "Direct link to Default Value") `false` * * * ### pointMarkersRadius?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#pointmarkersradius "Direct link to pointMarkersRadius?") > `optional` **pointMarkersRadius**: `number` Circle markers radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-10 "Direct link to Default Value") `undefined` * * * ### crosshairMarkerVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkervisible "Direct link to crosshairMarkerVisible") > **crosshairMarkerVisible**: `boolean` Show the crosshair marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-11 "Direct link to Default Value") `true` * * * ### crosshairMarkerRadius[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerradius "Direct link to crosshairMarkerRadius") > **crosshairMarkerRadius**: `number` Crosshair marker radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-12 "Direct link to Default Value") `4` * * * ### crosshairMarkerBorderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerbordercolor "Direct link to crosshairMarkerBorderColor") > **crosshairMarkerBorderColor**: `string` Crosshair marker border color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-13 "Direct link to Default Value") `''` * * * ### crosshairMarkerBackgroundColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerbackgroundcolor "Direct link to crosshairMarkerBackgroundColor") > **crosshairMarkerBackgroundColor**: `string` The crosshair marker background color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-14 "Direct link to Default Value") `''` * * * ### crosshairMarkerBorderWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerborderwidth "Direct link to crosshairMarkerBorderWidth") > **crosshairMarkerBorderWidth**: `number` Crosshair marker border width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-15 "Direct link to Default Value") `2` * * * ### lastPriceAnimation[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#lastpriceanimation "Direct link to lastPriceAnimation") > **lastPriceAnimation**: [`LastPriceAnimationMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode) Last price animation mode. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#default-value-16 "Direct link to Default Value") {@link LastPriceAnimationMode.Disabled} * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#properties) * [topColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#topcolor) * [bottomColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#bottomcolor) * [relativeGradient](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#relativegradient) * [invertFilledArea](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#invertfilledarea) * [lineColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linecolor) * [lineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linestyle) * [lineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linewidth) * [lineType](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linetype) * [lineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#linevisible) * [pointMarkersVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#pointmarkersvisible) * [pointMarkersRadius?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#pointmarkersradius) * [crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkervisible) * [crosshairMarkerRadius](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerradius) * [crosshairMarkerBorderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerbordercolor) * [crosshairMarkerBackgroundColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerbackgroundcolor) * [crosshairMarkerBorderWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkerborderwidth) * [lastPriceAnimation](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#lastpriceanimation) --- # Type alias: TickMarkFormatter() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TickMarkFormatter**: (`time`, `tickMarkType`, `locale`) => `string` | `null` The `TickMarkFormatter` is used to customize tick mark labels on the time scale. This function should return `time` as a string formatted according to `tickMarkType` type (year, month, etc) and `locale`. Note that the returned string should be the shortest possible value and should have no more than 8 characters. Otherwise, the tick marks will overlap each other. If the formatter function returns `null` then the default tick mark formatter will be used as a fallback. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#example "Direct link to Example") -------------------------------------------------------------------------------------------------------------------------------------- const customFormatter = (time, tickMarkType, locale) => { // your code here}; Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#parameters "Direct link to Parameters") ----------------------------------------------------------------------------------------------------------------------------------------------- • **time**: [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) • **tickMarkType**: [`TickMarkType`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TickMarkType) • **locale**: `string` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#returns "Direct link to Returns") -------------------------------------------------------------------------------------------------------------------------------------- `string` | `null` * [Example](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#example) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter#returns) --- # Type alias: TimeRangeChangeEventHandler()\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TimeRangeChangeEventHandler**<`HorzScaleItem`\>: (`timeRange`) => `void` A custom function used to handle changes to the time scale's time range. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#parameters "Direct link to Parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------- • **timeRange**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`HorzScaleItem`\> | `null` Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#returns "Direct link to Returns") ------------------------------------------------------------------------------------------------------------------------------------------------ `void` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#type-parameters) * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler#returns) --- # Type alias: Time | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **Time**: [`UTCTimestamp`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp) > | [`BusinessDay`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay) > | `string` The Time type is used to represent the time of data items. Values can be a [UTCTimestamp](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UTCTimestamp) , a [BusinessDay](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BusinessDay) , or a business day string in ISO format. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time#example "Direct link to Example") ------------------------------------------------------------------------------------------------------------------------- const timestamp = 1529899200; // Literal timestamp representing 2018-06-25T04:00:00.000Zconst businessDay = { year: 2019, month: 6, day: 1 }; // June 1, 2019const businessDayString = '2021-02-03'; // Business day string literal * [Example](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time#example) --- # Interface: BaselineData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for baseline series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#extends "Direct link to Extends") ------------------------------------------------------------------------------------------------------------------------------- * [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------- ### topFillColor1?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#topfillcolor1 "Direct link to topFillColor1?") > `optional` **topFillColor1**: `string` Optional top area top fill color value for certain data item. If missed, color from options is used * * * ### topFillColor2?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#topfillcolor2 "Direct link to topFillColor2?") > `optional` **topFillColor2**: `string` Optional top area bottom fill color value for certain data item. If missed, color from options is used * * * ### topLineColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#toplinecolor "Direct link to topLineColor?") > `optional` **topLineColor**: `string` Optional top area line color value for certain data item. If missed, color from options is used * * * ### bottomFillColor1?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomfillcolor1 "Direct link to bottomFillColor1?") > `optional` **bottomFillColor1**: `string` Optional bottom area top fill color value for certain data item. If missed, color from options is used * * * ### bottomFillColor2?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomfillcolor2 "Direct link to bottomFillColor2?") > `optional` **bottomFillColor2**: `string` Optional bottom area bottom fill color value for certain data item. If missed, color from options is used * * * ### bottomLineColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomlinecolor "Direct link to bottomLineColor?") > `optional` **bottomLineColor**: `string` Optional bottom area line color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#inherited-from "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time) * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#value "Direct link to value") > **value**: `number` Price value of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#inherited-from-1 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`value`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#inherited-from-2 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#properties) * [topFillColor1?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#topfillcolor1) * [topFillColor2?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#topfillcolor2) * [topLineColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#toplinecolor) * [bottomFillColor1?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomfillcolor1) * [bottomFillColor2?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomfillcolor2) * [bottomLineColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#bottomlinecolor) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#value) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData#customvalues) --- # Interface: CandlestickData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for candlestick series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#extends "Direct link to Extends") ---------------------------------------------------------------------------------------------------------------------------------- * [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------- ### color?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#color "Direct link to color?") > `optional` **color**: `string` Optional color value for certain data item. If missed, color from options is used * * * ### borderColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#bordercolor "Direct link to borderColor?") > `optional` **borderColor**: `string` Optional border color value for certain data item. If missed, color from options is used * * * ### wickColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#wickcolor "Direct link to wickColor?") > `optional` **wickColor**: `string` Optional wick color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#time "Direct link to time") > **time**: `HorzScaleItem` The bar time. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#time) * * * ### open[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#open "Direct link to open") > **open**: `number` The open price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from-1 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`open`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#open) * * * ### high[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#high "Direct link to high") > **high**: `number` The high price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from-2 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`high`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#high) * * * ### low[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#low "Direct link to low") > **low**: `number` The low price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from-3 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`low`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#low) * * * ### close[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#close "Direct link to close") > **close**: `number` The close price. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from-4 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`close`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#close) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#inherited-from-5 "Direct link to Inherited from") [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#properties) * [color?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#color) * [borderColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#bordercolor) * [wickColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#wickcolor) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#time) * [open](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#open) * [high](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#high) * [low](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#low) * [close](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#close) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData#customvalues) --- # Type alias: TickMarkWeightValue | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TickMarkWeightValue**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"TickMarkWeightValue"`\> Weight of the tick mark. See[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue#see "Direct link to See") ---------------------------------------------------------------------------------------------------------------------------- TickMarkWeight enum * [See](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue#see) --- # Type alias: IImageWatermarkPluginApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **IImageWatermarkPluginApi**<`T`\>: [`PrimitiveHasApplyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions) > <[`IPanePrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper) > <`T`, [`ImageWatermarkOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions) > \>> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IImageWatermarkPluginApi#type-parameters) --- # Type alias: IPanePrimitive\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **IPanePrimitive**<`HorzScaleItem`\>: [`IPanePrimitiveBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase) > <[`PaneAttachedParameter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter) > <`HorzScaleItem`\>> Interface for pane primitives. It must be implemented to add some external graphics to a pane. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive#type-parameters) --- # Type alias: ITextWatermarkPluginApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **ITextWatermarkPluginApi**<`T`\>: [`PrimitiveHasApplyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions) > <[`IPanePrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper) > <`T`, [`TextWatermarkOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions) > \>> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ITextWatermarkPluginApi#type-parameters) --- # Type alias: PrimitivePaneViewZOrder | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder#__docusaurus_skipToContent_fallback) Version: 5.1 > **PrimitivePaneViewZOrder**: `"bottom"` | `"normal"` | `"top"` Defines where in the visual layer stack the renderer should be executed. * `bottom`: Draw below everything except the background. * `normal`: Draw at the same level as the series. * `top`: Draw above everything (including the crosshair). --- # Type alias: PrimitiveHasApplyOptions\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **PrimitiveHasApplyOptions**<`T`\>: `T` & `Required`<`Pick`<`T`, `"applyOptions"`\>> Primitive has `applyOptions` as a method for adjusting the options after creation. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** _extends_ `object` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitiveHasApplyOptions#type-parameters) --- # Type alias: Rgba | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Rgba#__docusaurus_skipToContent_fallback) Version: 5.1 > **Rgba**: \[[`RedComponent`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/RedComponent)\ > , [`GreenComponent`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/GreenComponent)\ > , [`BlueComponent`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BlueComponent)\ > , [`AlphaComponent`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AlphaComponent)\ > \] --- # Type alias: RedComponent | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/RedComponent#__docusaurus_skipToContent_fallback) Version: 5.1 > **RedComponent**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"RedComponent"`\> Red component of the RGB color value The valid values are integers in range \[0, 255\] --- # Type alias: TimePointIndex | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimePointIndex#__docusaurus_skipToContent_fallback) Version: 5.1 > **TimePointIndex**: [`Nominal`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Nominal) > <`number`, `"TimePointIndex"`\> Index for a point on the horizontal (time) scale. --- # Type alias: VisiblePriceScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VisiblePriceScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **VisiblePriceScaleOptions**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Represents a visible price scale's options. See[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VisiblePriceScaleOptions#see "Direct link to See") --------------------------------------------------------------------------------------------------------------------------------- [PriceScaleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) * [See](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VisiblePriceScaleOptions#see) --- # Type alias: LastValueDataResult | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LastValueDataResult#__docusaurus_skipToContent_fallback) Version: 5.1 > **LastValueDataResult**: [`LastValueDataResultWithData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData) > | [`LastValueDataResultWithoutData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData) Represents last value data result of a series for plugins --- # Type alias: SeriesMarkerBarPosition | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerBarPosition#__docusaurus_skipToContent_fallback) Version: 5.1 > **SeriesMarkerBarPosition**: `"aboveBar"` | `"belowBar"` | `"inBar"` Represents the position of a series marker relative to a bar. --- # Type alias: SeriesMarkerPricePosition | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition#__docusaurus_skipToContent_fallback) Version: 5.1 > **SeriesMarkerPricePosition**: `"atPriceTop"` | `"atPriceBottom"` | `"atPriceMiddle"` Represents the position of a series marker relative to a specific price. The price value should be specified in the SeriesMarker.price --- # Interface: CrosshairOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing crosshair options Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### mode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#mode "Direct link to mode") > **mode**: [`CrosshairMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/CrosshairMode) Crosshair mode #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#default-value "Direct link to Default Value") {@link CrosshairMode.Magnet} * * * ### vertLine[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#vertline "Direct link to vertLine") > **vertLine**: [`CrosshairLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions) Vertical line options. * * * ### horzLine[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#horzline "Direct link to horzLine") > **horzLine**: [`CrosshairLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions) Horizontal line options. * * * ### doNotSnapToHiddenSeriesIndices[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#donotsnaptohiddenseriesindices "Direct link to doNotSnapToHiddenSeriesIndices") > **doNotSnapToHiddenSeriesIndices**: `boolean` If set to `true`, the crosshair will not snap to the data points of hidden series. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#default-value-1 "Direct link to Default Value") `false` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#properties) * [mode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#mode) * [vertLine](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#vertline) * [horzLine](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#horzline) * [doNotSnapToHiddenSeriesIndices](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions#donotsnaptohiddenseriesindices) --- # Type alias: SeriesMarkerZOrder | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerZOrder#__docusaurus_skipToContent_fallback) Version: 5.1 > **SeriesMarkerZOrder**: `"top"` | `"aboveSeries"` | `"normal"` The visual stacking order for the markers within the chart. * `normal`: Markers are drawn together with the series they belong to. They can appear below other series depending on the series stacking order. * `aboveSeries`: Markers are drawn above all series but below primitives that use the 'top' zOrder layer. * `top`: Markers are drawn on the topmost primitive layer, above all series and (most) other primitives. --- # Interface: CrosshairLineOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a crosshair line (vertical or horizontal) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#color "Direct link to color") > **color**: `string` Crosshair line color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value "Direct link to Default Value") `'#758696'` * * * ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#width "Direct link to width") > **width**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Crosshair line width. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value-1 "Direct link to Default Value") `1` * * * ### style[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#style "Direct link to style") > **style**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Crosshair line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value-2 "Direct link to Default Value") {@link LineStyle.LargeDashed} * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#visible "Direct link to visible") > **visible**: `boolean` Display the crosshair line. Note that disabling crosshair lines does not disable crosshair marker on Line and Area series. It can be disabled by using `crosshairMarkerVisible` option of a relevant series. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#see "Direct link to See") * [LineStyleOptions.crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkervisible) * [AreaStyleOptions.crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions#crosshairmarkervisible) * [BaselineStyleOptions.crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkervisible) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value-3 "Direct link to Default Value") `true` * * * ### labelVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#labelvisible "Direct link to labelVisible") > **labelVisible**: `boolean` Display the crosshair label on the relevant scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value-4 "Direct link to Default Value") `true` * * * ### labelBackgroundColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#labelbackgroundcolor "Direct link to labelBackgroundColor") > **labelBackgroundColor**: `string` Crosshair label background color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#default-value-5 "Direct link to Default Value") `'#4c525e'` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#color) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#width) * [style](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#style) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#visible) * [labelVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#labelvisible) * [labelBackgroundColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairLineOptions#labelbackgroundcolor) --- # Type alias: TickmarksPercentageFormatterFn() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TickmarksPercentageFormatterFn**: (`percentageValue`) => `string`\[\] Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn#parameters "Direct link to Parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------ • **percentageValue**: `number`\[\] Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn#returns "Direct link to Returns") --------------------------------------------------------------------------------------------------------------------------------------------------- `string`\[\] * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn#returns) --- # Type alias: TickmarksPriceFormatterFn() | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **TickmarksPriceFormatterFn**: (`priceValue`) => `string`\[\] Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn#parameters "Direct link to Parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------- • **priceValue**: [`BarPrice`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) \[\] Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn#returns "Direct link to Returns") ---------------------------------------------------------------------------------------------------------------------------------------------- `string`\[\] * [Parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn#parameters) * [Returns](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn#returns) --- # Interface: CustomBarItemData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Renderer data for an item within the custom series. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> = [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### x[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#x "Direct link to x") > **x**: `number` Horizontal coordinate for the item. Measured from the left edge of the pane in pixels. * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#time "Direct link to time") > **time**: `number` Time scale index for the item. This isn't the timestamp but rather the logical index. * * * ### originalData[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#originaldata "Direct link to originalData") > **originalData**: `TData` Original data for the item. * * * ### barColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#barcolor "Direct link to barColor") > **barColor**: `string` Color assigned for the item, typically used for price line and price scale label. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#properties) * [x](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#x) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#time) * [originalData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#originaldata) * [barColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData#barcolor) --- # Type alias: UpDownMarkersSupportedSeriesTypes | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UpDownMarkersSupportedSeriesTypes#__docusaurus_skipToContent_fallback) Version: 5.1 > **UpDownMarkersSupportedSeriesTypes**: `"Line"` | `"Area"` Defines the supported series types for up down markers primitive plugin. --- # Interface: HandleScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for how the chart is scaled by the mouse and touch gestures. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------- ### mouseWheel[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#mousewheel "Direct link to mouseWheel") > **mouseWheel**: `boolean` Enable scaling with the mouse wheel. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#default-value "Direct link to Default Value") `true` * * * ### pinch[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#pinch "Direct link to pinch") > **pinch**: `boolean` Enable scaling with pinch/zoom gestures. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#default-value-1 "Direct link to Default Value") `true` * * * ### axisPressedMouseMove[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#axispressedmousemove "Direct link to axisPressedMouseMove") > **axisPressedMouseMove**: `boolean` | [`AxisPressedMouseMoveOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisPressedMouseMoveOptions) Enable scaling the price and/or time scales by holding down the left mouse button and moving the mouse. * * * ### axisDoubleClickReset[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#axisdoubleclickreset "Direct link to axisDoubleClickReset") > **axisDoubleClickReset**: `boolean` | [`AxisDoubleClickOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AxisDoubleClickOptions) Enable resetting scaling by double-clicking the left mouse button. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#properties) * [mouseWheel](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#mousewheel) * [pinch](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#pinch) * [axisPressedMouseMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#axispressedmousemove) * [axisDoubleClickReset](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions#axisdoubleclickreset) --- # Interface: GridOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing grid options. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------- ### vertLines[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#vertlines "Direct link to vertLines") > **vertLines**: [`GridLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions) Vertical grid line options. * * * ### horzLines[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#horzlines "Direct link to horzLines") > **horzLines**: [`GridLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions) Horizontal grid line options. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#properties) * [vertLines](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#vertlines) * [horzLines](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridOptions#horzlines) --- # Type alias: SeriesMarker\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker#__docusaurus_skipToContent_fallback) Version: 5.1 On this page > **SeriesMarker**<`TimeType`\>: [`SeriesMarkerBar`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar) > <`TimeType`\> | [`SeriesMarkerPrice`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice) > <`TimeType`\> Represents a series marker. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------- • **TimeType** * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker#type-parameters) --- # Interface: HandleScrollOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for how the chart is scrolled by the mouse and touch gestures. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------------- ### mouseWheel[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#mousewheel "Direct link to mouseWheel") > **mouseWheel**: `boolean` Enable scrolling with the mouse wheel. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#default-value "Direct link to Default Value") `true` * * * ### pressedMouseMove[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#pressedmousemove "Direct link to pressedMouseMove") > **pressedMouseMove**: `boolean` Enable scrolling by holding down the left mouse button and moving the mouse. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#default-value-1 "Direct link to Default Value") `true` * * * ### horzTouchDrag[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#horztouchdrag "Direct link to horzTouchDrag") > **horzTouchDrag**: `boolean` Enable horizontal touch scrolling. When enabled the chart handles touch gestures that would normally scroll the webpage horizontally. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#default-value-2 "Direct link to Default Value") `true` * * * ### vertTouchDrag[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#verttouchdrag "Direct link to vertTouchDrag") > **vertTouchDrag**: `boolean` Enable vertical touch scrolling. When enabled the chart handles touch gestures that would normally scroll the webpage vertically. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#default-value-3 "Direct link to Default Value") `true` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#properties) * [mouseWheel](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#mousewheel) * [pressedMouseMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#pressedmousemove) * [horzTouchDrag](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#horztouchdrag) * [vertTouchDrag](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions#verttouchdrag) --- # Type alias: YieldCurveSeriesType | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/YieldCurveSeriesType#__docusaurus_skipToContent_fallback) Version: 5.1 > **YieldCurveSeriesType**: `"Area"` | `"Line"` --- # Interface: ChartOptionsBase | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents common chart options Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#extended-by "Direct link to Extended by") ----------------------------------------------------------------------------------------------------------------------------------------------- * [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#width "Direct link to width") > **width**: `number` Width of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#default-value "Direct link to Default Value") If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size. * * * ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#height "Direct link to height") > **height**: `number` Height of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#default-value-1 "Direct link to Default Value") If `0` (default) or none value provided, then a size of the widget will be calculated based its container's size. * * * ### autoSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#autosize "Direct link to 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`](https://developer.mozilla.org/en-US/docs/Web/API/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,}); * * * ### layout[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#layout "Direct link to layout") > **layout**: [`LayoutOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) Layout options * * * ### leftPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#leftpricescale "Direct link to leftPriceScale") > **leftPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Left price scale options * * * ### rightPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#rightpricescale "Direct link to rightPriceScale") > **rightPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Right price scale options * * * ### overlayPriceScales[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#overlaypricescales "Direct link to overlayPriceScales") > **overlayPriceScales**: [`OverlayPriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) Overlay price scale options * * * ### timeScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#timescale "Direct link to timeScale") > **timeScale**: [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) Time scale options * * * ### crosshair[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#crosshair "Direct link to crosshair") > **crosshair**: [`CrosshairOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) The crosshair shows the intersection of the price and time scale values at any point on the chart. * * * ### grid[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#grid "Direct link to grid") > **grid**: [`GridOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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. * * * ### handleScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescroll "Direct link to handleScroll") > **handleScroll**: `boolean` | [`HandleScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) Scroll options, or a boolean flag that enables/disables scrolling * * * ### handleScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescale "Direct link to handleScale") > **handleScale**: `boolean` | [`HandleScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) Scale options, or a boolean flag that enables/disables scaling * * * ### kineticScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#kineticscroll "Direct link to kineticScroll") > **kineticScroll**: [`KineticScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) Kinetic scroll options * * * ### trackingMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#trackingmode "Direct link to trackingMode") > **trackingMode**: [`TrackingModeOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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. * * * ### localization[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#localization "Direct link to localization") > **localization**: [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) Basic localization options * * * ### addDefaultPane[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#adddefaultpane "Direct link to addDefaultPane") > **addDefaultPane**: `boolean` Whether to add a default pane to the chart Disable this option when you want to create a chart with no panes and add them manually #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#default-value-2 "Direct link to Default Value") `true` * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#extended-by) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#properties) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#width) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#height) * [autoSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#autosize) * [layout](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#layout) * [leftPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#leftpricescale) * [rightPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#rightpricescale) * [overlayPriceScales](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#overlaypricescales) * [timeScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#timescale) * [crosshair](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#crosshair) * [grid](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#grid) * [handleScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescroll) * [handleScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescale) * [kineticScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#kineticscroll) * [trackingMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#trackingmode) * [localization](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#localization) * [addDefaultPane](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#adddefaultpane) --- # Interface: CustomSeriesWhitespaceData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a whitespace data item, which is a data point without a value. Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#extended-by "Direct link to Extended by") --------------------------------------------------------------------------------------------------------------------------------------------------------- * [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------------ ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#time) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#customvalues) --- # Interface: GridLineOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Grid line options. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------- ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#color "Direct link to color") > **color**: `string` Line color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#default-value "Direct link to Default Value") `'#D6DCDE'` * * * ### style[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#style "Direct link to style") > **style**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#default-value-1 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#visible "Direct link to visible") > **visible**: `boolean` Display the lines. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#default-value-2 "Direct link to Default Value") `true` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#color) * [style](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#style) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/GridLineOptions#visible) --- # Interface: HistogramStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a histogram series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#color "Direct link to color") > **color**: `string` Column color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#default-value "Direct link to Default Value") `'#26a69a'` * * * ### base[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#base "Direct link to base") > **base**: `number` Initial level of histogram columns. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#default-value-1 "Direct link to Default Value") `0` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#color) * [base](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions#base) --- # Interface: BaselineStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a baseline series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### baseValue[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#basevalue "Direct link to baseValue") > **baseValue**: [`BaseValuePrice`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaseValuePrice) Base value of the series. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value "Direct link to Default Value") `{ type: 'price', price: 0 }` * * * ### relativeGradient[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#relativegradient "Direct link to relativeGradient") > **relativeGradient**: `boolean` Gradient is relative to the base value and the currently visible range. If it is false, the gradient is relative to the top and bottom of the chart. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-1 "Direct link to Default Value") `false` * * * ### topFillColor1[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#topfillcolor1 "Direct link to topFillColor1") > **topFillColor1**: `string` The first color of the top area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-2 "Direct link to Default Value") `'rgba(38, 166, 154, 0.28)'` * * * ### topFillColor2[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#topfillcolor2 "Direct link to topFillColor2") > **topFillColor2**: `string` The second color of the top area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-3 "Direct link to Default Value") `'rgba(38, 166, 154, 0.05)'` * * * ### topLineColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#toplinecolor "Direct link to topLineColor") > **topLineColor**: `string` The line color of the top area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-4 "Direct link to Default Value") `'rgba(38, 166, 154, 1)'` * * * ### bottomFillColor1[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomfillcolor1 "Direct link to bottomFillColor1") > **bottomFillColor1**: `string` The first color of the bottom area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-5 "Direct link to Default Value") `'rgba(239, 83, 80, 0.05)'` * * * ### bottomFillColor2[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomfillcolor2 "Direct link to bottomFillColor2") > **bottomFillColor2**: `string` The second color of the bottom area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-6 "Direct link to Default Value") `'rgba(239, 83, 80, 0.28)'` * * * ### bottomLineColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomlinecolor "Direct link to bottomLineColor") > **bottomLineColor**: `string` The line color of the bottom area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-7 "Direct link to Default Value") `'rgba(239, 83, 80, 1)'` * * * ### lineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linewidth "Direct link to lineWidth") > **lineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Line width. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-8 "Direct link to Default Value") `3` * * * ### lineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linestyle "Direct link to lineStyle") > **lineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-9 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### lineType[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linetype "Direct link to lineType") > **lineType**: [`LineType`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType) Line type. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-10 "Direct link to Default Value") {@link LineType.Simple} * * * ### lineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linevisible "Direct link to lineVisible") > **lineVisible**: `boolean` Show series line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-11 "Direct link to Default Value") `true` * * * ### pointMarkersVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#pointmarkersvisible "Direct link to pointMarkersVisible") > **pointMarkersVisible**: `boolean` Show circle markers on each point. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-12 "Direct link to Default Value") `false` * * * ### pointMarkersRadius?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#pointmarkersradius "Direct link to pointMarkersRadius?") > `optional` **pointMarkersRadius**: `number` Circle markers radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-13 "Direct link to Default Value") `undefined` * * * ### crosshairMarkerVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkervisible "Direct link to crosshairMarkerVisible") > **crosshairMarkerVisible**: `boolean` Show the crosshair marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-14 "Direct link to Default Value") `true` * * * ### crosshairMarkerRadius[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerradius "Direct link to crosshairMarkerRadius") > **crosshairMarkerRadius**: `number` Crosshair marker radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-15 "Direct link to Default Value") `4` * * * ### crosshairMarkerBorderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerbordercolor "Direct link to crosshairMarkerBorderColor") > **crosshairMarkerBorderColor**: `string` Crosshair marker border color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-16 "Direct link to Default Value") `''` * * * ### crosshairMarkerBackgroundColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerbackgroundcolor "Direct link to crosshairMarkerBackgroundColor") > **crosshairMarkerBackgroundColor**: `string` The crosshair marker background color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-17 "Direct link to Default Value") `''` * * * ### crosshairMarkerBorderWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerborderwidth "Direct link to crosshairMarkerBorderWidth") > **crosshairMarkerBorderWidth**: `number` Crosshair marker border width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-18 "Direct link to Default Value") `2` * * * ### lastPriceAnimation[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#lastpriceanimation "Direct link to lastPriceAnimation") > **lastPriceAnimation**: [`LastPriceAnimationMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode) Last price animation mode. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#default-value-19 "Direct link to Default Value") {@link LastPriceAnimationMode.Disabled} * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#properties) * [baseValue](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#basevalue) * [relativeGradient](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#relativegradient) * [topFillColor1](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#topfillcolor1) * [topFillColor2](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#topfillcolor2) * [topLineColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#toplinecolor) * [bottomFillColor1](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomfillcolor1) * [bottomFillColor2](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomfillcolor2) * [bottomLineColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#bottomlinecolor) * [lineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linewidth) * [lineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linestyle) * [lineType](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linetype) * [lineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#linevisible) * [pointMarkersVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#pointmarkersvisible) * [pointMarkersRadius?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#pointmarkersradius) * [crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkervisible) * [crosshairMarkerRadius](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerradius) * [crosshairMarkerBorderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerbordercolor) * [crosshairMarkerBackgroundColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerbackgroundcolor) * [crosshairMarkerBorderWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#crosshairmarkerborderwidth) * [lastPriceAnimation](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#lastpriceanimation) --- # Interface: CustomData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Base structure describing a single item of data for a custom series. This type allows for any properties to be defined within the interface. It is recommended that you extend this interface with the required data structure. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------- * [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------- ### color?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#color "Direct link to color?") > `optional` **color**: `string` If defined then this color will be used for the price line and price scale line for this specific data item of the custom series. * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#inherited-from "Direct link to Inherited from") [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#time) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#inherited-from-1 "Direct link to Inherited from") [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#properties) * [color?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#color) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#time) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData#customvalues) --- # Interface: CustomStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a custom series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------- ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions#color "Direct link to color") > **color**: `string` Color used for the price line and price scale label. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions#color) --- # Interface: ChartOptionsImpl\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing options of the chart. Series options are to be set separately Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------------- * [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#extended-by "Direct link to Extended by") ----------------------------------------------------------------------------------------------------------------------------------------------- * [`PriceChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions) * [`TimeChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions) * [`YieldCurveChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#width "Direct link to width") > **width**: `number` Width of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#default-value "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`width`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#width) * * * ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#height "Direct link to height") > **height**: `number` Height of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#default-value-1 "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-1 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`height`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#height) * * * ### autoSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#autosize "Direct link to 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`](https://developer.mozilla.org/en-US/docs/Web/API/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-2 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`autoSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#autosize) * * * ### layout[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#layout "Direct link to layout") > **layout**: [`LayoutOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) Layout options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-3 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`layout`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#layout) * * * ### leftPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#leftpricescale "Direct link to leftPriceScale") > **leftPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Left price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-4 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#leftpricescale) * * * ### rightPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#rightpricescale "Direct link to rightPriceScale") > **rightPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Right price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-5 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#rightpricescale) * * * ### overlayPriceScales[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overlaypricescales "Direct link to overlayPriceScales") > **overlayPriceScales**: [`OverlayPriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) Overlay price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-6 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#overlaypricescales) * * * ### timeScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#timescale "Direct link to timeScale") > **timeScale**: [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) Time scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-7 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#timescale) * * * ### crosshair[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#crosshair "Direct link to crosshair") > **crosshair**: [`CrosshairOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) The crosshair shows the intersection of the price and time scale values at any point on the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-8 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`crosshair`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#crosshair) * * * ### grid[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#grid "Direct link to grid") > **grid**: [`GridOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-9 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`grid`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#grid) * * * ### handleScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescroll "Direct link to handleScroll") > **handleScroll**: `boolean` | [`HandleScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) Scroll options, or a boolean flag that enables/disables scrolling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-10 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`handleScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescroll) * * * ### handleScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescale "Direct link to handleScale") > **handleScale**: `boolean` | [`HandleScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) Scale options, or a boolean flag that enables/disables scaling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-11 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`handleScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#handlescale) * * * ### kineticScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#kineticscroll "Direct link to kineticScroll") > **kineticScroll**: [`KineticScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) Kinetic scroll options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-12 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`kineticScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#kineticscroll) * * * ### trackingMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#trackingmode "Direct link to trackingMode") > **trackingMode**: [`TrackingModeOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-13 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`trackingMode`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#trackingmode) * * * ### addDefaultPane[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#adddefaultpane "Direct link to addDefaultPane") > **addDefaultPane**: `boolean` Whether to add a default pane to the chart Disable this option when you want to create a chart with no panes and add them manually #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#default-value-2 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#inherited-from-14 "Direct link to Inherited from") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`addDefaultPane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#adddefaultpane) * * * ### localization[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#localization "Direct link to localization") > **localization**: [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) > <`HorzScaleItem`\> Localization options. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overrides "Direct link to Overrides") [`ChartOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase) . [`localization`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#localization) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#extends) * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#properties) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#width) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#height) * [autoSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#autosize) * [layout](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#layout) * [leftPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#leftpricescale) * [rightPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#rightpricescale) * [overlayPriceScales](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overlaypricescales) * [timeScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#timescale) * [crosshair](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#crosshair) * [grid](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#grid) * [handleScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescroll) * [handleScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescale) * [kineticScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#kineticscroll) * [trackingMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#trackingmode) * [addDefaultPane](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#adddefaultpane) * [localization](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#localization) --- # Interface: HistogramData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for histogram series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#extends "Direct link to Extends") -------------------------------------------------------------------------------------------------------------------------------- * [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------- ### color?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#color "Direct link to color?") > `optional` **color**: `string` Optional color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#inherited-from "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time) * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#value "Direct link to value") > **value**: `number` Price value of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#inherited-from-1 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`value`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#inherited-from-2 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#properties) * [color?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#color) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#value) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData#customvalues) --- # Interface: IPriceFormatter | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface to be implemented by the object in order to be used as a price formatter Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#methods "Direct link to Methods") ---------------------------------------------------------------------------------------------------------------------------------- ### format()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#format "Direct link to format()") > **format**(`price`): `string` Formatting function #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#parameters "Direct link to Parameters") • **price**: `number` Original price to be formatted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#returns "Direct link to Returns") `string` Formatted price * * * ### formatTickmarks()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#formattickmarks "Direct link to formatTickmarks()") > **formatTickmarks**(`prices`): `string`\[\] A formatting function for price scale tick marks. Use this function to define formatting rules based on all provided price values. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#parameters-1 "Direct link to Parameters") • **prices**: readonly `number`\[\] Prices to be formatted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#returns-1 "Direct link to Returns") `string`\[\] Formatted prices * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#methods) * [format()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#format) * [formatTickmarks()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter#formattickmarks) --- # Interface: IPriceLine | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the interface for interacting with price lines. Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#methods "Direct link to Methods") ----------------------------------------------------------------------------------------------------------------------------- ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Apply options to the price line. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#parameters "Direct link to Parameters") • **options**: `Partial` <[`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) \> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#returns "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#example "Direct link to Example") priceLine.applyOptions({ price: 90.0, color: 'red', lineWidth: 3, lineStyle: LightweightCharts.LineStyle.Dashed, axisLabelVisible: false, title: 'P/L 600',}); * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#options "Direct link to options()") > **options**(): `Readonly` <[`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) > \> Get the currently applied options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#returns-1 "Direct link to Returns") `Readonly` <[`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) \> * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#methods) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine#options) --- # Interface: IPriceScaleApi | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface to control chart's price scale Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#methods "Direct link to Methods") --------------------------------------------------------------------------------------------------------------------------------- ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the price scale #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#parameters "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) \> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns "Direct link to Returns") `void` * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#options "Direct link to options()") > **options**(): `Readonly` <[`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) > \> Returns currently applied options of the price scale #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns-1 "Direct link to Returns") `Readonly` <[`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) \> Full set of currently applied options, including defaults * * * ### width()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#width "Direct link to width()") > **width**(): `number` Returns a width of the price scale if it's visible or 0 if invisible. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns-2 "Direct link to Returns") `number` * * * ### setVisibleRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#setvisiblerange "Direct link to setVisibleRange()") > **setVisibleRange**(`range`): `void` Sets the visible range of the price scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#parameters-1 "Direct link to Parameters") • **range**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`number`\> The visible range to set, with `from` and `to` properties. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns-3 "Direct link to Returns") `void` * * * ### getVisibleRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#getvisiblerange "Direct link to getVisibleRange()") > **getVisibleRange**(): [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) > <`number`\> Returns the visible range of the price scale. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns-4 "Direct link to Returns") [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`number`\> The visible range of the price scale, or null if the range is not set. * * * ### setAutoScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#setautoscale "Direct link to setAutoScale()") > **setAutoScale**(`on`): `void` Sets the auto scale mode of the price scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#parameters-2 "Direct link to Parameters") • **on**: `boolean` If true, enables auto scaling; if false, disables it. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#returns-5 "Direct link to Returns") `void` * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#methods) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#options) * [width()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#width) * [setVisibleRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#setvisiblerange) * [getVisibleRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#getvisiblerange) * [setAutoScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi#setautoscale) --- # Interface: ICustomSeriesPaneRenderer | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Renderer for the custom series. This paints on the main chart pane. Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#methods "Direct link to Methods") -------------------------------------------------------------------------------------------------------------------------------------------- ### draw()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#draw "Direct link to draw()") > **draw**(`target`, `priceConverter`, `isHovered`, `hitTestData`?): `void` Draw function for the renderer. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#parameters "Direct link to Parameters") • **target**: `CanvasRenderingTarget2D` canvas context to draw on, refer to FancyCanvas library for more details about this class. • **priceConverter**: [`PriceToCoordinateConverter`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceToCoordinateConverter) converter function for changing prices into vertical coordinate values. • **isHovered**: `boolean` Whether the series is hovered. • **hitTestData?**: `unknown` Optional hit test data for the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#returns "Direct link to Returns") `void` * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#methods) * [draw()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer#draw) --- # Interface: DrawingUtils | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Helper drawing utilities exposed by the library to a Primitive (a.k.a plugin). Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------- ### setLineStyle()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#setlinestyle "Direct link to setLineStyle()") > `readonly` **setLineStyle**: (`ctx`, `lineStyle`) => `void` Drawing utility to change the line style on the canvas context to one of the built-in line styles. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#parameters "Direct link to Parameters") • **ctx**: `CanvasRenderingContext2D` 2D rendering context for the target canvas. • **lineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Built-in [LineStyle](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) to set on the canvas context. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#returns "Direct link to Returns") `void` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#properties) * [setLineStyle()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils#setlinestyle) --- # Interface: HorzScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Options for the time scale; the horizontal scale at the bottom of the chart that displays the time of data. Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#extended-by "Direct link to Extended by") ----------------------------------------------------------------------------------------------------------------------------------------------- * [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### rightOffset[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffset "Direct link to rightOffset") > **rightOffset**: `number` The margin space in bars from the right side of the chart. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value "Direct link to Default Value") `0` * * * ### rightOffsetPixels?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffsetpixels "Direct link to rightOffsetPixels?") > `optional` **rightOffsetPixels**: `number` The margin space in pixels from the right side of the chart. This option has priority over `rightOffset`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-1 "Direct link to Default Value") `undefined` * * * ### barSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#barspacing "Direct link to barSpacing") > **barSpacing**: `number` The space between bars in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-2 "Direct link to Default Value") `6` * * * ### minBarSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minbarspacing "Direct link to minBarSpacing") > **minBarSpacing**: `number` The minimum space between bars in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-3 "Direct link to Default Value") `0.5` * * * ### maxBarSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#maxbarspacing "Direct link to maxBarSpacing") > **maxBarSpacing**: `number` The maximum space between bars in pixels. Has no effect if value is set to `0`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-4 "Direct link to Default Value") `0` * * * ### fixLeftEdge[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixleftedge "Direct link to fixLeftEdge") > **fixLeftEdge**: `boolean` Prevent scrolling to the left of the first bar. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-5 "Direct link to Default Value") `false` * * * ### fixRightEdge[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixrightedge "Direct link to fixRightEdge") > **fixRightEdge**: `boolean` Prevent scrolling to the right of the most recent bar. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-6 "Direct link to Default Value") `false` * * * ### lockVisibleTimeRangeOnResize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#lockvisibletimerangeonresize "Direct link to lockVisibleTimeRangeOnResize") > **lockVisibleTimeRangeOnResize**: `boolean` Prevent changing the visible time range during chart resizing. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-7 "Direct link to Default Value") `false` * * * ### rightBarStaysOnScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightbarstaysonscroll "Direct link to rightBarStaysOnScroll") > **rightBarStaysOnScroll**: `boolean` Prevent the hovered bar from moving when scrolling. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-8 "Direct link to Default Value") `false` * * * ### borderVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordervisible "Direct link to borderVisible") > **borderVisible**: `boolean` Show the time scale border. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-9 "Direct link to Default Value") `true` * * * ### borderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordercolor "Direct link to borderColor") > **borderColor**: `string` The time scale border color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-10 "Direct link to Default Value") `'#2B2B43'` * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#visible "Direct link to visible") > **visible**: `boolean` Show the time scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-11 "Direct link to Default Value") `true` * * * ### timeVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#timevisible "Direct link to timeVisible") > **timeVisible**: `boolean` Show the time, not just the date, in the time scale and vertical crosshair label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-12 "Direct link to Default Value") `false` * * * ### secondsVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#secondsvisible "Direct link to secondsVisible") > **secondsVisible**: `boolean` Show seconds in the time scale and vertical crosshair label in `hh:mm:ss` format for intraday data. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-13 "Direct link to Default Value") `true` * * * ### shiftVisibleRangeOnNewBar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#shiftvisiblerangeonnewbar "Direct link to shiftVisibleRangeOnNewBar") > **shiftVisibleRangeOnNewBar**: `boolean` Shift the visible range to the right (into the future) by the number of new bars when new data is added. Note that this only applies when the last bar is visible. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-14 "Direct link to Default Value") `true` * * * ### allowShiftVisibleRangeOnWhitespaceReplacement[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowshiftvisiblerangeonwhitespacereplacement "Direct link to allowShiftVisibleRangeOnWhitespaceReplacement") > **allowShiftVisibleRangeOnWhitespaceReplacement**: `boolean` Allow the visible range to be shifted to the right when a new bar is added which is replacing an existing whitespace time point on the chart. Note that this only applies when the last bar is visible & `shiftVisibleRangeOnNewBar` is enabled. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-15 "Direct link to Default Value") `false` * * * ### ticksVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ticksvisible "Direct link to ticksVisible") > **ticksVisible**: `boolean` Draw small vertical line on time axis labels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-16 "Direct link to Default Value") `false` * * * ### tickMarkMaxCharacterLength?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#tickmarkmaxcharacterlength "Direct link to tickMarkMaxCharacterLength?") > `optional` **tickMarkMaxCharacterLength**: `number` Maximum tick mark label length. Used to override the default 8 character maximum length. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-17 "Direct link to Default Value") `undefined` * * * ### uniformDistribution[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#uniformdistribution "Direct link to uniformDistribution") > **uniformDistribution**: `boolean` Changes horizontal scale marks generation. With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all. * * * ### minimumHeight[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minimumheight "Direct link to minimumHeight") > **minimumHeight**: `number` Define a minimum height for the time scale. Note: This value will be exceeded if the time scale needs more space to display it's contents. Setting a minimum height could be useful for ensuring that multiple charts positioned in a horizontal stack each have an identical time scale height, or for plugins which require a bit more space within the time scale pane. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-18 "Direct link to Default Value") 0 * * * ### allowBoldLabels[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowboldlabels "Direct link to allowBoldLabels") > **allowBoldLabels**: `boolean` Allow major time scale labels to be rendered in a bolder font weight. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-19 "Direct link to Default Value") true * * * ### ignoreWhitespaceIndices[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ignorewhitespaceindices "Direct link to ignoreWhitespaceIndices") > **ignoreWhitespaceIndices**: `boolean` Ignore time scale points containing only whitespace (for all series) when drawing grid lines, tick marks, and snapping the crosshair to time scale points. For the yield curve chart type it defaults to `true`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-20 "Direct link to Default Value") false * * * ### enableConflation[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#enableconflation "Direct link to enableConflation") > **enableConflation**: `boolean` Enable data conflation for performance optimization when bar spacing is very small. When enabled, multiple data points are automatically combined into single points when they would be rendered in less than 0.5 pixels of screen space. This significantly improves rendering performance for large datasets when zoomed out. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-21 "Direct link to Default Value") false * * * ### conflationThresholdFactor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#conflationthresholdfactor "Direct link to conflationThresholdFactor?") > `optional` **conflationThresholdFactor**: `number` Smoothing factor for conflation thresholds. Controls how aggressively conflation is applied. This can be used to create smoother-looking charts, especially useful for sparklines and small charts. * 1.0 = conflate only when display can't show detail (default, performance-focused) * 2.0 = conflate at 2x the display threshold (moderate smoothing) * 4.0 = conflate at 4x the display threshold (strong smoothing) * 8.0+ = very aggressive smoothing for very small charts Higher values result in fewer data points being displayed, creating smoother but less detailed charts. This is particularly useful for sparklines and small charts where smooth appearance is prioritized over showing every data point. Note: Should be used with continuous series types (line, area, baseline) for best visual results. Candlestick and bar series may look less natural with high smoothing factors. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-22 "Direct link to Default Value") 1.0 * * * ### precomputeConflationOnInit[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationoninit "Direct link to precomputeConflationOnInit") > **precomputeConflationOnInit**: `boolean` Precompute conflation chunks for common levels right after data load. When enabled, the system will precompute conflation data in the background, which improves performance when zooming out but increases initial load time and memory usage. Performance impact: * Initial load: +100-500ms depending on dataset size * Memory usage: +20-50% of original dataset size * Zoom performance: Significant improvement (10-100x faster) Recommended for: Large datasets (>10K points) on machines with sufficient memory #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-23 "Direct link to Default Value") false * * * ### precomputeConflationPriority[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationpriority "Direct link to precomputeConflationPriority") > **precomputeConflationPriority**: `"background"` | `"user-visible"` | `"user-blocking"` Priority used for background precompute tasks when the Prioritized Task Scheduling API is available. Options: * 'background': Lowest priority, tasks run only when the browser is idle * 'user-visible': Medium priority, tasks run when they might affect visible content * 'user-blocking': Highest priority, tasks run immediately and may block user interaction Recommendation: Use 'background' for most cases to avoid impacting user experience. Only use higher priorities if conflation is critical for your application's functionality. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#default-value-24 "Direct link to Default Value") 'background' * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#extended-by) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#properties) * [rightOffset](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffset) * [rightOffsetPixels?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffsetpixels) * [barSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#barspacing) * [minBarSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minbarspacing) * [maxBarSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#maxbarspacing) * [fixLeftEdge](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixleftedge) * [fixRightEdge](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixrightedge) * [lockVisibleTimeRangeOnResize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#lockvisibletimerangeonresize) * [rightBarStaysOnScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightbarstaysonscroll) * [borderVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordervisible) * [borderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordercolor) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#visible) * [timeVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#timevisible) * [secondsVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#secondsvisible) * [shiftVisibleRangeOnNewBar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#shiftvisiblerangeonnewbar) * [allowShiftVisibleRangeOnWhitespaceReplacement](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowshiftvisiblerangeonwhitespacereplacement) * [ticksVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ticksvisible) * [tickMarkMaxCharacterLength?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#tickmarkmaxcharacterlength) * [uniformDistribution](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#uniformdistribution) * [minimumHeight](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minimumheight) * [allowBoldLabels](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowboldlabels) * [ignoreWhitespaceIndices](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ignorewhitespaceindices) * [enableConflation](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#enableconflation) * [conflationThresholdFactor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#conflationthresholdfactor) * [precomputeConflationOnInit](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationoninit) * [precomputeConflationPriority](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationpriority) --- # Interface: CustomConflationContext\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Context object provided to custom series conflation reducers. This wraps the internal SeriesPlotRow data while providing a user-friendly interface. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> = [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### data[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#data "Direct link to data") > `readonly` **data**: `TData` The original custom data item provided by the user. * * * ### index[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#index "Direct link to index") > `readonly` **index**: `number` The time index of the data point in the series. * * * ### originalTime[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#originaltime "Direct link to originalTime") > `readonly` **originalTime**: `HorzScaleItem` The original time value provided by the user. * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#time "Direct link to time") > `readonly` **time**: `unknown` The internal time point object. * * * ### priceValues[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#pricevalues "Direct link to priceValues") > `readonly` **priceValues**: [`CustomSeriesPricePlotValues`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPricePlotValues) The computed price values for this data point (as returned by priceValueBuilder). The last value in this array is used as the current price. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#properties) * [data](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#data) * [index](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#index) * [originalTime](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#originaltime) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#time) * [priceValues](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext#pricevalues) --- # Interface: KineticScrollOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for enabling or disabling kinetic scrolling with mouse and touch gestures. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### touch[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#touch "Direct link to touch") > **touch**: `boolean` Enable kinetic scroll with touch gestures. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#default-value "Direct link to Default Value") `true` * * * ### mouse[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#mouse "Direct link to mouse") > **mouse**: `boolean` Enable kinetic scroll with the mouse. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#default-value-1 "Direct link to Default Value") `false` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#properties) * [touch](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#touch) * [mouse](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions#mouse) --- # Interface: ISeriesPrimitiveAxisView | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This interface represents a label on the price or time axis Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#methods "Direct link to Methods") ------------------------------------------------------------------------------------------------------------------------------------------- ### coordinate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#coordinate "Direct link to coordinate()") > **coordinate**(): `number` The desired coordinate for the label. Note that the label will be automatically moved to prevent overlapping with other labels. If you would like the label to be drawn at the exact coordinate under all circumstances then rather use `fixedCoordinate`. For a price axis the value returned will represent the vertical distance (pixels) from the top. For a time axis the value will represent the horizontal distance from the left. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns "Direct link to Returns") `number` coordinate. distance from top for price axis, or distance from left for time axis. * * * ### fixedCoordinate()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#fixedcoordinate "Direct link to fixedCoordinate()?") > `optional` **fixedCoordinate**(): `number` fixed coordinate of the label. A label with a fixed coordinate value will always be drawn at the specified coordinate and will appear above any 'unfixed' labels. If you supply a fixed coordinate then you should return a large negative number for `coordinate` so that the automatic placement of unfixed labels doesn't leave a blank space for this label. For a price axis the value returned will represent the vertical distance (pixels) from the top. For a time axis the value will represent the horizontal distance from the left. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-1 "Direct link to Returns") `number` coordinate. distance from top for price axis, or distance from left for time axis. * * * ### text()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#text "Direct link to text()") > **text**(): `string` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-2 "Direct link to Returns") `string` text of the label * * * ### textColor()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#textcolor "Direct link to textColor()") > **textColor**(): `string` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-3 "Direct link to Returns") `string` text color of the label * * * ### backColor()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#backcolor "Direct link to backColor()") > **backColor**(): `string` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-4 "Direct link to Returns") `string` background color of the label * * * ### visible()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#visible "Direct link to visible()?") > `optional` **visible**(): `boolean` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-5 "Direct link to Returns") `boolean` whether the label should be visible (default: `true`) * * * ### tickVisible()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#tickvisible "Direct link to tickVisible()?") > `optional` **tickVisible**(): `boolean` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#returns-6 "Direct link to Returns") `boolean` whether the tick mark line should be visible (default: `true`) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#methods) * [coordinate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#coordinate) * [fixedCoordinate()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#fixedcoordinate) * [text()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#text) * [textColor()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#textcolor) * [backColor()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#backcolor) * [visible()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#visible) * [tickVisible()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView#tickvisible) --- # Interface: IPanePrimitiveBase\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Base interface for series primitives. It must be implemented to add some external graphics to series Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **TPaneAttachedParameters** = `unknown` Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#methods "Direct link to Methods") ------------------------------------------------------------------------------------------------------------------------------------- ### updateAllViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#updateallviews "Direct link to updateAllViews()?") > `optional` **updateAllViews**(): `void` This method is called when viewport has been changed, so primitive have to recalculate / invalidate its data #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#returns "Direct link to Returns") `void` * * * ### paneViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#paneviews "Direct link to paneViews()?") > `optional` **paneViews**(): readonly [`IPanePrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView) > \[\] Returns array of objects representing primitive in the main area of the chart #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#returns-1 "Direct link to Returns") readonly [`IPanePrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView) \[\] array of objects; each of then must implement IPrimitivePaneView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### attached()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#attached "Direct link to attached()?") > `optional` **attached**(`param`): `void` Attached Lifecycle hook. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#parameters "Direct link to Parameters") • **param**: `TPaneAttachedParameters` An object containing useful references for the attached primitive to use. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#returns-2 "Direct link to Returns") `void` void * * * ### detached()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#detached "Direct link to detached()?") > `optional` **detached**(): `void` Detached Lifecycle hook. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#returns-3 "Direct link to Returns") `void` void * * * ### hitTest()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#hittest "Direct link to hitTest()?") > `optional` **hitTest**(`x`, `y`): [`PrimitiveHoveredItem`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem) Hit test method which will be called by the library when the cursor is moved. Use this to register object ids being hovered for use within the crosshairMoved and click events emitted by the chart. Additionally, the hit test result can specify a preferred cursor type to display for the main chart pane. This method should return the top most hit for this primitive if more than one object is being intersected. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#parameters-1 "Direct link to Parameters") • **x**: `number` x Coordinate of mouse event • **y**: `number` y Coordinate of mouse event #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#returns-4 "Direct link to Returns") [`PrimitiveHoveredItem`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#methods) * [updateAllViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#updateallviews) * [paneViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#paneviews) * [attached()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#attached) * [detached()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#detached) * [hitTest()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveBase#hittest) --- # Interface: IPrimitivePaneRenderer | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This interface represents rendering some element on the canvas Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#methods "Direct link to Methods") ----------------------------------------------------------------------------------------------------------------------------------------- ### draw()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#draw "Direct link to draw()") > **draw**(`target`, `utils`?): `void` Method to draw main content of the element #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#parameters "Direct link to Parameters") • **target**: `CanvasRenderingTarget2D` canvas context to draw on, refer to FancyCanvas library for more details about this class • **utils?**: [`DrawingUtils`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils) exposes drawing utilities (such as setLineStyle) from the library to plugins #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#returns "Direct link to Returns") `void` * * * ### drawBackground()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#drawbackground "Direct link to drawBackground()?") > `optional` **drawBackground**(`target`, `utils`?): `void` Optional method to draw the background. Some elements could implement this method to draw on the background of the chart. Usually this is some kind of watermarks or time areas highlighting. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#parameters-1 "Direct link to Parameters") • **target**: `CanvasRenderingTarget2D` canvas context to draw on, refer FancyCanvas library for more details about this class • **utils?**: [`DrawingUtils`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/DrawingUtils) exposes drawing utilities (such as setLineStyle) from the library to plugins #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#returns-1 "Direct link to Returns") `void` * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#methods) * [draw()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#draw) * [drawBackground()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer#drawbackground) --- # Interface: ICustomSeriesPaneView\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This interface represents the view for the custom series Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> = [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> • **TSeriesOptions** _extends_ [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) = [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#methods "Direct link to Methods") ---------------------------------------------------------------------------------------------------------------------------------------- ### renderer()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#renderer "Direct link to renderer()") > **renderer**(): [`ICustomSeriesPaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer) This method returns a renderer - special object to draw data for the series on the main chart pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns "Direct link to Returns") [`ICustomSeriesPaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneRenderer) an renderer object to be used for drawing. * * * ### update()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#update "Direct link to update()") > **update**(`data`, `seriesOptions`): `void` This method will be called with the latest data for the renderer to use during the next paint. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#parameters "Direct link to Parameters") • **data**: [`PaneRendererCustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData) <`HorzScaleItem`, `TData`\> • **seriesOptions**: `TSeriesOptions` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-1 "Direct link to Returns") `void` * * * ### priceValueBuilder()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#pricevaluebuilder "Direct link to priceValueBuilder()") > **priceValueBuilder**(`plotRow`): [`CustomSeriesPricePlotValues`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPricePlotValues) A function for interpreting the custom series data and returning an array of numbers representing the price values for the item. These price values are used by the chart to determine the auto-scaling (to ensure the items are in view) and the crosshair and price line positions. The last value in the array will be used as the current value. You shouldn't need to have more than 3 values in this array since the library only needs a largest, smallest, and current value. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#parameters-1 "Direct link to Parameters") • **plotRow**: `TData` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-2 "Direct link to Returns") [`CustomSeriesPricePlotValues`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesPricePlotValues) * * * ### isWhitespace()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#iswhitespace "Direct link to isWhitespace()") > **isWhitespace**(`data`): `data is CustomSeriesWhitespaceData` A function for testing whether a data point should be considered fully specified, or if it should be considered as whitespace. Should return `true` if is whitespace. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#parameters-2 "Direct link to Parameters") • **data**: `TData` | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\> data point to be tested #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-3 "Direct link to Returns") `data is CustomSeriesWhitespaceData` * * * ### defaultOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#defaultoptions "Direct link to defaultOptions()") > **defaultOptions**(): `TSeriesOptions` Default options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-4 "Direct link to Returns") `TSeriesOptions` * * * ### destroy()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#destroy "Direct link to destroy()?") > `optional` **destroy**(): `void` This method will be evoked when the series has been removed from the chart. This method should be used to clean up any objects, references, and other items that could potentially cause memory leaks. This method should contain all the necessary code to clean up the object before it is removed from memory. This includes removing any event listeners or timers that are attached to the object, removing any references to other objects, and resetting any values or properties that were modified during the lifetime of the object. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-5 "Direct link to Returns") `void` * * * ### conflationReducer()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#conflationreducer "Direct link to conflationReducer()?") > `optional` **conflationReducer**(`item1`, `item2`): `TData` Optional reducer used for conflation of custom data points. Given exactly 2 custom data contexts, should return a single aggregated item. Each context provides access to the original data plus metadata needed for conflation. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#parameters-3 "Direct link to Parameters") • **item1**: [`CustomConflationContext`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext) <`HorzScaleItem`, `TData`\> • **item2**: [`CustomConflationContext`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomConflationContext) <`HorzScaleItem`, `TData`\> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#returns-6 "Direct link to Returns") `TData` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#methods) * [renderer()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#renderer) * [update()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#update) * [priceValueBuilder()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#pricevaluebuilder) * [isWhitespace()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#iswhitespace) * [defaultOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#defaultoptions) * [destroy()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#destroy) * [conflationReducer()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView#conflationreducer) --- # Interface: IPanePrimitivePaneView | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This interface represents the primitive for one of the pane of the chart (main chart area, time scale, price scale). Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#methods "Direct link to Methods") ----------------------------------------------------------------------------------------------------------------------------------------- ### zOrder()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#zorder "Direct link to zOrder()?") > `optional` **zOrder**(): [`PrimitivePaneViewZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) Defines where in the visual layer stack the renderer should be executed. Default is `'normal'`. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#returns "Direct link to Returns") [`PrimitivePaneViewZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) the desired position in the visual layer stack. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#see "Direct link to See") [PrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) * * * ### renderer()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#renderer "Direct link to renderer()") > **renderer**(): [`IPrimitivePaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer) This method returns a renderer - special object to draw data #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#returns-1 "Direct link to Returns") [`IPrimitivePaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer) an renderer object to be used for drawing, or `null` if we have nothing to draw. * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#methods) * [zOrder()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#zorder) * [renderer()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitivePaneView#renderer) --- # Interface: IPanePrimitiveWrapper\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface for a pane primitive. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** • **Options** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### detach()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#detach "Direct link to detach()") > **detach**: () => `void` Detaches the plugin from the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#returns "Direct link to Returns") `void` * * * ### getPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#getpane "Direct link to getPane()") > **getPane**: () => [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`T`\> Returns the current pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#returns-1 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`T`\> * * * ### applyOptions()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#applyoptions "Direct link to applyOptions()?") > `optional` **applyOptions**: (`options`) => `void` Applies options to the primitive. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#parameters "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`Options`\> Options to apply. The options are deeply merged with the current options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#returns-2 "Direct link to Returns") `void` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#properties) * [detach()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#detach) * [getPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#getpane) * [applyOptions()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPanePrimitiveWrapper#applyoptions) --- # Interface: LineData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure describing a single item of data for line series Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#extends "Direct link to Extends") --------------------------------------------------------------------------------------------------------------------------- * [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### color?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#color "Direct link to color?") > `optional` **color**: `string` Optional color value for certain data item. If missed, color from options is used * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#inherited-from "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time) * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#value "Direct link to value") > **value**: `number` Price value of the data. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#inherited-from-1 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`value`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value) * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#inherited-from-2 "Direct link to Inherited from") [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#properties) * [color?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#color) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#value) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData#customvalues) --- # Interface: IRange\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a generic range `from` one value `to` another. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------- • **T** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------- ### from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#from "Direct link to from") > **from**: `T` The from value. The start of the range. * * * ### to[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#to "Direct link to to") > **to**: `T` The to value. The end of the range. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#properties) * [from](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#from) * [to](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange#to) --- # Interface: ISeriesPrimitiveBase\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Base interface for series primitives. It must be implemented to add some external graphics to series Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------------- • **TSeriesAttachedParameters** = `unknown` Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#methods "Direct link to Methods") --------------------------------------------------------------------------------------------------------------------------------------- ### updateAllViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#updateallviews "Direct link to updateAllViews()?") > `optional` **updateAllViews**(): `void` This method is called when viewport has been changed, so primitive have to recalculate / invalidate its data #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns "Direct link to Returns") `void` * * * ### priceAxisViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#priceaxisviews "Direct link to priceAxisViews()?") > `optional` **priceAxisViews**(): readonly [`ISeriesPrimitiveAxisView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView) > \[\] Returns array of labels to be drawn on the price axis used by the series #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-1 "Direct link to Returns") readonly [`ISeriesPrimitiveAxisView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView) \[\] array of objects; each of then must implement ISeriesPrimitiveAxisView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### timeAxisViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#timeaxisviews "Direct link to timeAxisViews()?") > `optional` **timeAxisViews**(): readonly [`ISeriesPrimitiveAxisView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView) > \[\] Returns array of labels to be drawn on the time axis #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-2 "Direct link to Returns") readonly [`ISeriesPrimitiveAxisView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveAxisView) \[\] array of objects; each of then must implement ISeriesPrimitiveAxisView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### paneViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#paneviews "Direct link to paneViews()?") > `optional` **paneViews**(): readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) > \[\] Returns array of objects representing primitive in the main area of the chart #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-3 "Direct link to Returns") readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) \[\] array of objects; each of then must implement ISeriesPrimitivePaneView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### priceAxisPaneViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#priceaxispaneviews "Direct link to priceAxisPaneViews()?") > `optional` **priceAxisPaneViews**(): readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) > \[\] Returns array of objects representing primitive in the price axis area of the chart #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-4 "Direct link to Returns") readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) \[\] array of objects; each of then must implement ISeriesPrimitivePaneView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### timeAxisPaneViews()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#timeaxispaneviews "Direct link to timeAxisPaneViews()?") > `optional` **timeAxisPaneViews**(): readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) > \[\] Returns array of objects representing primitive in the time axis area of the chart #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-5 "Direct link to Returns") readonly [`IPrimitivePaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView) \[\] array of objects; each of then must implement ISeriesPrimitivePaneView interface For performance reasons, the lightweight library uses internal caches based on references to arrays So, this method must return new array if set of views has changed and should try to return the same array if nothing changed * * * ### autoscaleInfo()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#autoscaleinfo "Direct link to autoscaleInfo()?") > `optional` **autoscaleInfo**(`startTimePoint`, `endTimePoint`): [`AutoscaleInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) Return autoscaleInfo which will be merged with the series base autoscaleInfo. You can use this to expand the autoscale range to include visual elements drawn outside of the series' current visible price range. **Important**: Please note that this method will be evoked very often during scrolling and zooming of the chart, thus it is recommended that this method is either simple to execute, or makes use of optimisations such as caching to ensure that the chart remains responsive. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#parameters "Direct link to Parameters") • **startTimePoint**: [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) start time point for the current visible range • **endTimePoint**: [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) end time point for the current visible range #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-6 "Direct link to Returns") [`AutoscaleInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) AutoscaleInfo * * * ### attached()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#attached "Direct link to attached()?") > `optional` **attached**(`param`): `void` Attached Lifecycle hook. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#parameters-1 "Direct link to Parameters") • **param**: `TSeriesAttachedParameters` An object containing useful references for the attached primitive to use. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-7 "Direct link to Returns") `void` void * * * ### detached()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#detached "Direct link to detached()?") > `optional` **detached**(): `void` Detached Lifecycle hook. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-8 "Direct link to Returns") `void` void * * * ### hitTest()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#hittest "Direct link to hitTest()?") > `optional` **hitTest**(`x`, `y`): [`PrimitiveHoveredItem`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem) Hit test method which will be called by the library when the cursor is moved. Use this to register object ids being hovered for use within the crosshairMoved and click events emitted by the chart. Additionally, the hit test result can specify a preferred cursor type to display for the main chart pane. This method should return the top most hit for this primitive if more than one object is being intersected. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#parameters-2 "Direct link to Parameters") • **x**: `number` x Coordinate of mouse event • **y**: `number` y Coordinate of mouse event #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#returns-9 "Direct link to Returns") [`PrimitiveHoveredItem`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#methods) * [updateAllViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#updateallviews) * [priceAxisViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#priceaxisviews) * [timeAxisViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#timeaxisviews) * [paneViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#paneviews) * [priceAxisPaneViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#priceaxispaneviews) * [timeAxisPaneViews()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#timeaxispaneviews) * [autoscaleInfo()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#autoscaleinfo) * [attached()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#attached) * [detached()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#detached) * [hitTest()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveBase#hittest) --- # Interface: OhlcData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a bar with a [Time](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) and open, high, low, and close prices. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#extends "Direct link to Extends") --------------------------------------------------------------------------------------------------------------------------- * [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#extended-by "Direct link to Extended by") --------------------------------------------------------------------------------------------------------------------------------------- * [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) * [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#time "Direct link to time") > **time**: `HorzScaleItem` The bar time. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#overrides "Direct link to Overrides") [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#time) * * * ### open[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#open "Direct link to open") > **open**: `number` The open price. * * * ### high[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#high "Direct link to high") > **high**: `number` The high price. * * * ### low[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#low "Direct link to low") > **low**: `number` The low price. * * * ### close[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#close "Direct link to close") > **close**: `number` The close price. * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#inherited-from "Direct link to Inherited from") [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#extends) * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#time) * [open](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#open) * [high](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#high) * [low](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#low) * [close](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#close) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData#customvalues) --- # Interface: IPrimitivePaneView | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This interface represents the primitive for one of the pane of the chart (main chart area, time scale, price scale). Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#methods "Direct link to Methods") ------------------------------------------------------------------------------------------------------------------------------------- ### zOrder()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#zorder "Direct link to zOrder()?") > `optional` **zOrder**(): [`PrimitivePaneViewZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) Defines where in the visual layer stack the renderer should be executed. Default is `'normal'`. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#returns "Direct link to Returns") [`PrimitivePaneViewZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) the desired position in the visual layer stack. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#see "Direct link to See") [PrimitivePaneViewZOrder](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) * * * ### renderer()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#renderer "Direct link to renderer()") > **renderer**(): [`IPrimitivePaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer) This method returns a renderer - special object to draw data #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#returns-1 "Direct link to Returns") [`IPrimitivePaneRenderer`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneRenderer) an renderer object to be used for drawing, or `null` if we have nothing to draw. * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#methods) * [zOrder()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#zorder) * [renderer()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPrimitivePaneView#renderer) --- # Interface: Point | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a point on the chart. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------- ### x[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#x "Direct link to x") > `readonly` **x**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The x coordinate. * * * ### y[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#y "Direct link to y") > `readonly` **y**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The y coordinate. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#properties) * [x](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#x) * [y](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point#y) --- # Interface: PaneRendererCustomData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Data provide to the custom series pane view which can be used within the renderer for drawing the series data. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------------- ### bars[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#bars "Direct link to bars") > **bars**: readonly [`CustomBarItemData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomBarItemData) > <`HorzScaleItem`, `TData`\>\[\] List of all the series' items and their x coordinates. * * * ### barSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#barspacing "Direct link to barSpacing") > **barSpacing**: `number` Spacing between consecutive bars. * * * ### visibleRange[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#visiblerange "Direct link to visibleRange") > **visibleRange**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) > <`number`\> The current visible range of items on the chart. * * * ### conflationFactor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#conflationfactor "Direct link to conflationFactor") > **conflationFactor**: `number` Current conflation factor. The value represents how many data points have been combined to form this conflated data point. This can be used to calculate the effective bar spacing until the next data point. `effectiveBarSpacing = conflationFactor * barSpacing`. If you are rendering a non-continuous series (like a Candlestick instead of Line) then you likely would want to use the effectiveBarSpacing value for your width calculations. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#properties) * [bars](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#bars) * [barSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#barspacing) * [visibleRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#visiblerange) * [conflationFactor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneRendererCustomData#conflationfactor) --- # Interface: ImageWatermarkOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### maxWidth?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#maxwidth "Direct link to maxWidth?") > `optional` **maxWidth**: `number` Maximum width for the image watermark. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#default-value "Direct link to Default Value") undefined * * * ### maxHeight?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#maxheight "Direct link to maxHeight?") > `optional` **maxHeight**: `number` Maximum height for the image watermark. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#default-value-1 "Direct link to Default Value") undefined * * * ### padding[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#padding "Direct link to padding") > **padding**: `number` Padding to maintain around the image watermark relative to the chart pane edges. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#default-value-2 "Direct link to Default Value") 0 * * * ### alpha[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#alpha "Direct link to alpha") > **alpha**: `number` The alpha (opacity) for the image watermark. Where `1` is fully opaque (visible) and `0` is fully transparent. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#default-value-3 "Direct link to Default Value") 1 * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#properties) * [maxWidth?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#maxwidth) * [maxHeight?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#maxheight) * [padding](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#padding) * [alpha](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ImageWatermarkOptions#alpha) --- # Interface: PaneSize | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Dimensions of the Chart Pane (the main chart area which excludes the time and price scales). Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#height "Direct link to height") > **height**: `number` Height of the Chart Pane (pixels) * * * ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#width "Direct link to width") > **width**: `number` Width of the Chart Pane (pixels) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#properties) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#height) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize#width) --- # Interface: IHorzScaleBehavior\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Class interface for Horizontal scale behavior Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#methods "Direct link to Methods") ------------------------------------------------------------------------------------------------------------------------------------- ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#options "Direct link to options()") > **options**(): [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) > <`HorzScaleItem`\> Structure describing options of the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns "Direct link to Returns") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`HorzScaleItem`\> ChartOptionsBase * * * ### setOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#setoptions "Direct link to setOptions()") > **setOptions**(`options`): `void` Set the chart options. Note that this is different to `applyOptions` since the provided options will overwrite the current options instead of merging with the current options. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters "Direct link to Parameters") • **options**: [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`HorzScaleItem`\> Chart options to be set #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-1 "Direct link to Returns") `void` void * * * ### preprocessData()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#preprocessdata "Direct link to preprocessData()") > **preprocessData**(`data`): `void` Method to preprocess the data. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-1 "Direct link to Parameters") • **data**: [`DataItem`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem) <`HorzScaleItem`\> | [`DataItem`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataItem) <`HorzScaleItem`\>\[\] Data items for the series #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-2 "Direct link to Returns") `void` void * * * ### convertHorzItemToInternal()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#converthorzitemtointernal "Direct link to convertHorzItemToInternal()") > **convertHorzItemToInternal**(`item`): `object` Convert horizontal scale item into an internal horizontal scale item. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-2 "Direct link to Parameters") • **item**: `HorzScaleItem` item to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-3 "Direct link to Returns") `object` InternalHorzScaleItem ##### \[species\][​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#species "Direct link to [species]") > **\[species\]**: `"InternalHorzScaleItem"` The 'name' or species of the nominal. * * * ### createConverterToInternalObj()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#createconvertertointernalobj "Direct link to createConverterToInternalObj()") > **createConverterToInternalObj**(`data`): [`HorzScaleItemConverterToInternalObj`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj) > <`HorzScaleItem`\> Creates and returns a converter for changing series data into internal horizontal scale items. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-3 "Direct link to Parameters") • **data**: ([`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>)\[\] series data #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-4 "Direct link to Returns") [`HorzScaleItemConverterToInternalObj`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScaleItemConverterToInternalObj) <`HorzScaleItem`\> HorzScaleItemConverterToInternalObj * * * ### key()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#key "Direct link to key()") > **key**(`internalItem`): [`InternalHorzScaleItemKey`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItemKey) Returns the key for the specified horizontal scale item. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-4 "Direct link to Parameters") • **internalItem**: `HorzScaleItem` | `object` horizontal scale item for which the key should be returned #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-5 "Direct link to Returns") [`InternalHorzScaleItemKey`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/InternalHorzScaleItemKey) InternalHorzScaleItemKey * * * ### cacheKey()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#cachekey "Direct link to cacheKey()") > **cacheKey**(`internalItem`): `number` Returns the cache key for the specified horizontal scale item. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-5 "Direct link to Parameters") • **internalItem** horizontal scale item for which the cache key should be returned • **internalItem.\[species\]**: `"InternalHorzScaleItem"` The 'name' or species of the nominal. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-6 "Direct link to Returns") `number` number * * * ### updateFormatter()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#updateformatter "Direct link to updateFormatter()") > **updateFormatter**(`options`): `void` Update the formatter with the localization options. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-6 "Direct link to Parameters") • **options**: [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) <`HorzScaleItem`\> Localization options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-7 "Direct link to Returns") `void` void * * * ### formatHorzItem()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#formathorzitem "Direct link to formatHorzItem()") > **formatHorzItem**(`item`): `string` Format the horizontal scale item into a display string. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-7 "Direct link to Parameters") • **item** horizontal scale item to be formatted as a string • **item.\[species\]**: `"InternalHorzScaleItem"` The 'name' or species of the nominal. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-8 "Direct link to Returns") `string` string * * * ### formatTickmark()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#formattickmark "Direct link to formatTickmark()") > **formatTickmark**(`item`, `localizationOptions`): `string` Format the horizontal scale tickmark into a display string. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-8 "Direct link to Parameters") • **item**: [`TickMark`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark) tickmark item • **localizationOptions**: [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) <`HorzScaleItem`\> Localization options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-9 "Direct link to Returns") `string` string * * * ### maxTickMarkWeight()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#maxtickmarkweight "Direct link to maxTickMarkWeight()") > **maxTickMarkWeight**(`marks`): [`TickMarkWeightValue`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) Returns the maximum tickmark weight value for the specified tickmarks on the time scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-9 "Direct link to Parameters") • **marks**: [`TimeMark`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark) \[\] Timescale tick marks #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-10 "Direct link to Returns") [`TickMarkWeightValue`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) TickMarkWeightValue * * * ### fillWeightsForPoints()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#fillweightsforpoints "Direct link to fillWeightsForPoints()") > **fillWeightsForPoints**(`sortedTimePoints`, `startIndex`): `void` Fill the weights for the sorted time scale points. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-10 "Direct link to Parameters") • **sortedTimePoints**: readonly [`Mutable`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Mutable) <[`TimeScalePoint`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint) \>\[\] sorted time scale points • **startIndex**: `number` starting index #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-11 "Direct link to Returns") `void` void * * * ### shouldResetTickmarkLabels()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#shouldresettickmarklabels "Direct link to shouldResetTickmarkLabels()?") > `optional` **shouldResetTickmarkLabels**(`tickMarks`): `boolean` If returns true, then the tick mark formatter will be called for all the visible tick marks even if the formatter has previously been called for a specific tick mark. This allows you to change the formatting on all the tick marks. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#parameters-11 "Direct link to Parameters") • **tickMarks**: readonly [`TickMark`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark) \[\] array of tick marks #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#returns-12 "Direct link to Returns") `boolean` boolean * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#methods) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#options) * [setOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#setoptions) * [preprocessData()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#preprocessdata) * [convertHorzItemToInternal()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#converthorzitemtointernal) * [createConverterToInternalObj()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#createconvertertointernalobj) * [key()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#key) * [cacheKey()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#cachekey) * [updateFormatter()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#updateformatter) * [formatHorzItem()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#formathorzitem) * [formatTickmark()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#formattickmark) * [maxTickMarkWeight()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#maxtickmarkweight) * [fillWeightsForPoints()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#fillweightsforpoints) * [shouldResetTickmarkLabels()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior#shouldresettickmarklabels) --- # Interface: PriceFormatBuiltIn | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents series value formatting options. The precision and minMove properties allow wide customization of formatting. Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#examples "Direct link to Examples") ---------------------------------------------------------------------------------------------------------------------------------------- `minMove=0.01`, `precision` is not specified - prices will change like 1.13, 1.14, 1.15 etc. `minMove=0.01`, `precision=3` - prices will change like 1.130, 1.140, 1.150 etc. `minMove=0.05`, `precision` is not specified - prices will change like 1.10, 1.15, 1.20 etc. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------- ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#type "Direct link to type") > **type**: `"percent"` | `"price"` | `"volume"` Built-in price formats: * `'price'` is the most common choice; it allows customization of precision and rounding of prices. * `'volume'` uses abbreviation for formatting prices like `1.2K` or `12.67M`. * `'percent'` uses `%` sign at the end of prices. * * * ### precision[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#precision "Direct link to precision") > **precision**: `number` Number of digits after the decimal point. If it is not set, then its value is calculated automatically based on minMove. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#default-value "Direct link to Default Value") `2` if both [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove) and [precision](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#precision) are not provided, calculated automatically based on [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove) otherwise. * * * ### minMove[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove "Direct link to minMove") > **minMove**: `number` The minimum possible step size for price value movement. This value shouldn't have more decimal digits than the precision. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#default-value-1 "Direct link to Default Value") `0.01` * * * ### base?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#base "Direct link to base?") > `optional` **base**: `number` The base value for the price format. It should equal to 1 / [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove) . If this option is specified, we ignore the [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove) option. It can be useful for cases with very small price movements like `1e-18` where we can reach limitations of floating point precision. * [Examples](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#examples) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#type) * [precision](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#precision) * [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#minmove) * [base?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn#base) --- # Interface: LayoutPanesOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents panes customizations. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------- ### enableResize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#enableresize "Direct link to enableResize") > **enableResize**: `boolean` Enable panes resizing #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#default-value "Direct link to Default Value") `true` * * * ### separatorColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorcolor "Direct link to separatorColor") > **separatorColor**: `string` Color of pane separator #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#default-value-1 "Direct link to Default Value") `#2B2B43` * * * ### separatorHoverColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorhovercolor "Direct link to separatorHoverColor") > **separatorHoverColor**: `string` Color of pane separator background applied on hover #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#default-value-2 "Direct link to Default Value") `rgba(178, 181, 189, 0.2)` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#properties) * [enableResize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#enableresize) * [separatorColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorcolor) * [separatorHoverColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorhovercolor) --- # Interface: LastValueDataResultWithoutData | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents last value data result of a series for plugins when there is no data Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------------------- ### noData[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData#nodata "Direct link to noData") > **noData**: `true` Indicates if the series has data. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData#properties) * [noData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithoutData#nodata) --- # Interface: LastValueDataResultWithData | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents last value data result of a series for plugins when there is data Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------------- ### noData[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#nodata "Direct link to noData") > **noData**: `false` Indicates if the series has data. * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#price "Direct link to price") > **price**: `number` The last price of the series. * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#color "Direct link to color") > **color**: `string` The color of the last value. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#properties) * [noData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#nodata) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#price) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LastValueDataResultWithData#color) --- # Interface: LayoutOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents layout options Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------- ### background[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#background "Direct link to background") > **background**: [`Background`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Background) Chart and scales background color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value "Direct link to Default Value") `{ type: ColorType.Solid, color: '#FFFFFF' }` * * * ### textColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#textcolor "Direct link to textColor") > **textColor**: `string` Color of text on the scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-1 "Direct link to Default Value") `'#191919'` * * * ### fontSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontsize "Direct link to fontSize") > **fontSize**: `number` Font size of text on scales in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-2 "Direct link to Default Value") `12` * * * ### fontFamily[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontfamily "Direct link to fontFamily") > **fontFamily**: `string` Font family of text on the scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-3 "Direct link to Default Value") `-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif` * * * ### panes[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#panes "Direct link to panes") > **panes**: [`LayoutPanesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions) Panes options. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-4 "Direct link to Default Value") `{ enableResize: true, separatorColor: '#2B2B43', separatorHoverColor: 'rgba(178, 181, 189, 0.2)'}` * * * ### attributionLogo[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#attributionlogo "Direct link to attributionLogo") > **attributionLogo**: `boolean` Display the TradingView attribution logo on the main chart pane. The licence for library specifies that you add the "attribution notice" from the NOTICE file to your code and a link to [https://www.tradingview.com/](https://www.tradingview.com/) to the page of your website or mobile application that is available to your users. Using this attribution logo is sufficient for meeting this linking requirement. However, if you already fulfill this requirement then you can disable this attribution logo. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-5 "Direct link to Default Value") true * * * ### colorSpace[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#colorspace "Direct link to colorSpace") > **colorSpace**: [`ColorSpace`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ColorSpace) Specifies the color space of the rendering context for the internal canvas elements. Note: this option should only be specified during the chart creation and not changed at a later stage by using `applyOptions`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#default-value-6 "Direct link to Default Value") `srgb` See [HTMLCanvasElement: getContext() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#colorspace) for more info * * * ### colorParsers[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#colorparsers "Direct link to colorParsers") > **colorParsers**: [`CustomColorParser`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomColorParser) > \[\] Array of custom color parser functions to handle color formats outside of standard sRGB values. Each parser function takes a string input and should return either: * An [Rgba](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Rgba) array \[r,g,b,a\] for valid colors (with values 0-255 for rgb and 0-1 for a) * null if the parser cannot handle that color string, allowing the next parser to attempt it Parsers are tried in order until one returns a non-null result. This allows chaining multiple parsers to handle different color space formats. Note: this option should only be specified during the chart creation and not changed at a later stage by using `applyOptions`. The library already supports these color formats by default: * Hex colors (#RGB, #RGBA, #RRGGBB, #RRGGBBAA) * RGB/RGBA functions (rgb(), rgba()) * HSL/HSLA functions (hsl(), hsla()) * HWB function (hwb()) * Named colors (red, blue, etc.) * 'transparent' keyword Custom parsers are only needed for other color spaces like: * Display P3: color(display-p3 r g b) * CIE Lab: lab(l a b) * LCH: lch(l c h) * Oklab: oklab(l a b) * Oklch: oklch(l c h) * ... * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#properties) * [background](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#background) * [textColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#textcolor) * [fontSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontsize) * [fontFamily](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontfamily) * [panes](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#panes) * [attributionLogo](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#attributionlogo) * [colorSpace](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#colorspace) * [colorParsers](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#colorparsers) --- # Interface: LineStyleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents style options for a line series. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#color "Direct link to color") > **color**: `string` Line color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value "Direct link to Default Value") `'#2196f3'` * * * ### lineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linestyle "Direct link to lineStyle") > **lineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-1 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### lineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linewidth "Direct link to lineWidth") > **lineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Line width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-2 "Direct link to Default Value") `3` * * * ### lineType[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linetype "Direct link to lineType") > **lineType**: [`LineType`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineType) Line type. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-3 "Direct link to Default Value") {@link LineType.Simple} * * * ### lineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linevisible "Direct link to lineVisible") > **lineVisible**: `boolean` Show series line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-4 "Direct link to Default Value") `true` * * * ### pointMarkersVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#pointmarkersvisible "Direct link to pointMarkersVisible") > **pointMarkersVisible**: `boolean` Show circle markers on each point. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-5 "Direct link to Default Value") `false` * * * ### pointMarkersRadius?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#pointmarkersradius "Direct link to pointMarkersRadius?") > `optional` **pointMarkersRadius**: `number` Circle markers radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-6 "Direct link to Default Value") `undefined` * * * ### crosshairMarkerVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkervisible "Direct link to crosshairMarkerVisible") > **crosshairMarkerVisible**: `boolean` Show the crosshair marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-7 "Direct link to Default Value") `true` * * * ### crosshairMarkerRadius[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerradius "Direct link to crosshairMarkerRadius") > **crosshairMarkerRadius**: `number` Crosshair marker radius in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-8 "Direct link to Default Value") `4` * * * ### crosshairMarkerBorderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerbordercolor "Direct link to crosshairMarkerBorderColor") > **crosshairMarkerBorderColor**: `string` Crosshair marker border color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-9 "Direct link to Default Value") `''` * * * ### crosshairMarkerBackgroundColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerbackgroundcolor "Direct link to crosshairMarkerBackgroundColor") > **crosshairMarkerBackgroundColor**: `string` The crosshair marker background color. An empty string falls back to the color of the series under the crosshair. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-10 "Direct link to Default Value") `''` * * * ### crosshairMarkerBorderWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerborderwidth "Direct link to crosshairMarkerBorderWidth") > **crosshairMarkerBorderWidth**: `number` Crosshair marker border width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-11 "Direct link to Default Value") `2` * * * ### lastPriceAnimation[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#lastpriceanimation "Direct link to lastPriceAnimation") > **lastPriceAnimation**: [`LastPriceAnimationMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LastPriceAnimationMode) Last price animation mode. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#default-value-12 "Direct link to Default Value") {@link LastPriceAnimationMode.Disabled} * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#color) * [lineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linestyle) * [lineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linewidth) * [lineType](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linetype) * [lineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#linevisible) * [pointMarkersVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#pointmarkersvisible) * [pointMarkersRadius?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#pointmarkersradius) * [crosshairMarkerVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkervisible) * [crosshairMarkerRadius](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerradius) * [crosshairMarkerBorderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerbordercolor) * [crosshairMarkerBackgroundColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerbackgroundcolor) * [crosshairMarkerBorderWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#crosshairmarkerborderwidth) * [lastPriceAnimation](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#lastpriceanimation) --- # Interface: PaneAttachedParameter\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Object containing references to the chart instance, and a requestUpdate method for triggering a refresh of the chart. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### chart[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#chart "Direct link to chart") > **chart**: [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) > <`HorzScaleItem`\> Chart instance. * * * ### requestUpdate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#requestupdate "Direct link to requestUpdate()") > **requestUpdate**: () => `void` Request an update (redraw the chart) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#returns "Direct link to Returns") `void` * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#properties) * [chart](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#chart) * [requestUpdate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneAttachedParameter#requestupdate) --- # Interface: PriceRange | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a price range. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------- ### minValue[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#minvalue "Direct link to minValue") > **minValue**: `number` Maximum value in the range. * * * ### maxValue[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#maxvalue "Direct link to maxValue") > **maxValue**: `number` Minimum value in the range. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#properties) * [minValue](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#minvalue) * [maxValue](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceRange#maxvalue) --- # Interface: PriceScaleMargins | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Defines margins of the price scale. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### top[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#top "Direct link to top") > **top**: `number` Top margin in percentages. Must be greater or equal to 0 and less than 1. * * * ### bottom[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#bottom "Direct link to bottom") > **bottom**: `number` Bottom margin in percentages. Must be greater or equal to 0 and less than 1. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#properties) * [top](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#top) * [bottom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins#bottom) --- # Interface: LocalizationOptions\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options for formatting dates, times, and prices according to a locale. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#extends "Direct link to Extends") -------------------------------------------------------------------------------------------------------------------------------------- * [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#extended-by "Direct link to Extended by") -------------------------------------------------------------------------------------------------------------------------------------------------- * [`PriceChartLocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------------- ### timeFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#timeformatter "Direct link to timeFormatter?") > `optional` **timeFormatter**: [`TimeFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn) > <`HorzScaleItem`\> Override formatting of the time scale crosshair label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value "Direct link to Default Value") `undefined` * * * ### dateFormat[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#dateformat "Direct link to dateFormat") > **dateFormat**: `string` Date formatting string. Can contain `yyyy`, `yy`, `MMMM`, `MMM`, `MM` and `dd` literals which will be replaced with corresponding date's value. Ignored if [timeFormatter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#timeformatter) has been specified. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-1 "Direct link to Default Value") `'dd MMM \'yy'` * * * ### locale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#locale "Direct link to locale") > **locale**: `string` Current locale used to format dates. Uses the browser's language settings by default. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#see "Direct link to See") [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl#Locale\_identification\_and\_negotiation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-2 "Direct link to Default Value") `navigator.language` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#inherited-from "Direct link to Inherited from") [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) . [`locale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#locale) * * * ### priceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#priceformatter "Direct link to priceFormatter?") > `optional` **priceFormatter**: [`PriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn) Override formatting of the price scale tick marks, labels and crosshair labels. Can be used for cases that can't be covered with built-in price formats. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#see-1 "Direct link to See") [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-3 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#inherited-from-1 "Direct link to Inherited from") [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) . [`priceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#priceformatter) * * * ### tickmarksPriceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspriceformatter "Direct link to tickmarksPriceFormatter?") > `optional` **tickmarksPriceFormatter**: [`TickmarksPriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn) Overrides the formatting of price scale tick marks. Use this to define formatting rules based on all provided price values. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-4 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#inherited-from-2 "Direct link to Inherited from") [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) . [`tickmarksPriceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspriceformatter) * * * ### percentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#percentageformatter "Direct link to percentageFormatter?") > `optional` **percentageFormatter**: [`PercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn) Overrides the formatting of percentage scale tick marks. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-5 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#inherited-from-3 "Direct link to Inherited from") [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) . [`percentageFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#percentageformatter) * * * ### tickmarksPercentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspercentageformatter "Direct link to tickmarksPercentageFormatter?") > `optional` **tickmarksPercentageFormatter**: [`TickmarksPercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn) Override formatting of the percentage scale tick marks. Can be used if formatting should be adjusted based on all the values being formatted #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#default-value-6 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#inherited-from-4 "Direct link to Inherited from") [`LocalizationOptionsBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase) . [`tickmarksPercentageFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspercentageformatter) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#extends) * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#properties) * [timeFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#timeformatter) * [dateFormat](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#dateformat) * [locale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#locale) * [priceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#priceformatter) * [tickmarksPriceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspriceformatter) * [percentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#percentageformatter) * [tickmarksPercentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspercentageformatter) --- # Interface: LocalizationOptionsBase | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents basic localization options Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#extended-by "Direct link to Extended by") ------------------------------------------------------------------------------------------------------------------------------------------------------ * [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### locale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#locale "Direct link to locale") > **locale**: `string` Current locale used to format dates. Uses the browser's language settings by default. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#see "Direct link to See") [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl#Locale\_identification\_and\_negotiation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#default-value "Direct link to Default Value") `navigator.language` * * * ### priceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#priceformatter "Direct link to priceFormatter?") > `optional` **priceFormatter**: [`PriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn) Override formatting of the price scale tick marks, labels and crosshair labels. Can be used for cases that can't be covered with built-in price formats. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#see-1 "Direct link to See") [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#default-value-1 "Direct link to Default Value") `undefined` * * * ### tickmarksPriceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspriceformatter "Direct link to tickmarksPriceFormatter?") > `optional` **tickmarksPriceFormatter**: [`TickmarksPriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn) Overrides the formatting of price scale tick marks. Use this to define formatting rules based on all provided price values. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#default-value-2 "Direct link to Default Value") `undefined` * * * ### percentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#percentageformatter "Direct link to percentageFormatter?") > `optional` **percentageFormatter**: [`PercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn) Overrides the formatting of percentage scale tick marks. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#default-value-3 "Direct link to Default Value") `undefined` * * * ### tickmarksPercentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspercentageformatter "Direct link to tickmarksPercentageFormatter?") > `optional` **tickmarksPercentageFormatter**: [`TickmarksPercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn) Override formatting of the percentage scale tick marks. Can be used if formatting should be adjusted based on all the values being formatted #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#default-value-4 "Direct link to Default Value") `undefined` * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#extended-by) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#properties) * [locale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#locale) * [priceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#priceformatter) * [tickmarksPriceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspriceformatter) * [percentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#percentageformatter) * [tickmarksPercentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptionsBase#tickmarkspercentageformatter) --- # Interface: PriceFormatCustom | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents series value formatting options. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#type "Direct link to type") > **type**: `"custom"` The custom price format. * * * ### formatter[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#formatter "Direct link to formatter") > **formatter**: [`PriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn) Override price formatting behaviour. Can be used for cases that can't be covered with built-in price formats. * * * ### tickmarksFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#tickmarksformatter "Direct link to tickmarksFormatter?") > `optional` **tickmarksFormatter**: [`TickmarksPriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn) Override price formatting for multiple prices. Can be used if formatter should be adjusted based of all values being formatted. * * * ### minMove[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#minmove "Direct link to minMove") > **minMove**: `number` The minimum possible step size for price value movement. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#default-value "Direct link to Default Value") `0.01` * * * ### base?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#base "Direct link to base?") > `optional` **base**: `number` The base value for the price format. It should equal to 1 / [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#minmove) . If this option is specified, we ignore the [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#minmove) option. It can be useful for cases with very small price movements like `1e-18` where we can reach limitations of floating point precision. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#type) * [formatter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#formatter) * [tickmarksFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#tickmarksformatter) * [minMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#minmove) * [base?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom#base) --- # Interface: SeriesDataItemTypeMap\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of data that a series contains. For example a bar series contains [BarData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) or [WhitespaceData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) . Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#bar "Direct link to Bar") > **Bar**: [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> The types of bar series data. * * * ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#candlestick "Direct link to Candlestick") > **Candlestick**: [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> The types of candlestick series data. * * * ### Area[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#area "Direct link to Area") > **Area**: [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> The types of area series data. * * * ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#baseline "Direct link to Baseline") > **Baseline**: [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> The types of baseline series data. * * * ### Line[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#line "Direct link to Line") > **Line**: [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> The types of line series data. * * * ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#histogram "Direct link to Histogram") > **Histogram**: [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> The types of histogram series data. * * * ### Custom[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#custom "Direct link to Custom") > **Custom**: [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\> The base types of an custom series data. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#properties) * [Bar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#bar) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#candlestick) * [Area](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#area) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#baseline) * [Line](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#line) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#histogram) * [Custom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap#custom) --- # Interface: PriceScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Structure that describes price scale options Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### autoScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#autoscale "Direct link to autoScale") > **autoScale**: `boolean` Autoscaling is a feature that automatically adjusts a price scale to fit the visible range of data. Note that overlay price scales are always auto-scaled. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value "Direct link to Default Value") `true` * * * ### mode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#mode "Direct link to mode") > **mode**: [`PriceScaleMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceScaleMode) Price scale mode. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-1 "Direct link to Default Value") {@link PriceScaleMode.Normal} * * * ### invertScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#invertscale "Direct link to invertScale") > **invertScale**: `boolean` Invert the price scale, so that a upwards trend is shown as a downwards trend and vice versa. Affects both the price scale and the data on the chart. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-2 "Direct link to Default Value") `false` * * * ### alignLabels[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#alignlabels "Direct link to alignLabels") > **alignLabels**: `boolean` Align price scale labels to prevent them from overlapping. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-3 "Direct link to Default Value") `true` * * * ### scaleMargins[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#scalemargins "Direct link to scaleMargins") > **scaleMargins**: [`PriceScaleMargins`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleMargins) Price scale margins. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-4 "Direct link to Default Value") `{ bottom: 0.1, top: 0.2 }` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#example "Direct link to Example") chart.priceScale('right').applyOptions({ scaleMargins: { top: 0.8, bottom: 0, },}); * * * ### borderVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#bordervisible "Direct link to borderVisible") > **borderVisible**: `boolean` Set true to draw a border between the price scale and the chart area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-5 "Direct link to Default Value") `true` * * * ### borderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#bordercolor "Direct link to borderColor") > **borderColor**: `string` Price scale border color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-6 "Direct link to Default Value") `'#2B2B43'` * * * ### textColor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#textcolor "Direct link to textColor?") > `optional` **textColor**: `string` Price scale text color. If not provided [LayoutOptions.textColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#textcolor) is used. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-7 "Direct link to Default Value") `undefined` * * * ### entireTextOnly[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#entiretextonly "Direct link to entireTextOnly") > **entireTextOnly**: `boolean` Show top and bottom corner labels only if entire text is visible. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-8 "Direct link to Default Value") `false` * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#visible "Direct link to visible") > **visible**: `boolean` Indicates if this price scale visible. Ignored by overlay price scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-9 "Direct link to Default Value") `true` for the right price scale and `false` for the left. For the yield curve chart, the default is for the left scale to be visible. * * * ### ticksVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#ticksvisible "Direct link to ticksVisible") > **ticksVisible**: `boolean` Draw small horizontal line on price axis labels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-10 "Direct link to Default Value") `false` * * * ### minimumWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#minimumwidth "Direct link to minimumWidth") > **minimumWidth**: `number` Define a minimum width for the price scale. Note: This value will be exceeded if the price scale needs more space to display it's contents. Setting a minimum width could be useful for ensuring that multiple charts positioned in a vertical stack each have an identical price scale width, or for plugins which require a bit more space within the price scale pane. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-11 "Direct link to Default Value") 0 * * * ### ensureEdgeTickMarksVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#ensureedgetickmarksvisible "Direct link to ensureEdgeTickMarksVisible") > **ensureEdgeTickMarksVisible**: `boolean` Ensures that tick marks are always visible at the very top and bottom of the price scale, regardless of the data range. When enabled, a tick mark will be drawn at both edges of the scale, providing clear boundary indicators. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#default-value-12 "Direct link to Default Value") false * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#properties) * [autoScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#autoscale) * [mode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#mode) * [invertScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#invertscale) * [alignLabels](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#alignlabels) * [scaleMargins](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#scalemargins) * [borderVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#bordervisible) * [borderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#bordercolor) * [textColor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#textcolor) * [entireTextOnly](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#entiretextonly) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#visible) * [ticksVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#ticksvisible) * [minimumWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#minimumwidth) * [ensureEdgeTickMarksVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#ensureedgetickmarksvisible) --- # Interface: PriceLineOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a price line options. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### id?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#id "Direct link to id?") > `optional` **id**: `string` The optional ID of this price line. * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#price "Direct link to price") > **price**: `number` Price line's value. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value "Direct link to Default Value") `0` * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#color "Direct link to color") > **color**: `string` Price line's color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-1 "Direct link to Default Value") `''` * * * ### lineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linewidth "Direct link to lineWidth") > **lineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Price line's width in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-2 "Direct link to Default Value") `1` * * * ### lineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linestyle "Direct link to lineStyle") > **lineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Price line's style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-3 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### lineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linevisible "Direct link to lineVisible") > **lineVisible**: `boolean` Display line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-4 "Direct link to Default Value") `true` * * * ### axisLabelVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabelvisible "Direct link to axisLabelVisible") > **axisLabelVisible**: `boolean` Display the current price value in on the price scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-5 "Direct link to Default Value") `true` * * * ### title[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#title "Direct link to title") > **title**: `string` Price line's on the chart pane. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-6 "Direct link to Default Value") `''` * * * ### axisLabelColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabelcolor "Direct link to axisLabelColor") > **axisLabelColor**: `string` Background color for the axis label. Will default to the price line color if unspecified. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-7 "Direct link to Default Value") `''` * * * ### axisLabelTextColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabeltextcolor "Direct link to axisLabelTextColor") > **axisLabelTextColor**: `string` Text color for the axis label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#default-value-8 "Direct link to Default Value") `''` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#properties) * [id?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#id) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#price) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#color) * [lineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linewidth) * [lineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linestyle) * [lineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#linevisible) * [axisLabelVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabelvisible) * [title](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#title) * [axisLabelColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabelcolor) * [axisLabelTextColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions#axislabeltextcolor) --- # Interface: SolidColor | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a solid color. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------- ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#type "Direct link to type") > **type**: [`Solid`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#solid) Type of color. * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#color "Direct link to color") > **color**: `string` Color. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#type) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SolidColor#color) --- # Interface: IChartApi | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page The main interface of a single chart using time for horizontal scale. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#extends "Direct link to Extends") ---------------------------------------------------------------------------------------------------------------------------- * [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#methods "Direct link to Methods") ---------------------------------------------------------------------------------------------------------------------------- ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`TimeChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions) \> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns "Direct link to Returns") `void` #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#overrides "Direct link to Overrides") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#applyoptions) * * * ### remove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#remove "Direct link to remove()") > **remove**(): `void` Removes the chart object including all DOM elements. This is an irreversible operation, you cannot do anything with the chart after removing it. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-1 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`remove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#remove) * * * ### resize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#resize "Direct link to resize()") > **resize**(`width`, `height`, `forceRepaint`?): `void` Sets fixed size of the chart. By default chart takes up 100% of its container. If chart has the `autoSize` option enabled, and the ResizeObserver is available then the width and height values will be ignored. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-1 "Direct link to Parameters") • **width**: `number` Target width of the chart. • **height**: `number` Target height of the chart. • **forceRepaint?**: `boolean` True to initiate resize immediately. One could need this to get screenshot immediately after resize. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-2 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-1 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`resize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#resize) * * * ### addCustomSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addcustomseries "Direct link to addCustomSeries()") > **addCustomSeries**<`TData`, `TOptions`, `TPartialOptions`\>(`customPaneView`, `customOptions`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`"Custom"`, [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > , `TData` | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \>, `TOptions`, `TPartialOptions`\> Creates a custom series with specified parameters. A custom series is a generic series which can be extended with a custom renderer to implement chart types which the library doesn't support by default. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#type-parameters "Direct link to Type parameters") • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> • **TOptions** _extends_ [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) • **TPartialOptions** _extends_ [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> = [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-2 "Direct link to Parameters") • **customPaneView**: [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) , `TData`, `TOptions`\> A custom series pane view which implements the custom renderer. • **customOptions?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> Customization parameters of the series being created. const series = chart.addCustomSeries(myCustomPaneView); • **paneIndex?**: `number` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-3 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`"Custom"`, [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) , `TData` | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>, `TOptions`, `TPartialOptions`\> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-2 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`addCustomSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addcustomseries) * * * ### addSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addseries "Direct link to addSeries()") > **addSeries**<`T`\>(`definition`, `options`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`T`, [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > , [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) > \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) > \[`T`\]> Creates a series with specified parameters. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#type-parameters-1 "Direct link to Type parameters") • **T** _extends_ keyof [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-3 "Direct link to Parameters") • **definition**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) <`T`\> A series definition. • **options?**: [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\] Customization parameters of the series being created. • **paneIndex?**: `number` An index of the pane where the series should be created. const series = chart.addSeries(LineSeries, { lineWidth: 2 }); #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-4 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`T`, [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) , [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\]> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-3 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`addSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addseries) * * * ### removeSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#removeseries "Direct link to removeSeries()") > **removeSeries**(`seriesApi`): `void` Removes a series of any type. This is an irreversible operation, you cannot do anything with the series after removing it. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-4 "Direct link to Parameters") • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-5 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-4 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`removeSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removeseries) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example "Direct link to Example") chart.removeSeries(series); * * * ### subscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribeclick "Direct link to subscribeClick()") > **subscribeClick**(`handler`): `void` Subscribe to the chart click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-5 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Handler to be called on mouse click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-6 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-5 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`subscribeClick`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-1 "Direct link to Example") function myClickHandler(param) { if (!param.point) { return; } console.log(`Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeClick(myClickHandler); * * * ### unsubscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribeclick "Direct link to unsubscribeClick()") > **unsubscribeClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-6 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-7 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-6 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`unsubscribeClick`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribeclick) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-2 "Direct link to Example") chart.unsubscribeClick(myClickHandler); * * * ### subscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribedblclick "Direct link to subscribeDblClick()") > **subscribeDblClick**(`handler`): `void` Subscribe to the chart double-click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-7 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Handler to be called on mouse double-click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-8 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-7 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`subscribeDblClick`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-3 "Direct link to Example") function myDblClickHandler(param) { if (!param.point) { return; } console.log(`Double Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeDblClick(myDblClickHandler); * * * ### unsubscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribedblclick "Direct link to unsubscribeDblClick()") > **unsubscribeDblClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeDblClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-8 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-9 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-8 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`unsubscribeDblClick`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribedblclick) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-4 "Direct link to Example") chart.unsubscribeDblClick(myDblClickHandler); * * * ### subscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribecrosshairmove "Direct link to subscribeCrosshairMove()") > **subscribeCrosshairMove**(`handler`): `void` Subscribe to the crosshair move event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-9 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Handler to be called on crosshair move. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-10 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-9 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`subscribeCrosshairMove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-5 "Direct link to Example") function myCrosshairMoveHandler(param) { if (!param.point) { return; } console.log(`Crosshair moved to ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeCrosshairMove(myCrosshairMoveHandler); * * * ### unsubscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribecrosshairmove "Direct link to unsubscribeCrosshairMove()") > **unsubscribeCrosshairMove**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeCrosshairMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-10 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-11 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-10 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`unsubscribeCrosshairMove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribecrosshairmove) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#example-6 "Direct link to Example") chart.unsubscribeCrosshairMove(myCrosshairMoveHandler); * * * ### priceScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#pricescale "Direct link to priceScale()") > **priceScale**(`priceScaleId`, `paneIndex`?): [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Returns API to manipulate a price scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-11 "Direct link to Parameters") • **priceScaleId**: `string` ID of the price scale. • **paneIndex?**: `number` Index of the pane (default: 0) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-12 "Direct link to Returns") [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Price scale API. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-11 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`priceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#pricescale) * * * ### timeScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#timescale "Direct link to timeScale()") > **timeScale**(): [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \> Returns API to manipulate the time scale #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-13 "Direct link to Returns") [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Target API #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-12 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#timescale) * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#options "Direct link to options()") > **options**(): `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \>> Returns currently applied options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-14 "Direct link to Returns") `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>> Full set of currently applied options, including defaults #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-13 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`options`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#options) * * * ### takeScreenshot()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#takescreenshot "Direct link to takeScreenshot()") > **takeScreenshot**(`addTopLayer`?, `includeCrosshair`?): `HTMLCanvasElement` Make a screenshot of the chart with all the elements excluding crosshair. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-12 "Direct link to Parameters") • **addTopLayer?**: `boolean` if true, the top layer and primitives will be included in the screenshot (default: false) • **includeCrosshair?**: `boolean` works only if addTopLayer is enabled. If true, the crosshair will be included in the screenshot (default: false) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-15 "Direct link to Returns") `HTMLCanvasElement` A canvas with the chart drawn on. Any `Canvas` methods like `toDataURL()` or `toBlob()` can be used to serialize the result. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-14 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`takeScreenshot`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#takescreenshot) * * * ### addPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addpane "Direct link to addPane()") > **addPane**(`preserveEmptyPane`?): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \> Add a pane to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-13 "Direct link to Parameters") • **preserveEmptyPane?**: `boolean` Whether to preserve the empty pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-16 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> The pane API #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-15 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`addPane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addpane) * * * ### panes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#panes "Direct link to panes()") > **panes**(): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \>\[\] Returns array of panes' API #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-17 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>\[\] array of pane's Api #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-16 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`panes`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panes) * * * ### removePane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#removepane "Direct link to removePane()") > **removePane**(`index`): `void` Removes a pane with index #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-14 "Direct link to Parameters") • **index**: `number` the pane to be removed #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-18 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-17 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`removePane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removepane) * * * ### swapPanes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#swappanes "Direct link to swapPanes()") > **swapPanes**(`first`, `second`): `void` swap the position of two panes. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-15 "Direct link to Parameters") • **first**: `number` the first index • **second**: `number` the second index #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-19 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-18 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`swapPanes`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#swappanes) * * * ### autoSizeActive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#autosizeactive "Direct link to autoSizeActive()") > **autoSizeActive**(): `boolean` Returns the active state of the `autoSize` option. This can be used to check whether the chart is handling resizing automatically with a `ResizeObserver`. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-20 "Direct link to Returns") `boolean` Whether the `autoSize` option is enabled and the active. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-19 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`autoSizeActive`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#autosizeactive) * * * ### chartElement()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#chartelement "Direct link to chartElement()") > **chartElement**(): `HTMLDivElement` Returns the generated div element containing the chart. This can be used for adding your own additional event listeners, or for measuring the elements dimensions and position within the document. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-21 "Direct link to Returns") `HTMLDivElement` generated div element containing the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-20 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`chartElement`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#chartelement) * * * ### setCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#setcrosshairposition "Direct link to setCrosshairPosition()") > **setCrosshairPosition**(`price`, `horizontalPosition`, `seriesApi`): `void` Set the crosshair position within the chart. Usually the crosshair position is set automatically by the user's actions. However in some cases you may want to set it explicitly. For example if you want to synchronise the crosshairs of two separate charts. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-16 "Direct link to Parameters") • **price**: `number` The price (vertical coordinate) of the new crosshair position. • **horizontalPosition**: [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) The horizontal coordinate (time by default) of the new crosshair position. • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-22 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-21 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`setCrosshairPosition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#setcrosshairposition) * * * ### clearCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#clearcrosshairposition "Direct link to clearCrosshairPosition()") > **clearCrosshairPosition**(): `void` Clear the crosshair position within the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-23 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-22 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`clearCrosshairPosition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#clearcrosshairposition) * * * ### paneSize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#panesize "Direct link to paneSize()") > **paneSize**(`paneIndex`?): [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Returns the dimensions of the chart pane (the plot surface which excludes time and price scales). This would typically only be useful for plugin development. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#parameters-17 "Direct link to Parameters") • **paneIndex?**: `number` The index of the pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-24 "Direct link to Returns") [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Dimensions of the chart pane #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-23 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`paneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panesize) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#default-value "Direct link to Default Value") `0` * * * ### horzBehaviour()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#horzbehaviour "Direct link to horzBehaviour()") > **horzBehaviour**(): [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \> Returns the horizontal scale behaviour. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#returns-25 "Direct link to Returns") [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#inherited-from-24 "Direct link to Inherited from") [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) . [`horzBehaviour`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#horzbehaviour) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#extends) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#methods) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#applyoptions) * [remove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#remove) * [resize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#resize) * [addCustomSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addcustomseries) * [addSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addseries) * [removeSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#removeseries) * [subscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribeclick) * [unsubscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribeclick) * [subscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribedblclick) * [unsubscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribedblclick) * [subscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribecrosshairmove) * [unsubscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#unsubscribecrosshairmove) * [priceScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#pricescale) * [timeScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#timescale) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#options) * [takeScreenshot()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#takescreenshot) * [addPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addpane) * [panes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#panes) * [removePane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#removepane) * [swapPanes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#swappanes) * [autoSizeActive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#autosizeactive) * [chartElement()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#chartelement) * [setCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#setcrosshairposition) * [clearCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#clearcrosshairposition) * [paneSize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#panesize) * [horzBehaviour()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#horzbehaviour) --- # Interface: PriceChartOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Configuration options specific to price-based charts. Extends the base chart options and includes localization settings for price formatting. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#extends "Direct link to Extends") ------------------------------------------------------------------------------------------------------------------------------------ * [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`number`\> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#width "Direct link to width") > **width**: `number` Width of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#default-value "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`width`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#width) * * * ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#height "Direct link to height") > **height**: `number` Height of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#default-value-1 "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-1 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`height`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#height) * * * ### autoSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#autosize "Direct link to 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`](https://developer.mozilla.org/en-US/docs/Web/API/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-2 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`autoSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#autosize) * * * ### layout[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#layout "Direct link to layout") > **layout**: [`LayoutOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) Layout options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-3 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`layout`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#layout) * * * ### leftPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#leftpricescale "Direct link to leftPriceScale") > **leftPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Left price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-4 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#leftpricescale) * * * ### rightPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#rightpricescale "Direct link to rightPriceScale") > **rightPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Right price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-5 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#rightpricescale) * * * ### overlayPriceScales[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#overlaypricescales "Direct link to overlayPriceScales") > **overlayPriceScales**: [`OverlayPriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) Overlay price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-6 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overlaypricescales) * * * ### timeScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#timescale "Direct link to timeScale") > **timeScale**: [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) Time scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-7 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#timescale) * * * ### crosshair[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#crosshair "Direct link to crosshair") > **crosshair**: [`CrosshairOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) The crosshair shows the intersection of the price and time scale values at any point on the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-8 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`crosshair`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#crosshair) * * * ### grid[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#grid "Direct link to grid") > **grid**: [`GridOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-9 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`grid`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#grid) * * * ### handleScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#handlescroll "Direct link to handleScroll") > **handleScroll**: `boolean` | [`HandleScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) Scroll options, or a boolean flag that enables/disables scrolling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-10 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescroll) * * * ### handleScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#handlescale "Direct link to handleScale") > **handleScale**: `boolean` | [`HandleScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) Scale options, or a boolean flag that enables/disables scaling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-11 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescale) * * * ### kineticScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#kineticscroll "Direct link to kineticScroll") > **kineticScroll**: [`KineticScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) Kinetic scroll options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-12 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`kineticScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#kineticscroll) * * * ### trackingMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#trackingmode "Direct link to trackingMode") > **trackingMode**: [`TrackingModeOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-13 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`trackingMode`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#trackingmode) * * * ### addDefaultPane[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#adddefaultpane "Direct link to addDefaultPane") > **addDefaultPane**: `boolean` Whether to add a default pane to the chart Disable this option when you want to create a chart with no panes and add them manually #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#default-value-2 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#inherited-from-14 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`addDefaultPane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#adddefaultpane) * * * ### localization[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#localization "Direct link to localization") > **localization**: [`PriceChartLocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions) Localization options for formatting price values and other chart elements. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#overrides "Direct link to Overrides") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`localization`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#localization) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#extends) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#properties) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#width) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#height) * [autoSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#autosize) * [layout](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#layout) * [leftPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#leftpricescale) * [rightPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#rightpricescale) * [overlayPriceScales](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#overlaypricescales) * [timeScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#timescale) * [crosshair](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#crosshair) * [grid](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#grid) * [handleScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#handlescroll) * [handleScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#handlescale) * [kineticScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#kineticscroll) * [trackingMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#trackingmode) * [addDefaultPane](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#adddefaultpane) * [localization](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartOptions#localization) --- # Interface: SingleValueData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page A base interface for a data point of single-value series. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#extends "Direct link to Extends") ---------------------------------------------------------------------------------------------------------------------------------- * [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#extended-by "Direct link to Extended by") ---------------------------------------------------------------------------------------------------------------------------------------------- * [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) * [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) * [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) * [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#overrides "Direct link to Overrides") [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#time) * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value "Direct link to value") > **value**: `number` Price value of the data. * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#inherited-from "Direct link to Inherited from") [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) . [`customValues`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#customvalues) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#extends) * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#value) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData#customvalues) --- # Interface: PrimitiveHoveredItem | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Data representing the currently hovered object from the Hit test. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### cursorStyle?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#cursorstyle "Direct link to cursorStyle?") > `optional` **cursorStyle**: `string` CSS cursor style as defined here: [MDN: CSS Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) or `undefined` if you want the library to use the default cursor style instead. * * * ### externalId[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#externalid "Direct link to externalId") > **externalId**: `string` Hovered objects external ID. Can be used to identify the source item within a mouse subscriber event. * * * ### zOrder[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#zorder "Direct link to zOrder") > **zOrder**: [`PrimitivePaneViewZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PrimitivePaneViewZOrder) The zOrder of the hovered item. * * * ### isBackground?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#isbackground "Direct link to isBackground?") > `optional` **isBackground**: `boolean` Set to true if the object is rendered using `drawBackground` instead of `draw`. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#properties) * [cursorStyle?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#cursorstyle) * [externalId](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#externalid) * [zOrder](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#zorder) * [isBackground?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PrimitiveHoveredItem#isbackground) --- # Interface: SeriesPartialOptionsMap | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of partial options for each series type. For example a bar series has options represented by [BarSeriesPartialOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesPartialOptions) . Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#bar "Direct link to Bar") > **Bar**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of bar series partial options. * * * ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#candlestick "Direct link to Candlestick") > **Candlestick**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of candlestick series partial options. * * * ### Area[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#area "Direct link to Area") > **Area**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of area series partial options. * * * ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#baseline "Direct link to Baseline") > **Baseline**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of baseline series partial options. * * * ### Line[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#line "Direct link to Line") > **Line**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of line series partial options. * * * ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#histogram "Direct link to Histogram") > **Histogram**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of histogram series partial options. * * * ### Custom[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#custom "Direct link to Custom") > **Custom**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> The type of a custom series partial options. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#properties) * [Bar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#bar) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#candlestick) * [Area](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#area) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#baseline) * [Line](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#line) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#histogram) * [Custom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap#custom) --- # Interface: IPaneApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the interface for interacting with a pane in a lightweight chart. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#methods "Direct link to Methods") --------------------------------------------------------------------------------------------------------------------------- ### getHeight()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getheight "Direct link to getHeight()") > **getHeight**(): `number` Retrieves the height of the pane in pixels. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns "Direct link to Returns") `number` The height of the pane in pixels. * * * ### setHeight()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setheight "Direct link to setHeight()") > **setHeight**(`height`): `void` Sets the height of the pane. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters "Direct link to Parameters") • **height**: `number` The number of pixels to set as the height of the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-1 "Direct link to Returns") `void` * * * ### moveTo()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#moveto "Direct link to moveTo()") > **moveTo**(`paneIndex`): `void` Moves the pane to a new position. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-1 "Direct link to Parameters") • **paneIndex**: `number` The target index of the pane. Should be a number between 0 and the total number of panes - 1. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-2 "Direct link to Returns") `void` * * * ### paneIndex()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#paneindex "Direct link to paneIndex()") > **paneIndex**(): `number` Retrieves the index of the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-3 "Direct link to Returns") `number` The index of the pane. It is a number between 0 and the total number of panes - 1. * * * ### getSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getseries "Direct link to getSeries()") > **getSeries**(): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `HorzScaleItem`, [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>>\[\] Retrieves the array of series for the current pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-4 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>>\[\] An array of series. * * * ### getHTMLElement()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#gethtmlelement "Direct link to getHTMLElement()") > **getHTMLElement**(): `HTMLElement` Retrieves the HTML element of the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-5 "Direct link to Returns") `HTMLElement` The HTML element of the pane or null if pane wasn't created yet. * * * ### attachPrimitive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#attachprimitive "Direct link to attachPrimitive()") > **attachPrimitive**(`primitive`): `void` Attaches additional drawing primitive to the pane #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-2 "Direct link to Parameters") • **primitive**: [`IPanePrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive) <`HorzScaleItem`\> any implementation of IPanePrimitive interface #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-6 "Direct link to Returns") `void` * * * ### detachPrimitive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#detachprimitive "Direct link to detachPrimitive()") > **detachPrimitive**(`primitive`): `void` Detaches additional drawing primitive from the pane #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-3 "Direct link to Parameters") • **primitive**: [`IPanePrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/IPanePrimitive) <`HorzScaleItem`\> implementation of IPanePrimitive interface attached before Does nothing if specified primitive was not attached #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-7 "Direct link to Returns") `void` * * * ### priceScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#pricescale "Direct link to priceScale()") > **priceScale**(`priceScaleId`): [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Returns the price scale with the given id. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-4 "Direct link to Parameters") • **priceScaleId**: `string` ID of the price scale to find #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-8 "Direct link to Returns") [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) #### Throws[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#throws "Direct link to Throws") If the price scale with the given id is not found in this pane * * * ### setPreserveEmptyPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setpreserveemptypane "Direct link to setPreserveEmptyPane()") > **setPreserveEmptyPane**(`preserve`): `void` Sets whether to preserve the empty pane #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-5 "Direct link to Parameters") • **preserve**: `boolean` Whether to preserve the empty pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-9 "Direct link to Returns") `void` * * * ### preserveEmptyPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#preserveemptypane "Direct link to preserveEmptyPane()") > **preserveEmptyPane**(): `boolean` Returns whether to preserve the empty pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-10 "Direct link to Returns") `boolean` Whether to preserve the empty pane * * * ### getStretchFactor()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getstretchfactor "Direct link to getStretchFactor()") > **getStretchFactor**(): `number` Returns the stretch factor of the pane. Stretch factor determines the relative size of the pane compared to other panes. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-11 "Direct link to Returns") `number` The stretch factor of the pane. Default is 1 * * * ### setStretchFactor()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setstretchfactor "Direct link to setStretchFactor()") > **setStretchFactor**(`stretchFactor`): `void` Sets the stretch factor of the pane. When you creating a pane, the stretch factor is 1 by default. So if you have three panes, and you want to make the first pane twice as big as the second and third panes, you can set the stretch factor of the first pane to 2000. Example: const pane1 = chart.addPane();const pane2 = chart.addPane();const pane3 = chart.addPane();pane1.setStretchFactor(0.2);pane2.setStretchFactor(0.3);pane3.setStretchFactor(0.5);// Now the first pane will be 20% of the total height, the second pane will be 30% of the total height, and the third pane will be 50% of the total height.// Note: if you have one pane with default stretch factor of 1 and set other pane's stretch factor to 50,// library will try to make second pane 50 times smaller than the first pane #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-6 "Direct link to Parameters") • **stretchFactor**: `number` The stretch factor of the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-12 "Direct link to Returns") `void` * * * ### addCustomSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#addcustomseries "Direct link to addCustomSeries()") > **addCustomSeries**<`TData`, `TOptions`, `TPartialOptions`\>(`customPaneView`, `customOptions`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`"Custom"`, `HorzScaleItem`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | `TData`, `TOptions`, `TPartialOptions`\> Creates a custom series with specified parameters. A custom series is a generic series which can be extended with a custom renderer to implement chart types which the library doesn't support by default. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#type-parameters-1 "Direct link to Type parameters") • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> • **TOptions** _extends_ [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) • **TPartialOptions** _extends_ [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> = [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-7 "Direct link to Parameters") • **customPaneView**: [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) <`HorzScaleItem`, `TData`, `TOptions`\> A custom series pane view which implements the custom renderer. • **customOptions?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> Customization parameters of the series being created. const series = pane.addCustomSeries(myCustomPaneView); #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-13 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`"Custom"`, `HorzScaleItem`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | `TData`, `TOptions`, `TPartialOptions`\> * * * ### addSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#addseries "Direct link to addSeries()") > **addSeries**<`T`\>(`definition`, `options`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`T`, `HorzScaleItem`, [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) > <`HorzScaleItem`\>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) > \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) > \[`T`\]> Creates a series with specified parameters. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#type-parameters-2 "Direct link to Type parameters") • **T** _extends_ keyof [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#parameters-8 "Direct link to Parameters") • **definition**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) <`T`\> A series definition. • **options?**: [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\] Customization parameters of the series being created. const series = pane.addSeries(LineSeries, { lineWidth: 2 }); #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#returns-14 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`T`, `HorzScaleItem`, [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <`HorzScaleItem`\>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\]> * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#methods) * [getHeight()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getheight) * [setHeight()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setheight) * [moveTo()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#moveto) * [paneIndex()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#paneindex) * [getSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getseries) * [getHTMLElement()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#gethtmlelement) * [attachPrimitive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#attachprimitive) * [detachPrimitive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#detachprimitive) * [priceScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#pricescale) * [setPreserveEmptyPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setpreserveemptypane) * [preserveEmptyPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#preserveemptypane) * [getStretchFactor()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#getstretchfactor) * [setStretchFactor()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#setstretchfactor) * [addCustomSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#addcustomseries) * [addSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#addseries) --- # Interface: IChartApiBase\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page The main interface of a single chart. Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#extended-by "Direct link to Extended by") -------------------------------------------------------------------------------------------------------------------------------------------- * [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#methods "Direct link to Methods") -------------------------------------------------------------------------------------------------------------------------------- ### remove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#remove "Direct link to remove()") > **remove**(): `void` Removes the chart object including all DOM elements. This is an irreversible operation, you cannot do anything with the chart after removing it. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns "Direct link to Returns") `void` * * * ### resize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#resize "Direct link to resize()") > **resize**(`width`, `height`, `forceRepaint`?): `void` Sets fixed size of the chart. By default chart takes up 100% of its container. If chart has the `autoSize` option enabled, and the ResizeObserver is available then the width and height values will be ignored. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters "Direct link to Parameters") • **width**: `number` Target width of the chart. • **height**: `number` Target height of the chart. • **forceRepaint?**: `boolean` True to initiate resize immediately. One could need this to get screenshot immediately after resize. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-1 "Direct link to Returns") `void` * * * ### addCustomSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addcustomseries "Direct link to addCustomSeries()") > **addCustomSeries**<`TData`, `TOptions`, `TPartialOptions`\>(`customPaneView`, `customOptions`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`"Custom"`, `HorzScaleItem`, `TData` | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\>, `TOptions`, `TPartialOptions`\> Creates a custom series with specified parameters. A custom series is a generic series which can be extended with a custom renderer to implement chart types which the library doesn't support by default. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#type-parameters-1 "Direct link to Type parameters") • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> • **TOptions** _extends_ [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) • **TPartialOptions** _extends_ [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> = [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-1 "Direct link to Parameters") • **customPaneView**: [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) <`HorzScaleItem`, `TData`, `TOptions`\> A custom series pane view which implements the custom renderer. • **customOptions?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> Customization parameters of the series being created. const series = chart.addCustomSeries(myCustomPaneView); • **paneIndex?**: `number` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-2 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`"Custom"`, `HorzScaleItem`, `TData` | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\>, `TOptions`, `TPartialOptions`\> * * * ### addSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addseries "Direct link to addSeries()") > **addSeries**<`T`\>(`definition`, `options`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`T`, `HorzScaleItem`, [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) > <`HorzScaleItem`\>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) > \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) > \[`T`\]> Creates a series with specified parameters. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#type-parameters-2 "Direct link to Type parameters") • **T** _extends_ keyof [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-2 "Direct link to Parameters") • **definition**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) <`T`\> A series definition. • **options?**: [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\] Customization parameters of the series being created. • **paneIndex?**: `number` An index of the pane where the series should be created. const series = chart.addSeries(LineSeries, { lineWidth: 2 }); #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-3 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`T`, `HorzScaleItem`, [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <`HorzScaleItem`\>\[`T`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\]> * * * ### removeSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removeseries "Direct link to removeSeries()") > **removeSeries**(`seriesApi`): `void` Removes a series of any type. This is an irreversible operation, you cannot do anything with the series after removing it. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-3 "Direct link to Parameters") • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-4 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example "Direct link to Example") chart.removeSeries(series); * * * ### subscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick "Direct link to subscribeClick()") > **subscribeClick**(`handler`): `void` Subscribe to the chart click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-4 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Handler to be called on mouse click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-5 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-1 "Direct link to Example") function myClickHandler(param) { if (!param.point) { return; } console.log(`Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeClick(myClickHandler); * * * ### unsubscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribeclick "Direct link to unsubscribeClick()") > **unsubscribeClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-5 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-6 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-2 "Direct link to Example") chart.unsubscribeClick(myClickHandler); * * * ### subscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick "Direct link to subscribeDblClick()") > **subscribeDblClick**(`handler`): `void` Subscribe to the chart double-click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-6 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Handler to be called on mouse double-click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-7 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-3 "Direct link to Example") function myDblClickHandler(param) { if (!param.point) { return; } console.log(`Double Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeDblClick(myDblClickHandler); * * * ### unsubscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribedblclick "Direct link to unsubscribeDblClick()") > **unsubscribeDblClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeDblClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-7 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-8 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-4 "Direct link to Example") chart.unsubscribeDblClick(myDblClickHandler); * * * ### subscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove "Direct link to subscribeCrosshairMove()") > **subscribeCrosshairMove**(`handler`): `void` Subscribe to the crosshair move event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-8 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Handler to be called on crosshair move. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-9 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-5 "Direct link to Example") function myCrosshairMoveHandler(param) { if (!param.point) { return; } console.log(`Crosshair moved to ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeCrosshairMove(myCrosshairMoveHandler); * * * ### unsubscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribecrosshairmove "Direct link to unsubscribeCrosshairMove()") > **unsubscribeCrosshairMove**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeCrosshairMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-9 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`HorzScaleItem`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-10 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#example-6 "Direct link to Example") chart.unsubscribeCrosshairMove(myCrosshairMoveHandler); * * * ### priceScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#pricescale "Direct link to priceScale()") > **priceScale**(`priceScaleId`, `paneIndex`?): [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Returns API to manipulate a price scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-10 "Direct link to Parameters") • **priceScaleId**: `string` ID of the price scale. • **paneIndex?**: `number` Index of the pane (default: 0) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-11 "Direct link to Returns") [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Price scale API. * * * ### timeScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#timescale "Direct link to timeScale()") > **timeScale**(): [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) > <`HorzScaleItem`\> Returns API to manipulate the time scale #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-12 "Direct link to Returns") [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) <`HorzScaleItem`\> Target API * * * ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-11 "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`HorzScaleItem`\>> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-13 "Direct link to Returns") `void` * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#options "Direct link to options()") > **options**(): `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) > <`HorzScaleItem`\>> Returns currently applied options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-14 "Direct link to Returns") `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`HorzScaleItem`\>> Full set of currently applied options, including defaults * * * ### takeScreenshot()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#takescreenshot "Direct link to takeScreenshot()") > **takeScreenshot**(`addTopLayer`?, `includeCrosshair`?): `HTMLCanvasElement` Make a screenshot of the chart with all the elements excluding crosshair. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-12 "Direct link to Parameters") • **addTopLayer?**: `boolean` if true, the top layer and primitives will be included in the screenshot (default: false) • **includeCrosshair?**: `boolean` works only if addTopLayer is enabled. If true, the crosshair will be included in the screenshot (default: false) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-15 "Direct link to Returns") `HTMLCanvasElement` A canvas with the chart drawn on. Any `Canvas` methods like `toDataURL()` or `toBlob()` can be used to serialize the result. * * * ### addPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addpane "Direct link to addPane()") > **addPane**(`preserveEmptyPane`?): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`HorzScaleItem`\> Add a pane to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-13 "Direct link to Parameters") • **preserveEmptyPane?**: `boolean` Whether to preserve the empty pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-16 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`HorzScaleItem`\> The pane API * * * ### panes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panes "Direct link to panes()") > **panes**(): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`HorzScaleItem`\>\[\] Returns array of panes' API #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-17 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`HorzScaleItem`\>\[\] array of pane's Api * * * ### removePane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removepane "Direct link to removePane()") > **removePane**(`index`): `void` Removes a pane with index #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-14 "Direct link to Parameters") • **index**: `number` the pane to be removed #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-18 "Direct link to Returns") `void` * * * ### swapPanes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#swappanes "Direct link to swapPanes()") > **swapPanes**(`first`, `second`): `void` swap the position of two panes. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-15 "Direct link to Parameters") • **first**: `number` the first index • **second**: `number` the second index #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-19 "Direct link to Returns") `void` * * * ### autoSizeActive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#autosizeactive "Direct link to autoSizeActive()") > **autoSizeActive**(): `boolean` Returns the active state of the `autoSize` option. This can be used to check whether the chart is handling resizing automatically with a `ResizeObserver`. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-20 "Direct link to Returns") `boolean` Whether the `autoSize` option is enabled and the active. * * * ### chartElement()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#chartelement "Direct link to chartElement()") > **chartElement**(): `HTMLDivElement` Returns the generated div element containing the chart. This can be used for adding your own additional event listeners, or for measuring the elements dimensions and position within the document. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-21 "Direct link to Returns") `HTMLDivElement` generated div element containing the chart. * * * ### setCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#setcrosshairposition "Direct link to setCrosshairPosition()") > **setCrosshairPosition**(`price`, `horizontalPosition`, `seriesApi`): `void` Set the crosshair position within the chart. Usually the crosshair position is set automatically by the user's actions. However in some cases you may want to set it explicitly. For example if you want to synchronise the crosshairs of two separate charts. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-16 "Direct link to Parameters") • **price**: `number` The price (vertical coordinate) of the new crosshair position. • **horizontalPosition**: `HorzScaleItem` The horizontal coordinate (time by default) of the new crosshair position. • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-22 "Direct link to Returns") `void` * * * ### clearCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#clearcrosshairposition "Direct link to clearCrosshairPosition()") > **clearCrosshairPosition**(): `void` Clear the crosshair position within the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-23 "Direct link to Returns") `void` * * * ### paneSize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panesize "Direct link to paneSize()") > **paneSize**(`paneIndex`?): [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Returns the dimensions of the chart pane (the plot surface which excludes time and price scales). This would typically only be useful for plugin development. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#parameters-17 "Direct link to Parameters") • **paneIndex?**: `number` The index of the pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-24 "Direct link to Returns") [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Dimensions of the chart pane #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#default-value "Direct link to Default Value") `0` * * * ### horzBehaviour()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#horzbehaviour "Direct link to horzBehaviour()") > **horzBehaviour**(): [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) > <`HorzScaleItem`\> Returns the horizontal scale behaviour. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#returns-25 "Direct link to Returns") [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <`HorzScaleItem`\> * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#methods) * [remove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#remove) * [resize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#resize) * [addCustomSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addcustomseries) * [addSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addseries) * [removeSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removeseries) * [subscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick) * [unsubscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribeclick) * [subscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick) * [unsubscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribedblclick) * [subscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove) * [unsubscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#unsubscribecrosshairmove) * [priceScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#pricescale) * [timeScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#timescale) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#options) * [takeScreenshot()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#takescreenshot) * [addPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#addpane) * [panes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panes) * [removePane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#removepane) * [swapPanes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#swappanes) * [autoSizeActive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#autosizeactive) * [chartElement()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#chartelement) * [setCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#setcrosshairposition) * [clearCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#clearcrosshairposition) * [paneSize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#panesize) * [horzBehaviour()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#horzbehaviour) --- # Interface: ITimeScaleApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface to chart time scale Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#type-parameters "Direct link to Type parameters") -------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#methods "Direct link to Methods") -------------------------------------------------------------------------------------------------------------------------------- ### scrollPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrollposition "Direct link to scrollPosition()") > **scrollPosition**(): `number` Return the distance from the right edge of the time scale to the lastest bar of the series measured in bars. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns "Direct link to Returns") `number` * * * ### scrollToPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrolltoposition "Direct link to scrollToPosition()") > **scrollToPosition**(`position`, `animated`): `void` Scrolls the chart to the specified position. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters "Direct link to Parameters") • **position**: `number` Target data position • **animated**: `boolean` Setting this to true makes the chart scrolling smooth and adds animation #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-1 "Direct link to Returns") `void` * * * ### scrollToRealTime()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrolltorealtime "Direct link to scrollToRealTime()") > **scrollToRealTime**(): `void` Restores default scroll position of the chart. This process is always animated. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-2 "Direct link to Returns") `void` * * * ### getVisibleRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblerange "Direct link to getVisibleRange()") > **getVisibleRange**(): [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) > <`HorzScaleItem`\> Returns current visible time range of the chart. Note that this method cannot extrapolate time and will use the only currently existent data. To get complete information about current visible range, please use [getVisibleLogicalRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblelogicalrange) and [ISeriesApi.barsInLogicalRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#barsinlogicalrange) . #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-3 "Direct link to Returns") [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`HorzScaleItem`\> Visible range or null if the chart has no data at all. * * * ### setVisibleRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblerange "Direct link to setVisibleRange()") > **setVisibleRange**(`range`): `void` Sets visible range of data. Note that this method cannot extrapolate time and will use the only currently existent data. Thus, for example, if currently a chart doesn't have data prior `2018-01-01` date and you set visible range with `from` date `2016-01-01`, it will be automatically adjusted to `2018-01-01` (and the same for `to` date). But if you can approximate indexes on your own - you could use [setVisibleLogicalRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) instead. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-1 "Direct link to Parameters") • **range**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`HorzScaleItem`\> Target visible range of data. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-4 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example "Direct link to Example") chart.timeScale().setVisibleRange({ from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000, to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000,}); * * * ### getVisibleLogicalRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblelogicalrange "Direct link to getVisibleLogicalRange()") > **getVisibleLogicalRange**(): [`LogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange) Returns the current visible [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) of the chart as an object with the first and last time points of the logical range, or returns `null` if the chart has no data. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-5 "Direct link to Returns") [`LogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange) Visible range or null if the chart has no data at all. * * * ### setVisibleLogicalRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange "Direct link to setVisibleLogicalRange()") > **setVisibleLogicalRange**(`range`): `void` Sets visible [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) of data. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-2 "Direct link to Parameters") • **range**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`number`\> Target visible logical range of data. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-6 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example-1 "Direct link to Example") chart.timeScale().setVisibleLogicalRange({ from: 0, to: 10 }); * * * ### resetTimeScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#resettimescale "Direct link to resetTimeScale()") > **resetTimeScale**(): `void` Restores default zoom level and scroll position of the time scale. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-7 "Direct link to Returns") `void` * * * ### fitContent()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#fitcontent "Direct link to fitContent()") > **fitContent**(): `void` Automatically calculates the visible range to fit all data from all series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-8 "Direct link to Returns") `void` * * * ### logicalToCoordinate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#logicaltocoordinate "Direct link to logicalToCoordinate()") > **logicalToCoordinate**(`logical`): [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) Converts a logical index to local x coordinate. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-3 "Direct link to Parameters") • **logical**: [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) Logical index needs to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-9 "Direct link to Returns") [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) x coordinate of that time or `null` if the chart doesn't have data * * * ### coordinateToLogical()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#coordinatetological "Direct link to coordinateToLogical()") > **coordinateToLogical**(`x`): [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) Converts a coordinate to logical index. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-4 "Direct link to Parameters") • **x**: `number` Coordinate needs to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-10 "Direct link to Returns") [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) Logical index that is located on that coordinate or `null` if the chart doesn't have data * * * ### timeToIndex()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#timetoindex "Direct link to timeToIndex()") > **timeToIndex**(`time`, `findNearest`?): [`TimePointIndex`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimePointIndex) Converts a time to local x coordinate. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-5 "Direct link to Parameters") • **time**: `HorzScaleItem` Time needs to be converted • **findNearest?**: `boolean` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-11 "Direct link to Returns") [`TimePointIndex`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimePointIndex) X coordinate of that time or `null` if no time found on time scale * * * ### timeToCoordinate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#timetocoordinate "Direct link to timeToCoordinate()") > **timeToCoordinate**(`time`): [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) Converts a time to local x coordinate. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-6 "Direct link to Parameters") • **time**: `HorzScaleItem` Time needs to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-12 "Direct link to Returns") [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) X coordinate of that time or `null` if no time found on time scale * * * ### coordinateToTime()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#coordinatetotime "Direct link to coordinateToTime()") > **coordinateToTime**(`x`): `HorzScaleItem` Converts a coordinate to time. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-7 "Direct link to Parameters") • **x**: `number` Coordinate needs to be converted. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-13 "Direct link to Returns") `HorzScaleItem` Time of a bar that is located on that coordinate or `null` if there are no bars found on that coordinate. * * * ### width()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#width "Direct link to width()") > **width**(): `number` Returns a width of the time scale. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-14 "Direct link to Returns") `number` * * * ### height()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#height "Direct link to height()") > **height**(): `number` Returns a height of the time scale. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-15 "Direct link to Returns") `number` * * * ### subscribeVisibleTimeRangeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisibletimerangechange "Direct link to subscribeVisibleTimeRangeChange()") > **subscribeVisibleTimeRangeChange**(`handler`): `void` Subscribe to the visible time range change events. The argument passed to the handler function is an object with `from` and `to` properties of type [Time](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) , or `null` if there is no visible data. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-8 "Direct link to Parameters") • **handler**: [`TimeRangeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler) <`HorzScaleItem`\> Handler (function) to be called when the visible indexes change. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-16 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example-2 "Direct link to Example") function myVisibleTimeRangeChangeHandler(newVisibleTimeRange) { if (newVisibleTimeRange === null) { // handle null } // handle new logical range}chart.timeScale().subscribeVisibleTimeRangeChange(myVisibleTimeRangeChangeHandler); * * * ### unsubscribeVisibleTimeRangeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribevisibletimerangechange "Direct link to unsubscribeVisibleTimeRangeChange()") > **unsubscribeVisibleTimeRangeChange**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeVisibleTimeRangeChange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisibletimerangechange) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-9 "Direct link to Parameters") • **handler**: [`TimeRangeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeRangeChangeEventHandler) <`HorzScaleItem`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-17 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example-3 "Direct link to Example") chart.timeScale().unsubscribeVisibleTimeRangeChange(myVisibleTimeRangeChangeHandler); * * * ### subscribeVisibleLogicalRangeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange "Direct link to subscribeVisibleLogicalRangeChange()") > **subscribeVisibleLogicalRangeChange**(`handler`): `void` Subscribe to the visible logical range change events. The argument passed to the handler function is an object with `from` and `to` properties of type `number`, or `null` if there is no visible data. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-10 "Direct link to Parameters") • **handler**: [`LogicalRangeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler) Handler (function) to be called when the visible indexes change. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-18 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example-4 "Direct link to Example") function myVisibleLogicalRangeChangeHandler(newVisibleLogicalRange) { if (newVisibleLogicalRange === null) { // handle null } // handle new logical range}chart.timeScale().subscribeVisibleLogicalRangeChange(myVisibleLogicalRangeChangeHandler); * * * ### unsubscribeVisibleLogicalRangeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribevisiblelogicalrangechange "Direct link to unsubscribeVisibleLogicalRangeChange()") > **unsubscribeVisibleLogicalRangeChange**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeVisibleLogicalRangeChange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-11 "Direct link to Parameters") • **handler**: [`LogicalRangeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRangeChangeEventHandler) Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-19 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#example-5 "Direct link to Example") chart.timeScale().unsubscribeVisibleLogicalRangeChange(myVisibleLogicalRangeChangeHandler); * * * ### subscribeSizeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribesizechange "Direct link to subscribeSizeChange()") > **subscribeSizeChange**(`handler`): `void` Adds a subscription to time scale size changes #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-12 "Direct link to Parameters") • **handler**: [`SizeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler) Handler (function) to be called when the time scale size changes #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-20 "Direct link to Returns") `void` * * * ### unsubscribeSizeChange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribesizechange "Direct link to unsubscribeSizeChange()") > **unsubscribeSizeChange**(`handler`): `void` Removes a subscription to time scale size changes #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-13 "Direct link to Parameters") • **handler**: [`SizeChangeEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SizeChangeEventHandler) Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-21 "Direct link to Returns") `void` * * * ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the time scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#parameters-14 "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) \> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-22 "Direct link to Returns") `void` * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#options "Direct link to options()") > **options**(): `Readonly` <[`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) > \> Returns current options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#returns-23 "Direct link to Returns") `Readonly` <[`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) \> Currently applied options * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#methods) * [scrollPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrollposition) * [scrollToPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrolltoposition) * [scrollToRealTime()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#scrolltorealtime) * [getVisibleRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblerange) * [setVisibleRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblerange) * [getVisibleLogicalRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblelogicalrange) * [setVisibleLogicalRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) * [resetTimeScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#resettimescale) * [fitContent()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#fitcontent) * [logicalToCoordinate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#logicaltocoordinate) * [coordinateToLogical()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#coordinatetological) * [timeToIndex()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#timetoindex) * [timeToCoordinate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#timetocoordinate) * [coordinateToTime()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#coordinatetotime) * [width()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#width) * [height()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#height) * [subscribeVisibleTimeRangeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisibletimerangechange) * [unsubscribeVisibleTimeRangeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribevisibletimerangechange) * [subscribeVisibleLogicalRangeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) * [unsubscribeVisibleLogicalRangeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribevisiblelogicalrangechange) * [subscribeSizeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribesizechange) * [unsubscribeSizeChange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribesizechange) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#options) --- # Interface: ISeriesApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the interface for interacting with series. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------- • **TSeriesType** _extends_ [`SeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType) • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) • **TData** = [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <`HorzScaleItem`\>\[`TSeriesType`\] • **TOptions** = [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) \[`TSeriesType`\] • **TPartialOptions** = [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`TSeriesType`\] Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#methods "Direct link to Methods") ----------------------------------------------------------------------------------------------------------------------------- ### priceFormatter()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#priceformatter "Direct link to priceFormatter()") > **priceFormatter**(): [`IPriceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter) Returns current price formatter #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns "Direct link to Returns") [`IPriceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceFormatter) Interface to the price formatter object that can be used to format prices in the same way as the chart does * * * ### priceToCoordinate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricetocoordinate "Direct link to priceToCoordinate()") > **priceToCoordinate**(`price`): [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) Converts specified series price to pixel coordinate according to the series price scale #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters "Direct link to Parameters") • **price**: `number` Input price to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-1 "Direct link to Returns") [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) Pixel coordinate of the price level on the chart * * * ### coordinateToPrice()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#coordinatetoprice "Direct link to coordinateToPrice()") > **coordinateToPrice**(`coordinate`): [`BarPrice`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) Converts specified coordinate to price value according to the series price scale #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-1 "Direct link to Parameters") • **coordinate**: `number` Input coordinate to be converted #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-2 "Direct link to Returns") [`BarPrice`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarPrice) Price value of the coordinate on the chart * * * ### barsInLogicalRange()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#barsinlogicalrange "Direct link to barsInLogicalRange()") > **barsInLogicalRange**(`range`): [`BarsInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo) > <`HorzScaleItem`\> Returns bars information for the series in the provided [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) or `null`, if no series data has been found in the requested range. This method can be used, for instance, to implement downloading historical data while scrolling to prevent a user from seeing empty space. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-2 "Direct link to Parameters") • **range**: [`IRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IRange) <`number`\> The [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) to retrieve info for. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-3 "Direct link to Returns") [`BarsInfo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarsInfo) <`HorzScaleItem`\> The bars info for the given logical range. #### Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#examples "Direct link to Examples") const barsInfo = series.barsInLogicalRange(chart.timeScale().getVisibleLogicalRange());console.log(barsInfo); function onVisibleLogicalRangeChanged(newVisibleLogicalRange) { const barsInfo = series.barsInLogicalRange(newVisibleLogicalRange); // if there less than 50 bars to the left of the visible area if (barsInfo !== null && barsInfo.barsBefore < 50) { // try to load additional historical data and prepend it to the series data }}chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged); * * * ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the existing series You can set options initially when you create series or use the `applyOptions` method of the series to change the existing options. Note that you can only pass options you want to change. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-3 "Direct link to Parameters") • **options**: `TPartialOptions` Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-4 "Direct link to Returns") `void` * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#options "Direct link to options()") > **options**(): `Readonly`<`TOptions`\> Returns currently applied options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-5 "Direct link to Returns") `Readonly`<`TOptions`\> Full set of currently applied options, including defaults * * * ### priceScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricescale "Direct link to priceScale()") > **priceScale**(): [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Returns the API interface for controlling the price scale that this series is currently attached to. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-6 "Direct link to Returns") [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) IPriceScaleApi An interface for controlling the price scale (axis component) currently used by this series #### Remarks[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#remarks "Direct link to Remarks") Important: The returned PriceScaleApi is bound to the specific price scale (by ID and pane) that the series is using at the time this method is called. If you later move the series to a different pane or attach it to a different price scale (e.g., from 'right' to 'left'), the previously returned PriceScaleApi will NOT follow the series. It will continue to control the original price scale it was created for. To control the new price scale after moving a series, you must call this method again to get a fresh PriceScaleApi instance for the current price scale. * * * ### setData()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setdata "Direct link to setData()") > **setData**(`data`): `void` Sets or replaces series data. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-4 "Direct link to Parameters") • **data**: `TData`\[\] Ordered (earlier time point goes first) array of data items. Old data is fully replaced with the new one. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-7 "Direct link to Returns") `void` #### Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#examples-1 "Direct link to Examples") lineSeries.setData([ { time: '2018-12-12', value: 24.11 }, { time: '2018-12-13', value: 31.74 },]); barSeries.setData([ { time: '2018-12-19', open: 141.77, high: 170.39, low: 120.25, close: 145.72 }, { time: '2018-12-20', open: 145.72, high: 147.99, low: 100.11, close: 108.19 },]); * * * ### update()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#update "Direct link to update()") > **update**(`bar`, `historicalUpdate`?): `void` Adds new data item to the existing set (or updates the latest item if times of the passed/latest items are equal). #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-5 "Direct link to Parameters") • **bar**: `TData` A single data item to be added. Time of the new item must be greater or equal to the latest existing time point. If the new item's time is equal to the last existing item's time, then the existing item is replaced with the new one. • **historicalUpdate?**: `boolean` If true, allows updating an existing data point that is not the latest bar. Default is false. Updating older data using `historicalUpdate` will be slower than updating the most recent data point. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-8 "Direct link to Returns") `void` #### Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#examples-2 "Direct link to Examples") lineSeries.update({ time: '2018-12-12', value: 24.11,}); barSeries.update({ time: '2018-12-19', open: 141.77, high: 170.39, low: 120.25, close: 145.72,}); * * * ### pop()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pop "Direct link to pop()") > **pop**(`count`): `TData`\[\] Removes one or more data items from the end of the series. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-6 "Direct link to Parameters") • **count**: `number` The number of data items to remove. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-9 "Direct link to Returns") `TData`\[\] The removed data items. #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example "Direct link to Example") const removedData = lineSeries.pop(1);console.log(removedData); * * * ### dataByIndex()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#databyindex "Direct link to dataByIndex()") > **dataByIndex**(`logicalIndex`, `mismatchDirection`?): `TData` Returns a bar data by provided logical index. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-7 "Direct link to Parameters") • **logicalIndex**: `number` Logical index • **mismatchDirection?**: [`MismatchDirection`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MismatchDirection) Search direction if no data found at provided logical index. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-10 "Direct link to Returns") `TData` Original data item provided via setData or update methods. #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-1 "Direct link to Example") const originalData = series.dataByIndex(10, LightweightCharts.MismatchDirection.NearestLeft); * * * ### data()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#data "Direct link to data()") > **data**(): readonly `TData`\[\] Returns all the bar data for the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-11 "Direct link to Returns") readonly `TData`\[\] Original data items provided via setData or update methods. #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-2 "Direct link to Example") const originalData = series.data(); * * * ### subscribeDataChanged()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#subscribedatachanged "Direct link to subscribeDataChanged()") > **subscribeDataChanged**(`handler`): `void` Subscribe to the data changed event. This event is fired whenever the `update` or `setData` method is evoked on the series. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-8 "Direct link to Parameters") • **handler**: [`DataChangedHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler) Handler to be called on a data changed event. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-12 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-3 "Direct link to Example") function myHandler() { const data = series.data(); console.log(`The data has changed. New Data length: ${data.length}`);}series.subscribeDataChanged(myHandler); * * * ### unsubscribeDataChanged()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#unsubscribedatachanged "Direct link to unsubscribeDataChanged()") > **unsubscribeDataChanged**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeDataChanged](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#subscribedatachanged) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-9 "Direct link to Parameters") • **handler**: [`DataChangedHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DataChangedHandler) Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-13 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-4 "Direct link to Example") chart.unsubscribeDataChanged(myHandler); * * * ### createPriceLine()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#createpriceline "Direct link to createPriceLine()") > **createPriceLine**(`options`): [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) Creates a new price line #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-10 "Direct link to Parameters") • **options**: [`CreatePriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CreatePriceLineOptions) Any subset of options, however `price` is required. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-14 "Direct link to Returns") [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-5 "Direct link to Example") const priceLine = series.createPriceLine({ price: 80.0, color: 'green', lineWidth: 2, lineStyle: LightweightCharts.LineStyle.Dotted, axisLabelVisible: true, title: 'P/L 500',}); * * * ### removePriceLine()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#removepriceline "Direct link to removePriceLine()") > **removePriceLine**(`line`): `void` Removes the price line that was created before. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-11 "Direct link to Parameters") • **line**: [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) A line to remove. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-15 "Direct link to Returns") `void` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-6 "Direct link to Example") const priceLine = series.createPriceLine({ price: 80.0 });series.removePriceLine(priceLine); * * * ### priceLines()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricelines "Direct link to priceLines()") > **priceLines**(): [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) > \[\] Returns an array of price lines. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-16 "Direct link to Returns") [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) \[\] * * * ### seriesType()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#seriestype "Direct link to seriesType()") > **seriesType**(): `TSeriesType` Return current series type. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-17 "Direct link to Returns") `TSeriesType` Type of the series. #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-7 "Direct link to Example") const lineSeries = chart.addSeries(LineSeries);console.log(lineSeries.seriesType()); // "Line"const candlestickSeries = chart.addCandlestickSeries();console.log(candlestickSeries.seriesType()); // "Candlestick" * * * ### lastValueData()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#lastvaluedata "Direct link to lastValueData()") > **lastValueData**(`globalLast`): [`LastValueDataResult`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LastValueDataResult) Return the last value data of the series. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-12 "Direct link to Parameters") • **globalLast**: `boolean` If false, get the last value in the current visible range. Otherwise, fetch the absolute last value #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-18 "Direct link to Returns") [`LastValueDataResult`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LastValueDataResult) The last value data of the series. #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#example-8 "Direct link to Example") const lineSeries = chart.addSeries(LineSeries);console.log(lineSeries.lastValueData(true)); // { noData: false, price: 24.11, color: '#000000' }const candlestickSeries = chart.addCandlestickSeries();console.log(candlestickSeries.lastValueData(false)); // { noData: false, price: 145.72, color: '#000000' } * * * ### attachPrimitive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#attachprimitive "Direct link to attachPrimitive()") > **attachPrimitive**(`primitive`): `void` Attaches additional drawing primitive to the series #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-13 "Direct link to Parameters") • **primitive**: [`ISeriesPrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive) <`HorzScaleItem`\> any implementation of ISeriesPrimitive interface #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-19 "Direct link to Returns") `void` * * * ### detachPrimitive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#detachprimitive "Direct link to detachPrimitive()") > **detachPrimitive**(`primitive`): `void` Detaches additional drawing primitive from the series #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-14 "Direct link to Parameters") • **primitive**: [`ISeriesPrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/ISeriesPrimitive) <`HorzScaleItem`\> implementation of ISeriesPrimitive interface attached before Does nothing if specified primitive was not attached #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-20 "Direct link to Returns") `void` * * * ### moveToPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#movetopane "Direct link to moveToPane()") > **moveToPane**(`paneIndex`): `void` Move the series to another pane. If the pane with the specified index does not exist, the pane will be created. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-15 "Direct link to Parameters") • **paneIndex**: `number` The index of the pane. Should be a number between 0 and the total number of panes. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-21 "Direct link to Returns") `void` * * * ### seriesOrder()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#seriesorder "Direct link to seriesOrder()") > **seriesOrder**(): `number` Gets the zero-based index of this series within the list of all series on the current pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-22 "Direct link to Returns") `number` The current index of the series in the pane's series collection. * * * ### setSeriesOrder()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setseriesorder "Direct link to setSeriesOrder()") > **setSeriesOrder**(`order`): `void` Sets the zero-based index of this series within the pane's series collection, thereby adjusting its rendering order. Note: * The chart may automatically recalculate this index after operations such as removing other series or moving this series to a different pane. * If the provided index is less than 0, equal to, or greater than the number of series, it will be clamped to a valid range. * Price scales derive their formatters from the series with the lowest index; changing the order may affect the price scale's formatting #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#parameters-16 "Direct link to Parameters") • **order**: `number` The desired zero-based index to set for this series within the pane. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-23 "Direct link to Returns") `void` * * * ### getPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#getpane "Direct link to getPane()") > **getPane**(): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`HorzScaleItem`\> Returns the pane to which the series is currently attached. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#returns-24 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`HorzScaleItem`\> Pane API object to control the pane * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#type-parameters) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#methods) * [priceFormatter()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#priceformatter) * [priceToCoordinate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricetocoordinate) * [coordinateToPrice()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#coordinatetoprice) * [barsInLogicalRange()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#barsinlogicalrange) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#options) * [priceScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricescale) * [setData()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setdata) * [update()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#update) * [pop()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pop) * [dataByIndex()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#databyindex) * [data()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#data) * [subscribeDataChanged()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#subscribedatachanged) * [unsubscribeDataChanged()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#unsubscribedatachanged) * [createPriceLine()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#createpriceline) * [removePriceLine()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#removepriceline) * [priceLines()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricelines) * [seriesType()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#seriestype) * [lastValueData()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#lastvaluedata) * [attachPrimitive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#attachprimitive) * [detachPrimitive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#detachprimitive) * [moveToPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#movetopane) * [seriesOrder()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#seriesorder) * [setSeriesOrder()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setseriesorder) * [getPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#getpane) --- # Interface: SeriesAttachedParameter\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Object containing references to the chart and series instances, and a requestUpdate method for triggering a refresh of the chart. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) • **TSeriesType** _extends_ [`SeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType) = keyof [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### chart[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#chart "Direct link to chart") > **chart**: [`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) > <`HorzScaleItem`\> Chart instance. * * * ### series[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#series "Direct link to series") > **series**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`TSeriesType`, `HorzScaleItem`, [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) > <`HorzScaleItem`\>\[`TSeriesType`\], [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) > \[`TSeriesType`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) > \[`TSeriesType`\]> Series to which the Primitive is attached. * * * ### requestUpdate()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#requestupdate "Direct link to requestUpdate()") > **requestUpdate**: () => `void` Request an update (redraw the chart) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#returns "Direct link to Returns") `void` * * * ### horzScaleBehavior[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#horzscalebehavior "Direct link to horzScaleBehavior") > **horzScaleBehavior**: [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) > <`HorzScaleItem`\> Horizontal Scale Behaviour for the chart. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#properties) * [chart](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#chart) * [series](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#series) * [requestUpdate()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#requestupdate) * [horzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesAttachedParameter#horzscalebehavior) --- # Interface: ISeriesPrimitiveWrapper\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface for a series primitive. Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#extended-by "Direct link to Extended by") ------------------------------------------------------------------------------------------------------------------------------------------------------ * [`ISeriesMarkersPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi) * [`ISeriesUpDownMarkerPluginApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ • **T** • **Options** = `unknown` Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### detach()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#detach "Direct link to detach()") > **detach**: () => `void` Detaches the plugin from the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#returns "Direct link to Returns") `void` * * * ### getSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#getseries "Direct link to getSeries()") > **getSeries**: () => [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `T`, [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`T`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`T`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`T`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`T`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`T`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`T`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`T`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`T`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`T`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>> Returns the current series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#returns-1 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`T`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`T`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`T`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`T`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`T`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`T`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`T`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`T`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> * * * ### applyOptions()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#applyoptions "Direct link to applyOptions()?") > `optional` **applyOptions**: (`options`) => `void` Applies options to the primitive. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#parameters "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`Options`\> Options to apply. The options are deeply merged with the current options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#returns-2 "Direct link to Returns") `void` * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#properties) * [detach()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#detach) * [getSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#getseries) * [applyOptions()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#applyoptions) --- # Interface: VerticalGradientColor | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a vertical gradient of two colors. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#type "Direct link to type") > **type**: [`VerticalGradient`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/ColorType#verticalgradient) Type of color. * * * ### topColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#topcolor "Direct link to topColor") > **topColor**: `string` Top color * * * ### bottomColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#bottomcolor "Direct link to bottomColor") > **bottomColor**: `string` Bottom color * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#type) * [topColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#topcolor) * [bottomColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/VerticalGradientColor#bottomcolor) --- # Interface: MouseEventParams\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a mouse event. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### time?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#time "Direct link to time?") > `optional` **time**: `HorzScaleItem` Time of the data at the location of the mouse event. The value will be `undefined` if the location of the event in the chart is outside the range of available data. * * * ### logical?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#logical "Direct link to logical?") > `optional` **logical**: [`Logical`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) Logical index * * * ### point?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#point "Direct link to point?") > `optional` **point**: [`Point`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/Point) Location of the event in the chart. The value will be `undefined` if the event is fired outside the chart, for example a mouse leave event. * * * ### paneIndex?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#paneindex "Direct link to paneIndex?") > `optional` **paneIndex**: `number` The index of the Pane * * * ### seriesData[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#seriesdata "Direct link to seriesData") > **seriesData**: `Map` <[`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `HorzScaleItem`, [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>>, [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\>> Data of all series at the location of the event in the chart. Keys of the map are [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) instances. Values are prices. Values of the map are original data items * * * ### hoveredSeries?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#hoveredseries "Direct link to hoveredSeries?") > `optional` **hoveredSeries**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `HorzScaleItem`, [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>> The [ISeriesApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) for the series at the point of the mouse event. * * * ### hoveredObjectId?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#hoveredobjectid "Direct link to hoveredObjectId?") > `optional` **hoveredObjectId**: `unknown` The ID of the object at the point of the mouse event. * * * ### sourceEvent?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#sourceevent "Direct link to sourceEvent?") > `optional` **sourceEvent**: [`TouchMouseEventData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData) The underlying source mouse or touch event data, if available * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#properties) * [time?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#time) * [logical?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#logical) * [point?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#point) * [paneIndex?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#paneindex) * [seriesData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#seriesdata) * [hoveredSeries?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#hoveredseries) * [hoveredObjectId?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#hoveredobjectid) * [sourceEvent?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/MouseEventParams#sourceevent) --- # Interface: TrackingModeOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page 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. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------------- ### exitMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#exitmode "Direct link to exitMode") > **exitMode**: [`TrackingModeExitMode`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/TrackingModeExitMode) Determine how to exit the tracking mode. By default, mobile users will long press to deactivate the scroll and have the ability to check values and dates. Another press is required to activate the scroll, be able to move left/right, zoom, etc. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#default-value "Direct link to Default Value") {@link TrackingModeExitMode.OnNextTap} * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#properties) * [exitMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TrackingModeOptions#exitmode) --- # Interface: ISeriesMarkersPluginApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Interface for a series markers plugin Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#extends "Direct link to Extends") ------------------------------------------------------------------------------------------------------------------------------------------ * [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------------ • **HorzScaleItem** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------- ### setMarkers()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#setmarkers "Direct link to setMarkers()") > **setMarkers**: (`markers`) => `void` Set markers to the series. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#parameters "Direct link to Parameters") • **markers**: [`SeriesMarker`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker) <`HorzScaleItem`\>\[\] An array of markers to be displayed on the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#returns "Direct link to Returns") `void` * * * ### markers()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#markers "Direct link to markers()") > **markers**: () => readonly [`SeriesMarker`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker) > <`HorzScaleItem`\>\[\] Returns current markers. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#returns-1 "Direct link to Returns") readonly [`SeriesMarker`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarker) <`HorzScaleItem`\>\[\] * * * ### detach()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#detach "Direct link to detach()") > **detach**: () => `void` Detaches the plugin from the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#returns-2 "Direct link to Returns") `void` #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#overrides "Direct link to Overrides") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`detach`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#detach) * * * ### getSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#getseries "Direct link to getSeries()") > **getSeries**: () => [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `HorzScaleItem`, [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>> Returns the current series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#returns-3 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#inherited-from "Direct link to Inherited from") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`getSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#getseries) * * * ### applyOptions()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#applyoptions "Direct link to applyOptions()?") > `optional` **applyOptions**: (`options`) => `void` Applies options to the primitive. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#parameters-1 "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`unknown`\> Options to apply. The options are deeply merged with the current options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#returns-4 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#inherited-from-1 "Direct link to Inherited from") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#applyoptions) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#properties) * [setMarkers()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#setmarkers) * [markers()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#markers) * [detach()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#detach) * [getSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#getseries) * [applyOptions()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesMarkersPluginApi#applyoptions) --- # Interface: PriceChartLocalizationOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Extends LocalizationOptions for price-based charts. Includes settings specific to formatting price values on the horizontal scale. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#extends "Direct link to Extends") ------------------------------------------------------------------------------------------------------------------------------------------------ * [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) <[`HorzScalePriceItem`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzScalePriceItem) \> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------------------- ### timeFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#timeformatter "Direct link to timeFormatter?") > `optional` **timeFormatter**: [`TimeFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimeFormatterFn) > <`number`\> Override formatting of the time scale crosshair label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`timeFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#timeformatter) * * * ### dateFormat[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#dateformat "Direct link to dateFormat") > **dateFormat**: `string` Date formatting string. Can contain `yyyy`, `yy`, `MMMM`, `MMM`, `MM` and `dd` literals which will be replaced with corresponding date's value. Ignored if [timeFormatter](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#timeformatter) has been specified. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-1 "Direct link to Default Value") `'dd MMM \'yy'` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-1 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`dateFormat`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#dateformat) * * * ### locale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#locale "Direct link to locale") > **locale**: `string` Current locale used to format dates. Uses the browser's language settings by default. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#see "Direct link to See") [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl#Locale\_identification\_and\_negotiation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-2 "Direct link to Default Value") `navigator.language` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-2 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`locale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#locale) * * * ### priceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#priceformatter "Direct link to priceFormatter?") > `optional` **priceFormatter**: [`PriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormatterFn) Override formatting of the price scale tick marks, labels and crosshair labels. Can be used for cases that can't be covered with built-in price formats. #### See[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#see-1 "Direct link to See") [PriceFormatCustom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatCustom) #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-3 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-3 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`priceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#priceformatter) * * * ### tickmarksPriceFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#tickmarkspriceformatter "Direct link to tickmarksPriceFormatter?") > `optional` **tickmarksPriceFormatter**: [`TickmarksPriceFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPriceFormatterFn) Overrides the formatting of price scale tick marks. Use this to define formatting rules based on all provided price values. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-4 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-4 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`tickmarksPriceFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspriceformatter) * * * ### percentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#percentageformatter "Direct link to percentageFormatter?") > `optional` **percentageFormatter**: [`PercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PercentageFormatterFn) Overrides the formatting of percentage scale tick marks. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-5 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-5 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`percentageFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#percentageformatter) * * * ### tickmarksPercentageFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#tickmarkspercentageformatter "Direct link to tickmarksPercentageFormatter?") > `optional` **tickmarksPercentageFormatter**: [`TickmarksPercentageFormatterFn`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickmarksPercentageFormatterFn) Override formatting of the percentage scale tick marks. Can be used if formatting should be adjusted based on all the values being formatted #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#default-value-6 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#inherited-from-6 "Direct link to Inherited from") [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) . [`tickmarksPercentageFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#tickmarkspercentageformatter) * * * ### precision[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#precision "Direct link to precision") > **precision**: `number` The number of decimal places to display for price values on the horizontal scale. * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#extends) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#properties) * [timeFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#timeformatter) * [dateFormat](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#dateformat) * [locale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#locale) * [priceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#priceformatter) * [tickmarksPriceFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#tickmarkspriceformatter) * [percentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#percentageformatter) * [tickmarksPercentageFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#tickmarkspercentageformatter) * [precision](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceChartLocalizationOptions#precision) --- # Interface: SeriesDefinition\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Series definition interface. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** _extends_ [`SeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesType) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### type[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#type "Direct link to type") > `readonly` **type**: `T` Series type. * * * ### isBuiltIn[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#isbuiltin "Direct link to isBuiltIn") > `readonly` **isBuiltIn**: `boolean` Indicates if the series is built-in. * * * ### defaultOptions[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#defaultoptions "Direct link to defaultOptions") > `readonly` **defaultOptions**: [`SeriesStyleOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap) > \[`T`\] Default series options. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#properties) * [type](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#type) * [isBuiltIn](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#isbuiltin) * [defaultOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition#defaultoptions) --- # Interface: SeriesStyleOptionsMap | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of style options for each series type. For example a bar series has style options represented by [BarStyleOptions](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) . Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------- ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#bar "Direct link to Bar") > **Bar**: [`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) The type of bar style options. * * * ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#candlestick "Direct link to Candlestick") > **Candlestick**: [`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) The type of candlestick style options. * * * ### Area[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#area "Direct link to Area") > **Area**: [`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) The type of area style options. * * * ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#baseline "Direct link to Baseline") > **Baseline**: [`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) The type of baseline style options. * * * ### Line[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#line "Direct link to Line") > **Line**: [`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) The type of line style options. * * * ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#histogram "Direct link to Histogram") > **Histogram**: [`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) The type of histogram style options. * * * ### Custom[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#custom "Direct link to Custom") > **Custom**: [`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) The type of a custom series' style options. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#properties) * [Bar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#bar) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#candlestick) * [Area](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#area) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#baseline) * [Line](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#line) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#histogram) * [Custom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap#custom) --- # Interface: WhitespaceData\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a whitespace data item, which is a data point without a value. Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#example "Direct link to Example") --------------------------------------------------------------------------------------------------------------------------------- const data = [ { time: '2018-12-03', value: 27.02 }, { time: '2018-12-04' }, // whitespace { time: '2018-12-05' }, // whitespace { time: '2018-12-06' }, // whitespace { time: '2018-12-07' }, // whitespace { time: '2018-12-08', value: 23.92 }, { time: '2018-12-13', value: 30.74 },]; Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#extended-by "Direct link to Extended by") --------------------------------------------------------------------------------------------------------------------------------------------- * [`OhlcData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/OhlcData) * [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#type-parameters "Direct link to Type parameters") --------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------ ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#time "Direct link to time") > **time**: `HorzScaleItem` The time of the data. * * * ### customValues?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#customvalues "Direct link to customValues?") > `optional` **customValues**: `Record`<`string`, `unknown`\> Additional custom values which will be ignored by the library, but could be used by plugins. * [Example](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#example) * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#time) * [customValues?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData#customvalues) --- # Interface: TouchMouseEventData | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#__docusaurus_skipToContent_fallback) Version: 5.1 On this page The TouchMouseEventData interface represents events that occur due to the user interacting with a pointing device (such as a mouse). See [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------------- ### clientX[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#clientx "Direct link to clientX") > `readonly` **clientX**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The X coordinate of the mouse pointer in local (DOM content) coordinates. * * * ### clientY[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#clienty "Direct link to clientY") > `readonly` **clientY**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The Y coordinate of the mouse pointer in local (DOM content) coordinates. * * * ### pageX[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#pagex "Direct link to pageX") > `readonly` **pageX**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The X coordinate of the mouse pointer relative to the whole document. * * * ### pageY[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#pagey "Direct link to pageY") > `readonly` **pageY**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The Y coordinate of the mouse pointer relative to the whole document. * * * ### screenX[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#screenx "Direct link to screenX") > `readonly` **screenX**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The X coordinate of the mouse pointer in global (screen) coordinates. * * * ### screenY[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#screeny "Direct link to screenY") > `readonly` **screenY**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The Y coordinate of the mouse pointer in global (screen) coordinates. * * * ### localX[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#localx "Direct link to localX") > `readonly` **localX**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The X coordinate of the mouse pointer relative to the chart / price axis / time axis canvas element. * * * ### localY[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#localy "Direct link to localY") > `readonly` **localY**: [`Coordinate`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Coordinate) The Y coordinate of the mouse pointer relative to the chart / price axis / time axis canvas element. * * * ### ctrlKey[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#ctrlkey "Direct link to ctrlKey") > `readonly` **ctrlKey**: `boolean` Returns a boolean value that is true if the Ctrl key was active when the key event was generated. * * * ### altKey[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#altkey "Direct link to altKey") > `readonly` **altKey**: `boolean` Returns a boolean value that is true if the Alt (Option or ⌥ on macOS) key was active when the key event was generated. * * * ### shiftKey[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#shiftkey "Direct link to shiftKey") > `readonly` **shiftKey**: `boolean` Returns a boolean value that is true if the Shift key was active when the key event was generated. * * * ### metaKey[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#metakey "Direct link to metaKey") > `readonly` **metaKey**: `boolean` Returns a boolean value that is true if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#properties) * [clientX](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#clientx) * [clientY](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#clienty) * [pageX](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#pagex) * [pageY](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#pagey) * [screenX](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#screenx) * [screenY](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#screeny) * [localX](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#localx) * [localY](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#localy) * [ctrlKey](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#ctrlkey) * [altKey](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#altkey) * [shiftKey](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#shiftkey) * [metaKey](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TouchMouseEventData#metakey) --- # Interface: SeriesMarkersOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Configuration options for the series markers plugin. These options affect all markers managed by the plugin. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### autoScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#autoscale "Direct link to autoScale") > **autoScale**: `boolean` Specifies whether the auto-scaling calculation should expand to include the size of markers. When `true`, the auto-scale feature will adjust the price scale's range to ensure series markers are fully visible and not cropped by the chart's edges. When `false`, the scale will only fit the series data points, which may cause markers to be partially hidden. Note: This option only has an effect when auto-scaling is enabled for the price scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#default-value "Direct link to Default Value") `true` * * * ### zOrder[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#zorder "Direct link to zOrder") > **zOrder**: [`SeriesMarkerZOrder`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerZOrder) Defines the stacking order of the markers relative to the series and other primitives. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#default-value-1 "Direct link to Default Value") `normal` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#properties) * [autoScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#autoscale) * [zOrder](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkersOptions#zorder) --- # Interface: TimeMark | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a tick mark on the horizontal (time) scale. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### needAlignCoordinate[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#needaligncoordinate "Direct link to needAlignCoordinate") > **needAlignCoordinate**: `boolean` Does time mark need to be aligned * * * ### coord[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#coord "Direct link to coord") > **coord**: `number` Coordinate for the time mark * * * ### label[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#label "Direct link to label") > **label**: `string` Display label for the time mark * * * ### weight[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#weight "Direct link to weight") > **weight**: [`TickMarkWeightValue`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) Weight of the time mark * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#properties) * [needAlignCoordinate](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#needaligncoordinate) * [coord](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#coord) * [label](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#label) * [weight](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeMark#weight) --- # Interface: TimeScaleOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Extended time scale options for time-based horizontal scale Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------------- * [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### rightOffset[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightoffset "Direct link to rightOffset") > **rightOffset**: `number` The margin space in bars from the right side of the chart. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value "Direct link to Default Value") `0` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`rightOffset`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffset) * * * ### rightOffsetPixels?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightoffsetpixels "Direct link to rightOffsetPixels?") > `optional` **rightOffsetPixels**: `number` The margin space in pixels from the right side of the chart. This option has priority over `rightOffset`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-1 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-1 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`rightOffsetPixels`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightoffsetpixels) * * * ### barSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#barspacing "Direct link to barSpacing") > **barSpacing**: `number` The space between bars in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-2 "Direct link to Default Value") `6` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-2 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`barSpacing`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#barspacing) * * * ### minBarSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minbarspacing "Direct link to minBarSpacing") > **minBarSpacing**: `number` The minimum space between bars in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-3 "Direct link to Default Value") `0.5` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-3 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`minBarSpacing`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minbarspacing) * * * ### maxBarSpacing[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#maxbarspacing "Direct link to maxBarSpacing") > **maxBarSpacing**: `number` The maximum space between bars in pixels. Has no effect if value is set to `0`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-4 "Direct link to Default Value") `0` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-4 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`maxBarSpacing`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#maxbarspacing) * * * ### fixLeftEdge[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#fixleftedge "Direct link to fixLeftEdge") > **fixLeftEdge**: `boolean` Prevent scrolling to the left of the first bar. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-5 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-5 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`fixLeftEdge`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixleftedge) * * * ### fixRightEdge[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#fixrightedge "Direct link to fixRightEdge") > **fixRightEdge**: `boolean` Prevent scrolling to the right of the most recent bar. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-6 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-6 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`fixRightEdge`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#fixrightedge) * * * ### lockVisibleTimeRangeOnResize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#lockvisibletimerangeonresize "Direct link to lockVisibleTimeRangeOnResize") > **lockVisibleTimeRangeOnResize**: `boolean` Prevent changing the visible time range during chart resizing. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-7 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-7 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`lockVisibleTimeRangeOnResize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#lockvisibletimerangeonresize) * * * ### rightBarStaysOnScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightbarstaysonscroll "Direct link to rightBarStaysOnScroll") > **rightBarStaysOnScroll**: `boolean` Prevent the hovered bar from moving when scrolling. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-8 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-8 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`rightBarStaysOnScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#rightbarstaysonscroll) * * * ### borderVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#bordervisible "Direct link to borderVisible") > **borderVisible**: `boolean` Show the time scale border. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-9 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-9 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`borderVisible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordervisible) * * * ### borderColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#bordercolor "Direct link to borderColor") > **borderColor**: `string` The time scale border color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-10 "Direct link to Default Value") `'#2B2B43'` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-10 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`borderColor`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#bordercolor) * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#visible "Direct link to visible") > **visible**: `boolean` Show the time scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-11 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-11 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`visible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#visible) * * * ### timeVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#timevisible "Direct link to timeVisible") > **timeVisible**: `boolean` Show the time, not just the date, in the time scale and vertical crosshair label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-12 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-12 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`timeVisible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#timevisible) * * * ### secondsVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#secondsvisible "Direct link to secondsVisible") > **secondsVisible**: `boolean` Show seconds in the time scale and vertical crosshair label in `hh:mm:ss` format for intraday data. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-13 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-13 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`secondsVisible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#secondsvisible) * * * ### shiftVisibleRangeOnNewBar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#shiftvisiblerangeonnewbar "Direct link to shiftVisibleRangeOnNewBar") > **shiftVisibleRangeOnNewBar**: `boolean` Shift the visible range to the right (into the future) by the number of new bars when new data is added. Note that this only applies when the last bar is visible. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-14 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-14 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`shiftVisibleRangeOnNewBar`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#shiftvisiblerangeonnewbar) * * * ### allowShiftVisibleRangeOnWhitespaceReplacement[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#allowshiftvisiblerangeonwhitespacereplacement "Direct link to allowShiftVisibleRangeOnWhitespaceReplacement") > **allowShiftVisibleRangeOnWhitespaceReplacement**: `boolean` Allow the visible range to be shifted to the right when a new bar is added which is replacing an existing whitespace time point on the chart. Note that this only applies when the last bar is visible & `shiftVisibleRangeOnNewBar` is enabled. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-15 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-15 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`allowShiftVisibleRangeOnWhitespaceReplacement`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowshiftvisiblerangeonwhitespacereplacement) * * * ### ticksVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#ticksvisible "Direct link to ticksVisible") > **ticksVisible**: `boolean` Draw small vertical line on time axis labels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-16 "Direct link to Default Value") `false` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-16 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`ticksVisible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ticksvisible) * * * ### tickMarkMaxCharacterLength?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#tickmarkmaxcharacterlength "Direct link to tickMarkMaxCharacterLength?") > `optional` **tickMarkMaxCharacterLength**: `number` Maximum tick mark label length. Used to override the default 8 character maximum length. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-17 "Direct link to Default Value") `undefined` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-17 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`tickMarkMaxCharacterLength`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#tickmarkmaxcharacterlength) * * * ### uniformDistribution[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#uniformdistribution "Direct link to uniformDistribution") > **uniformDistribution**: `boolean` Changes horizontal scale marks generation. With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-18 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`uniformDistribution`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#uniformdistribution) * * * ### minimumHeight[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minimumheight "Direct link to minimumHeight") > **minimumHeight**: `number` Define a minimum height for the time scale. Note: This value will be exceeded if the time scale needs more space to display it's contents. Setting a minimum height could be useful for ensuring that multiple charts positioned in a horizontal stack each have an identical time scale height, or for plugins which require a bit more space within the time scale pane. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-18 "Direct link to Default Value") 0 #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-19 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`minimumHeight`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#minimumheight) * * * ### allowBoldLabels[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#allowboldlabels "Direct link to allowBoldLabels") > **allowBoldLabels**: `boolean` Allow major time scale labels to be rendered in a bolder font weight. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-19 "Direct link to Default Value") true #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-20 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`allowBoldLabels`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#allowboldlabels) * * * ### ignoreWhitespaceIndices[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#ignorewhitespaceindices "Direct link to ignoreWhitespaceIndices") > **ignoreWhitespaceIndices**: `boolean` Ignore time scale points containing only whitespace (for all series) when drawing grid lines, tick marks, and snapping the crosshair to time scale points. For the yield curve chart type it defaults to `true`. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-20 "Direct link to Default Value") false #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-21 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`ignoreWhitespaceIndices`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#ignorewhitespaceindices) * * * ### enableConflation[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#enableconflation "Direct link to enableConflation") > **enableConflation**: `boolean` Enable data conflation for performance optimization when bar spacing is very small. When enabled, multiple data points are automatically combined into single points when they would be rendered in less than 0.5 pixels of screen space. This significantly improves rendering performance for large datasets when zoomed out. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-21 "Direct link to Default Value") false #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-22 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`enableConflation`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#enableconflation) * * * ### conflationThresholdFactor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#conflationthresholdfactor "Direct link to conflationThresholdFactor?") > `optional` **conflationThresholdFactor**: `number` Smoothing factor for conflation thresholds. Controls how aggressively conflation is applied. This can be used to create smoother-looking charts, especially useful for sparklines and small charts. * 1.0 = conflate only when display can't show detail (default, performance-focused) * 2.0 = conflate at 2x the display threshold (moderate smoothing) * 4.0 = conflate at 4x the display threshold (strong smoothing) * 8.0+ = very aggressive smoothing for very small charts Higher values result in fewer data points being displayed, creating smoother but less detailed charts. This is particularly useful for sparklines and small charts where smooth appearance is prioritized over showing every data point. Note: Should be used with continuous series types (line, area, baseline) for best visual results. Candlestick and bar series may look less natural with high smoothing factors. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-22 "Direct link to Default Value") 1.0 #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-23 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`conflationThresholdFactor`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#conflationthresholdfactor) * * * ### precomputeConflationOnInit[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#precomputeconflationoninit "Direct link to precomputeConflationOnInit") > **precomputeConflationOnInit**: `boolean` Precompute conflation chunks for common levels right after data load. When enabled, the system will precompute conflation data in the background, which improves performance when zooming out but increases initial load time and memory usage. Performance impact: * Initial load: +100-500ms depending on dataset size * Memory usage: +20-50% of original dataset size * Zoom performance: Significant improvement (10-100x faster) Recommended for: Large datasets (>10K points) on machines with sufficient memory #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-23 "Direct link to Default Value") false #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-24 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`precomputeConflationOnInit`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationoninit) * * * ### precomputeConflationPriority[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#precomputeconflationpriority "Direct link to precomputeConflationPriority") > **precomputeConflationPriority**: `"background"` | `"user-visible"` | `"user-blocking"` Priority used for background precompute tasks when the Prioritized Task Scheduling API is available. Options: * 'background': Lowest priority, tasks run only when the browser is idle * 'user-visible': Medium priority, tasks run when they might affect visible content * 'user-blocking': Highest priority, tasks run immediately and may block user interaction Recommendation: Use 'background' for most cases to avoid impacting user experience. Only use higher priorities if conflation is critical for your application's functionality. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-24 "Direct link to Default Value") 'background' #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#inherited-from-25 "Direct link to Inherited from") [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) . [`precomputeConflationPriority`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#precomputeconflationpriority) * * * ### tickMarkFormatter?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#tickmarkformatter "Direct link to tickMarkFormatter?") > `optional` **tickMarkFormatter**: [`TickMarkFormatter`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkFormatter) Tick marks formatter can be used to customize tick marks labels on the time axis. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#default-value-25 "Direct link to Default Value") `undefined` * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#extends) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#properties) * [rightOffset](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightoffset) * [rightOffsetPixels?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightoffsetpixels) * [barSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#barspacing) * [minBarSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minbarspacing) * [maxBarSpacing](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#maxbarspacing) * [fixLeftEdge](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#fixleftedge) * [fixRightEdge](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#fixrightedge) * [lockVisibleTimeRangeOnResize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#lockvisibletimerangeonresize) * [rightBarStaysOnScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightbarstaysonscroll) * [borderVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#bordervisible) * [borderColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#bordercolor) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#visible) * [timeVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#timevisible) * [secondsVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#secondsvisible) * [shiftVisibleRangeOnNewBar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#shiftvisiblerangeonnewbar) * [allowShiftVisibleRangeOnWhitespaceReplacement](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#allowshiftvisiblerangeonwhitespacereplacement) * [ticksVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#ticksvisible) * [tickMarkMaxCharacterLength?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#tickmarkmaxcharacterlength) * [uniformDistribution](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#uniformdistribution) * [minimumHeight](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minimumheight) * [allowBoldLabels](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#allowboldlabels) * [ignoreWhitespaceIndices](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#ignorewhitespaceindices) * [enableConflation](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#enableconflation) * [conflationThresholdFactor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#conflationthresholdfactor) * [precomputeConflationOnInit](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#precomputeconflationoninit) * [precomputeConflationPriority](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#precomputeconflationpriority) * [tickMarkFormatter?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#tickmarkformatter) --- # Interface: ISeriesUpDownMarkerPluginApi\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page UpDownMarkersPrimitive Plugin for showing the direction of price changes on the chart. This plugin can only be used with Line and Area series types. 1. Manual control: * Use the `setMarkers` method to manually add markers to the chart. This will replace any existing markers. * Use `clearMarkers` to remove all markers. 2. Automatic updates: Use `setData` and `update` from this primitive instead of the those on the series to let the primitive handle the creation of price change markers automatically. * Use `setData` to initialize or replace all data points. * Use `update` to modify individual data points. This will automatically create markers for price changes on existing data points. * The `updateVisibilityDuration` option controls how long markers remain visible. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------------------------- * [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) <`HorzScaleItem`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- • **HorzScaleItem** • **TData** _extends_ [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <`HorzScaleItem`\>\[[`UpDownMarkersSupportedSeriesTypes`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/UpDownMarkersSupportedSeriesTypes)\ \] = [`SeriesDataItemTypeMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) <`HorzScaleItem`\>\[`"Line"`\] Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------------------- ### detach()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#detach "Direct link to detach()") > **detach**: () => `void` Detaches the plugin from the series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#inherited-from "Direct link to Inherited from") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`detach`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#detach) * * * ### getSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#getseries "Direct link to getSeries()") > **getSeries**: () => [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > , `HorzScaleItem`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`HorzScaleItem`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`HorzScaleItem`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) > <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) > <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) > <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) > <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) > <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) > <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) > <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) > | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) > | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) > | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) > | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) > | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) > | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) > , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) > <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) > & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) > \>> Returns the current series. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-1 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`HorzScaleItem`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`HorzScaleItem`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`HorzScaleItem`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`HorzScaleItem`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`HorzScaleItem`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`HorzScaleItem`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`HorzScaleItem`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`HorzScaleItem`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#inherited-from-1 "Direct link to Inherited from") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`getSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#getseries) * * * ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#applyoptions "Direct link to applyOptions()") > **applyOptions**: (`options`) => `void` Applies new options to the plugin. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#parameters "Direct link to Parameters") • **options**: `Partial` <[`UpDownMarkersPluginOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions) \> Partial options to apply. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-2 "Direct link to Returns") `void` #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#overrides "Direct link to Overrides") [`ISeriesPrimitiveWrapper`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper) . [`applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesPrimitiveWrapper#applyoptions) * * * ### setData()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#setdata "Direct link to setData()") > **setData**: (`data`) => `void` Sets the data for the series and manages data points for marker updates. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#parameters-1 "Direct link to Parameters") • **data**: `TData`\[\] Array of data points to set. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-3 "Direct link to Returns") `void` * * * ### update()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#update "Direct link to update()") > **update**: (`data`, `historicalUpdate`?) => `void` Updates a single data point and manages marker updates for existing data points. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#parameters-2 "Direct link to Parameters") • **data**: `TData` The data point to update. • **historicalUpdate?**: `boolean` Optional flag for historical updates. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-4 "Direct link to Returns") `void` * * * ### markers()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#markers "Direct link to markers()") > **markers**: () => readonly [`SeriesUpDownMarker`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker) > <`HorzScaleItem`\>\[\] Retrieves the current markers on the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-5 "Direct link to Returns") readonly [`SeriesUpDownMarker`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker) <`HorzScaleItem`\>\[\] * * * ### setMarkers()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#setmarkers "Direct link to setMarkers()") > **setMarkers**: (`markers`) => `void` Manually sets markers on the chart. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#parameters-3 "Direct link to Parameters") • **markers**: [`SeriesUpDownMarker`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker) <`HorzScaleItem`\>\[\] Array of SeriesUpDownMarker to set. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-6 "Direct link to Returns") `void` * * * ### clearMarkers()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#clearmarkers "Direct link to clearMarkers()") > **clearMarkers**: () => `void` Clears all markers from the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#returns-7 "Direct link to Returns") `void` * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#properties) * [detach()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#detach) * [getSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#getseries) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#applyoptions) * [setData()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#setdata) * [update()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#update) * [markers()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#markers) * [setMarkers()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#setmarkers) * [clearMarkers()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesUpDownMarkerPluginApi#clearmarkers) --- # Interface: TextWatermarkLineOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------------- ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#color "Direct link to color") > **color**: `string` Watermark color. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value "Direct link to Default Value") `'rgba(0, 0, 0, 0.5)'` * * * ### text[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#text "Direct link to text") > **text**: `string` Text of the watermark. Word wrapping is not supported. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value-1 "Direct link to Default Value") `''` * * * ### fontSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontsize "Direct link to fontSize") > **fontSize**: `number` Font size in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value-2 "Direct link to Default Value") `48` * * * ### lineHeight?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#lineheight "Direct link to lineHeight?") > `optional` **lineHeight**: `number` Line height in pixels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value-3 "Direct link to Default Value") `1.2 * fontSize` * * * ### fontFamily[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontfamily "Direct link to fontFamily") > **fontFamily**: `string` Font family. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value-4 "Direct link to Default Value") `-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif` * * * ### fontStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontstyle "Direct link to fontStyle") > **fontStyle**: `string` Font style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#default-value-5 "Direct link to Default Value") `''` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#properties) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#color) * [text](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#text) * [fontSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontsize) * [lineHeight?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#lineheight) * [fontFamily](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontfamily) * [fontStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions#fontstyle) --- # Interface: TimeScalePoint | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a point on the time scale Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------ ### timeWeight[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#timeweight "Direct link to timeWeight") > `readonly` **timeWeight**: [`TickMarkWeightValue`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) Weight of the point * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#time "Direct link to time") > `readonly` **time**: `object` Time of the point #### \[species\][​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#species "Direct link to [species]") > **\[species\]**: `"InternalHorzScaleItem"` The 'name' or species of the nominal. * * * ### originalTime[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#originaltime "Direct link to originalTime") > `readonly` **originalTime**: `unknown` Original time for the point * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#properties) * [timeWeight](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#timeweight) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#time) * [originalTime](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScalePoint#originaltime) --- # Interface: SeriesMarkerPrice\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a series marker. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#extends "Direct link to Extends") ------------------------------------------------------------------------------------------------------------------------------------ * [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) <`TimeType`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------ • **TimeType** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#time "Direct link to time") > **time**: `TimeType` The time of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#time) * * * ### shape[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#shape "Direct link to shape") > **shape**: [`SeriesMarkerShape`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerShape) The shape of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from-1 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`shape`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#shape) * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#color "Direct link to color") > **color**: `string` The color of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from-2 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`color`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#color) * * * ### id?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#id "Direct link to id?") > `optional` **id**: `string` The ID of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from-3 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`id`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#id) * * * ### text?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#text "Direct link to text?") > `optional` **text**: `string` The optional text of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from-4 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`text`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#text) * * * ### size?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#size "Direct link to size?") > `optional` **size**: `number` The optional size of the marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#default-value "Direct link to Default Value") `1` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#inherited-from-5 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`size`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#size) * * * ### position[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#position "Direct link to position") > **position**: [`SeriesMarkerPricePosition`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) The position of the marker. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#overrides "Direct link to Overrides") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`position`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#position) * * * ### price[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#price "Direct link to price") > **price**: `number` The price value for exact Y-axis positioning. Required when using [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) position type. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#overrides-1 "Direct link to Overrides") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`price`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#price) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#time) * [shape](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#shape) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#color) * [id?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#id) * [text?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#text) * [size?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#size) * [position](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#position) * [price](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice#price) --- # Interface: SeriesUpDownMarker\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a marker drawn above or below a data point to indicate a price change update. Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#type-parameters "Direct link to Type parameters") ------------------------------------------------------------------------------------------------------------------------------------------------------------- • **T** = [`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) The type of the time value, defaults to Time. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#properties "Direct link to Properties") ---------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#time "Direct link to time") > **time**: `T` The point on the horizontal scale. * * * ### value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#value "Direct link to value") > **value**: `number` The price value for the data point. * * * ### sign[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#sign "Direct link to sign") > **sign**: [`MarkerSign`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/MarkerSign) The direction of the price change. * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#time) * [value](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#value) * [sign](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesUpDownMarker#sign) --- # Interface: TickMark | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Tick mark for the horizontal scale. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------ ### index[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#index "Direct link to index") > **index**: [`TimePointIndex`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TimePointIndex) Index * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#time "Direct link to time") > **time**: `object` Time / Coordinate #### \[species\][​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#species "Direct link to [species]") > **\[species\]**: `"InternalHorzScaleItem"` The 'name' or species of the nominal. * * * ### weight[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#weight "Direct link to weight") > **weight**: [`TickMarkWeightValue`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/TickMarkWeightValue) Weight of the tick mark * * * ### originalTime[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#originaltime "Direct link to originalTime") > **originalTime**: `unknown` Original value for the `time` property * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#properties) * [index](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#index) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#time) * [weight](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#weight) * [originalTime](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TickMark#originaltime) --- # Interface: SeriesMarkerBar\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a series marker. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#extends "Direct link to Extends") ---------------------------------------------------------------------------------------------------------------------------------- * [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) <`TimeType`\> Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#type-parameters "Direct link to Type parameters") ---------------------------------------------------------------------------------------------------------------------------------------------------------- • **TimeType** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------- ### position[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#position "Direct link to position") > **position**: [`SeriesMarkerBarPosition`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerBarPosition) The position of the marker. #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#overrides "Direct link to Overrides") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`position`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#position) * * * ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#time "Direct link to time") > **time**: `TimeType` The time of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`time`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#time) * * * ### shape[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#shape "Direct link to shape") > **shape**: [`SeriesMarkerShape`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerShape) The shape of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-1 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`shape`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#shape) * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#color "Direct link to color") > **color**: `string` The color of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-2 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`color`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#color) * * * ### id?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#id "Direct link to id?") > `optional` **id**: `string` The ID of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-3 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`id`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#id) * * * ### text?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#text "Direct link to text?") > `optional` **text**: `string` The optional text of the marker. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-4 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`text`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#text) * * * ### size?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#size "Direct link to size?") > `optional` **size**: `number` The optional size of the marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#default-value "Direct link to Default Value") `1` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-5 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`size`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#size) * * * ### price?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#price "Direct link to price?") > `optional` **price**: `number` The price value for exact Y-axis positioning. Required when using [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) position type. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#inherited-from-6 "Direct link to Inherited from") [`SeriesMarkerBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase) . [`price`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#price) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#extends) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#properties) * [position](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#position) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#time) * [shape](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#shape) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#color) * [id?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#id) * [text?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#text) * [size?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#size) * [price?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar#price) --- # Interface: SeriesOptionsCommon | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents options common for all types of series Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#properties "Direct link to Properties") ----------------------------------------------------------------------------------------------------------------------------------------------- ### lastValueVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#lastvaluevisible "Direct link to lastValueVisible") > **lastValueVisible**: `boolean` Visibility of the label with the latest visible price on the price scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value "Direct link to Default Value") `true`, `false` for yield curve charts * * * ### title[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#title "Direct link to title") > **title**: `string` You can name series when adding it to a chart. This name will be displayed on the label next to the last value label. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-1 "Direct link to Default Value") `''` * * * ### priceScaleId?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricescaleid "Direct link to priceScaleId?") > `optional` **priceScaleId**: `string` Target price scale to bind new series to. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-2 "Direct link to Default Value") `'right'` if right scale is visible and `'left'` otherwise * * * ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#visible "Direct link to visible") > **visible**: `boolean` Visibility of the series. If the series is hidden, everything including price lines, baseline, price labels and markers, will also be hidden. Please note that hiding a series is not equivalent to deleting it, since hiding does not affect the timeline at all, unlike deleting where the timeline can be changed (some points can be deleted). #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-3 "Direct link to Default Value") `true` * * * ### priceLineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinevisible "Direct link to priceLineVisible") > **priceLineVisible**: `boolean` Show the price line. Price line is a horizontal line indicating the last price of the series. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-4 "Direct link to Default Value") `true`, `false` for yield curve charts * * * ### priceLineSource[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinesource "Direct link to priceLineSource") > **priceLineSource**: [`PriceLineSource`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/PriceLineSource) The source to use for the value of the price line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-5 "Direct link to Default Value") {@link PriceLineSource.LastBar} * * * ### priceLineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinewidth "Direct link to priceLineWidth") > **priceLineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Width of the price line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-6 "Direct link to Default Value") `1` * * * ### priceLineColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinecolor "Direct link to priceLineColor") > **priceLineColor**: `string` Color of the price line. By default, its color is set by the last bar color (or by line color on Line and Area charts). #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-7 "Direct link to Default Value") `''` * * * ### priceLineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinestyle "Direct link to priceLineStyle") > **priceLineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Price line style. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-8 "Direct link to Default Value") {@link LineStyle.Dashed} * * * ### priceFormat[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#priceformat "Direct link to priceFormat") > **priceFormat**: [`PriceFormat`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/PriceFormat) Price format. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-9 "Direct link to Default Value") `{ type: 'price', precision: 2, minMove: 0.01 }` * * * ### baseLineVisible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinevisible "Direct link to baseLineVisible") > **baseLineVisible**: `boolean` Visibility of base line. Suitable for percentage and `IndexedTo100` scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-10 "Direct link to Default Value") `true` * * * ### baseLineColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinecolor "Direct link to baseLineColor") > **baseLineColor**: `string` Color of the base line in `IndexedTo100` mode. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-11 "Direct link to Default Value") `'#B2B5BE'` * * * ### baseLineWidth[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinewidth "Direct link to baseLineWidth") > **baseLineWidth**: [`LineWidth`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineWidth) Base line width. Suitable for percentage and `IndexedTo10` scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-12 "Direct link to Default Value") `1` * * * ### baseLineStyle[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinestyle "Direct link to baseLineStyle") > **baseLineStyle**: [`LineStyle`](https://tradingview.github.io/lightweight-charts/docs/api/enumerations/LineStyle) Base line style. Suitable for percentage and indexedTo100 scales. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-13 "Direct link to Default Value") {@link LineStyle.Solid} * * * ### autoscaleInfoProvider?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#autoscaleinfoprovider "Direct link to autoscaleInfoProvider?") > `optional` **autoscaleInfoProvider**: [`AutoscaleInfoProvider`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AutoscaleInfoProvider) Override the default [AutoscaleInfo](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AutoscaleInfo) provider. By default, the chart scales data automatically based on visible data range. However, for some reasons one could require overriding this behavior. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-14 "Direct link to Default Value") `undefined` #### Examples[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#examples "Direct link to Examples") const firstSeries = chart.addSeries(LineSeries, { autoscaleInfoProvider: () => ({ priceRange: { minValue: 0, maxValue: 100, }, }),}); const firstSeries = chart.addSeries(LineSeries, { autoscaleInfoProvider: () => ({ priceRange: { minValue: 0, maxValue: 100, }, margins: { above: 10, below: 10, }, }),}); const firstSeries = chart.addSeries(LineSeries, { autoscaleInfoProvider: original => { const res = original(); if (res !== null) { res.priceRange.minValue -= 10; res.priceRange.maxValue += 10; } return res; },}); * * * ### conflationThresholdFactor?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#conflationthresholdfactor "Direct link to conflationThresholdFactor?") > `optional` **conflationThresholdFactor**: `number` Conflation smoothing factor for this series. Overrides the global time scale option. Controls how aggressively conflation is applied specifically to this series. * 1.0 = conflate only when display can't show detail (default, performance-focused) * 2.0 = conflate at 2x the display threshold (moderate smoothing) * 4.0 = conflate at 4x the display threshold (strong smoothing) * 8.0+ = very aggressive smoothing for very small charts Higher values result in fewer data points being displayed for this series, creating smoother but less detailed charts. This allows different series on the same chart to have different conflation levels. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#default-value-15 "Direct link to Default Value") `undefined` (uses global time scale option) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#properties) * [lastValueVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#lastvaluevisible) * [title](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#title) * [priceScaleId?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricescaleid) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#visible) * [priceLineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinevisible) * [priceLineSource](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinesource) * [priceLineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinewidth) * [priceLineColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinecolor) * [priceLineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinestyle) * [priceFormat](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#priceformat) * [baseLineVisible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinevisible) * [baseLineColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinecolor) * [baseLineWidth](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinewidth) * [baseLineStyle](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#baselinestyle) * [autoscaleInfoProvider?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#autoscaleinfoprovider) * [conflationThresholdFactor?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#conflationthresholdfactor) --- # Interface: SeriesMarkerBase\ | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents a series marker. Extended by[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#extended-by "Direct link to Extended by") ----------------------------------------------------------------------------------------------------------------------------------------------- * [`SeriesMarkerBar`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBar) * [`SeriesMarkerPrice`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerPrice) Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#type-parameters "Direct link to Type parameters") ----------------------------------------------------------------------------------------------------------------------------------------------------------- • **TimeType** Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### time[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#time "Direct link to time") > **time**: `TimeType` The time of the marker. * * * ### position[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#position "Direct link to position") > **position**: [`SeriesMarkerPosition`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPosition) The position of the marker. * * * ### shape[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#shape "Direct link to shape") > **shape**: [`SeriesMarkerShape`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerShape) The shape of the marker. * * * ### color[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#color "Direct link to color") > **color**: `string` The color of the marker. * * * ### id?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#id "Direct link to id?") > `optional` **id**: `string` The ID of the marker. * * * ### text?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#text "Direct link to text?") > `optional` **text**: `string` The optional text of the marker. * * * ### size?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#size "Direct link to size?") > `optional` **size**: `number` The optional size of the marker. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#default-value "Direct link to Default Value") `1` * * * ### price?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#price "Direct link to price?") > `optional` **price**: `number` The price value for exact Y-axis positioning. Required when using [SeriesMarkerPricePosition](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/SeriesMarkerPricePosition) position type. * [Extended by](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#extended-by) * [Type parameters](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#type-parameters) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#properties) * [time](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#time) * [position](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#position) * [shape](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#shape) * [color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#color) * [id?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#id) * [text?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#text) * [size?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#size) * [price?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesMarkerBase#price) --- # Interface: TimeChartOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Options for chart with time at the horizontal scale Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------------- * [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) \> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#width "Direct link to width") > **width**: `number` Width of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#default-value "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`width`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#width) * * * ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#height "Direct link to height") > **height**: `number` Height of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#default-value-1 "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-1 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`height`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#height) * * * ### autoSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#autosize "Direct link to 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`](https://developer.mozilla.org/en-US/docs/Web/API/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-2 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`autoSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#autosize) * * * ### layout[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#layout "Direct link to layout") > **layout**: [`LayoutOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) Layout options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-3 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`layout`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#layout) * * * ### leftPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#leftpricescale "Direct link to leftPriceScale") > **leftPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Left price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-4 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#leftpricescale) * * * ### rightPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#rightpricescale "Direct link to rightPriceScale") > **rightPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Right price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-5 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#rightpricescale) * * * ### overlayPriceScales[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#overlaypricescales "Direct link to overlayPriceScales") > **overlayPriceScales**: [`OverlayPriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) Overlay price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-6 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overlaypricescales) * * * ### crosshair[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#crosshair "Direct link to crosshair") > **crosshair**: [`CrosshairOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) The crosshair shows the intersection of the price and time scale values at any point on the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-7 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`crosshair`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#crosshair) * * * ### grid[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#grid "Direct link to grid") > **grid**: [`GridOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-8 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`grid`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#grid) * * * ### handleScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#handlescroll "Direct link to handleScroll") > **handleScroll**: `boolean` | [`HandleScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) Scroll options, or a boolean flag that enables/disables scrolling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-9 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescroll) * * * ### handleScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#handlescale "Direct link to handleScale") > **handleScale**: `boolean` | [`HandleScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) Scale options, or a boolean flag that enables/disables scaling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-10 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescale) * * * ### kineticScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#kineticscroll "Direct link to kineticScroll") > **kineticScroll**: [`KineticScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) Kinetic scroll options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-11 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`kineticScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#kineticscroll) * * * ### trackingMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#trackingmode "Direct link to trackingMode") > **trackingMode**: [`TrackingModeOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-12 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`trackingMode`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#trackingmode) * * * ### addDefaultPane[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#adddefaultpane "Direct link to addDefaultPane") > **addDefaultPane**: `boolean` Whether to add a default pane to the chart Disable this option when you want to create a chart with no panes and add them manually #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#default-value-2 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-13 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`addDefaultPane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#adddefaultpane) * * * ### localization[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#localization "Direct link to localization") > **localization**: [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) > <[`Time`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Time) > \> Localization options. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#inherited-from-14 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`localization`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#localization) * * * ### timeScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#timescale "Direct link to timeScale") > **timeScale**: [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) Extended time scale options with option to override tickMarkFormatter #### Overrides[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#overrides "Direct link to Overrides") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#timescale) * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#extends) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#properties) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#width) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#height) * [autoSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#autosize) * [layout](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#layout) * [leftPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#leftpricescale) * [rightPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#rightpricescale) * [overlayPriceScales](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#overlaypricescales) * [crosshair](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#crosshair) * [grid](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#grid) * [handleScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#handlescroll) * [handleScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#handlescale) * [kineticScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#kineticscroll) * [trackingMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#trackingmode) * [addDefaultPane](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#adddefaultpane) * [localization](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#localization) * [timeScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeChartOptions#timescale) --- # Interface: SeriesOptionsMap | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Represents the type of options for each series type. For example a bar series has options represented by [BarSeriesOptions](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) . Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------- ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#bar "Direct link to Bar") > **Bar**: [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) The type of bar series options. * * * ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#candlestick "Direct link to Candlestick") > **Candlestick**: [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) The type of candlestick series options. * * * ### Area[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#area "Direct link to Area") > **Area**: [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) The type of area series options. * * * ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#baseline "Direct link to Baseline") > **Baseline**: [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) The type of baseline series options. * * * ### Line[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#line "Direct link to Line") > **Line**: [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) The type of line series options. * * * ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#histogram "Direct link to Histogram") > **Histogram**: [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) The type of histogram series options. * * * ### Custom[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#custom "Direct link to Custom") > **Custom**: [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) The type of a custom series options. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#properties) * [Bar](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#bar) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#candlestick) * [Area](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#area) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#baseline) * [Line](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#line) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#histogram) * [Custom](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap#custom) --- # Interface: UpDownMarkersPluginOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Configuration options for the UpDownMarkers plugin. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------------ ### positiveColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#positivecolor "Direct link to positiveColor") > **positiveColor**: `string` The color used for markers indicating a positive price change. This color will be applied to markers shown above data points where the price has increased. * * * ### negativeColor[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#negativecolor "Direct link to negativeColor") > **negativeColor**: `string` The color used for markers indicating a negative price change. This color will be applied to markers shown below data points where the price has decreased. * * * ### updateVisibilityDuration[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#updatevisibilityduration "Direct link to updateVisibilityDuration") > **updateVisibilityDuration**: `number` The duration (in milliseconds) for which update markers remain visible on the chart. After this duration, the markers will automatically disappear. Set to 0 for markers to remain indefinitely until the next update. * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#properties) * [positiveColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#positivecolor) * [negativeColor](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#negativecolor) * [updateVisibilityDuration](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/UpDownMarkersPluginOptions#updatevisibilityduration) --- # Interface: YieldCurveOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Options specific to yield curve charts. Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#properties "Direct link to Properties") --------------------------------------------------------------------------------------------------------------------------------------------- ### baseResolution[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#baseresolution "Direct link to baseResolution") > **baseResolution**: `number` The smallest time unit for the yield curve, typically representing one month. This value determines the granularity of the time scale. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#default-value "Direct link to Default Value") 1 * * * ### minimumTimeRange[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#minimumtimerange "Direct link to minimumTimeRange") > **minimumTimeRange**: `number` The minimum time range to be displayed on the chart, in units of baseResolution. This ensures that the chart always shows at least this much time range, even if there's less data. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#default-value-1 "Direct link to Default Value") 120 (10 years) * * * ### startTimeRange[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#starttimerange "Direct link to startTimeRange") > **startTimeRange**: `number` The starting time value for the chart, in units of baseResolution. This determines where the time scale begins. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#default-value-2 "Direct link to Default Value") 0 * * * ### formatTime()?[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#formattime "Direct link to formatTime()?") > `optional` **formatTime**: (`months`) => `string` Optional custom formatter for time values on the horizontal axis. If not provided, a default formatter will be used. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#parameters "Direct link to Parameters") • **months**: `number` The number of months (or baseResolution units) to format #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#returns "Direct link to Returns") `string` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#properties) * [baseResolution](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#baseresolution) * [minimumTimeRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#minimumtimerange) * [startTimeRange](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#starttimerange) * [formatTime()?](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions#formattime) --- # Interface: TextWatermarkOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#properties "Direct link to Properties") ------------------------------------------------------------------------------------------------------------------------------------------------ ### visible[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#visible "Direct link to visible") > **visible**: `boolean` Display the watermark. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#default-value "Direct link to Default Value") `true` * * * ### horzAlign[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#horzalign "Direct link to horzAlign") > **horzAlign**: [`HorzAlign`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HorzAlign) Horizontal alignment inside the chart area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#default-value-1 "Direct link to Default Value") `'center'` * * * ### vertAlign[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#vertalign "Direct link to vertAlign") > **vertAlign**: [`VertAlign`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/VertAlign) Vertical alignment inside the chart area. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#default-value-2 "Direct link to Default Value") `'center'` * * * ### lines[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#lines "Direct link to lines") > **lines**: [`TextWatermarkLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkLineOptions) > \[\] Text to be displayed within the watermark. Each item in the array is treated as new line. #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#default-value-3 "Direct link to Default Value") `[]` * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#properties) * [visible](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#visible) * [horzAlign](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#horzalign) * [vertAlign](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#vertalign) * [lines](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TextWatermarkOptions#lines) --- # Interface: IYieldCurveChartApi | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#__docusaurus_skipToContent_fallback) Version: 5.1 On this page The main interface of a single yield curve chart. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#extends "Direct link to Extends") -------------------------------------------------------------------------------------------------------------------------------------- * `Omit` <[`IChartApiBase`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase) <`number`\>, `"addSeries"`\> Methods[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#methods "Direct link to Methods") -------------------------------------------------------------------------------------------------------------------------------------- ### remove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#remove "Direct link to remove()") > **remove**(): `void` Removes the chart object including all DOM elements. This is an irreversible operation, you cannot do anything with the chart after removing it. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from "Direct link to Inherited from") `Omit.remove` * * * ### resize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#resize "Direct link to resize()") > **resize**(`width`, `height`, `forceRepaint`?): `void` Sets fixed size of the chart. By default chart takes up 100% of its container. If chart has the `autoSize` option enabled, and the ResizeObserver is available then the width and height values will be ignored. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters "Direct link to Parameters") • **width**: `number` Target width of the chart. • **height**: `number` Target height of the chart. • **forceRepaint?**: `boolean` True to initiate resize immediately. One could need this to get screenshot immediately after resize. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-1 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-1 "Direct link to Inherited from") `Omit.resize` * * * ### addCustomSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addcustomseries "Direct link to addCustomSeries()") > **addCustomSeries**<`TData`, `TOptions`, `TPartialOptions`\>(`customPaneView`, `customOptions`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`"Custom"`, `number`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`number`\> | `TData`, `TOptions`, `TPartialOptions`\> Creates a custom series with specified parameters. A custom series is a generic series which can be extended with a custom renderer to implement chart types which the library doesn't support by default. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#type-parameters "Direct link to Type parameters") • **TData** _extends_ [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`number`\> • **TOptions** _extends_ [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) • **TPartialOptions** _extends_ [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> = [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-1 "Direct link to Parameters") • **customPaneView**: [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) <`number`, `TData`, `TOptions`\> A custom series pane view which implements the custom renderer. • **customOptions?**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <`TOptions` & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> Customization parameters of the series being created. const series = chart.addCustomSeries(myCustomPaneView); • **paneIndex?**: `number` #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-2 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`"Custom"`, `number`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`number`\> | `TData`, `TOptions`, `TPartialOptions`\> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-2 "Direct link to Inherited from") `Omit.addCustomSeries` * * * ### removeSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#removeseries "Direct link to removeSeries()") > **removeSeries**(`seriesApi`): `void` Removes a series of any type. This is an irreversible operation, you cannot do anything with the series after removing it. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-2 "Direct link to Parameters") • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`number`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`number`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`number`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`number`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`number`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`number`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`number`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`number`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-3 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-3 "Direct link to Inherited from") `Omit.removeSeries` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example "Direct link to Example") chart.removeSeries(series); * * * ### subscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribeclick "Direct link to subscribeClick()") > **subscribeClick**(`handler`): `void` Subscribe to the chart click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-3 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Handler to be called on mouse click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-4 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-4 "Direct link to Inherited from") `Omit.subscribeClick` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-1 "Direct link to Example") function myClickHandler(param) { if (!param.point) { return; } console.log(`Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeClick(myClickHandler); * * * ### unsubscribeClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribeclick "Direct link to unsubscribeClick()") > **unsubscribeClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribeclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-4 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-5 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-5 "Direct link to Inherited from") `Omit.unsubscribeClick` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-2 "Direct link to Example") chart.unsubscribeClick(myClickHandler); * * * ### subscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribedblclick "Direct link to subscribeDblClick()") > **subscribeDblClick**(`handler`): `void` Subscribe to the chart double-click event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-5 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Handler to be called on mouse double-click. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-6 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-6 "Direct link to Inherited from") `Omit.subscribeDblClick` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-3 "Direct link to Example") function myDblClickHandler(param) { if (!param.point) { return; } console.log(`Double Click at ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeDblClick(myDblClickHandler); * * * ### unsubscribeDblClick()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribedblclick "Direct link to unsubscribeDblClick()") > **unsubscribeDblClick**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeDblClick](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribedblclick) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-6 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-7 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-7 "Direct link to Inherited from") `Omit.unsubscribeDblClick` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-4 "Direct link to Example") chart.unsubscribeDblClick(myDblClickHandler); * * * ### subscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribecrosshairmove "Direct link to subscribeCrosshairMove()") > **subscribeCrosshairMove**(`handler`): `void` Subscribe to the crosshair move event. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-7 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Handler to be called on crosshair move. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-8 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-8 "Direct link to Inherited from") `Omit.subscribeCrosshairMove` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-5 "Direct link to Example") function myCrosshairMoveHandler(param) { if (!param.point) { return; } console.log(`Crosshair moved to ${param.point.x}, ${param.point.y}. The time is ${param.time}.`);}chart.subscribeCrosshairMove(myCrosshairMoveHandler); * * * ### unsubscribeCrosshairMove()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribecrosshairmove "Direct link to unsubscribeCrosshairMove()") > **unsubscribeCrosshairMove**(`handler`): `void` Unsubscribe a handler that was previously subscribed using [subscribeCrosshairMove](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApiBase#subscribecrosshairmove) . #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-8 "Direct link to Parameters") • **handler**: [`MouseEventHandler`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/MouseEventHandler) <`number`\> Previously subscribed handler #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-9 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-9 "Direct link to Inherited from") `Omit.unsubscribeCrosshairMove` #### Example[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#example-6 "Direct link to Example") chart.unsubscribeCrosshairMove(myCrosshairMoveHandler); * * * ### priceScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#pricescale "Direct link to priceScale()") > **priceScale**(`priceScaleId`, `paneIndex`?): [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Returns API to manipulate a price scale. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-9 "Direct link to Parameters") • **priceScaleId**: `string` ID of the price scale. • **paneIndex?**: `number` Index of the pane (default: 0) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-10 "Direct link to Returns") [`IPriceScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) Price scale API. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-10 "Direct link to Inherited from") `Omit.priceScale` * * * ### timeScale()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#timescale "Direct link to timeScale()") > **timeScale**(): [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) > <`number`\> Returns API to manipulate the time scale #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-11 "Direct link to Returns") [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) <`number`\> Target API #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-11 "Direct link to Inherited from") `Omit.timeScale` * * * ### applyOptions()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#applyoptions "Direct link to applyOptions()") > **applyOptions**(`options`): `void` Applies new options to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-10 "Direct link to Parameters") • **options**: [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`number`\>> Any subset of options. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-12 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-12 "Direct link to Inherited from") `Omit.applyOptions` * * * ### options()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#options "Direct link to options()") > **options**(): `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) > <`number`\>> Returns currently applied options #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-13 "Direct link to Returns") `Readonly` <[`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`number`\>> Full set of currently applied options, including defaults #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-13 "Direct link to Inherited from") `Omit.options` * * * ### takeScreenshot()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#takescreenshot "Direct link to takeScreenshot()") > **takeScreenshot**(`addTopLayer`?, `includeCrosshair`?): `HTMLCanvasElement` Make a screenshot of the chart with all the elements excluding crosshair. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-11 "Direct link to Parameters") • **addTopLayer?**: `boolean` if true, the top layer and primitives will be included in the screenshot (default: false) • **includeCrosshair?**: `boolean` works only if addTopLayer is enabled. If true, the crosshair will be included in the screenshot (default: false) #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-14 "Direct link to Returns") `HTMLCanvasElement` A canvas with the chart drawn on. Any `Canvas` methods like `toDataURL()` or `toBlob()` can be used to serialize the result. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-14 "Direct link to Inherited from") `Omit.takeScreenshot` * * * ### addPane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addpane "Direct link to addPane()") > **addPane**(`preserveEmptyPane`?): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`number`\> Add a pane to the chart #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-12 "Direct link to Parameters") • **preserveEmptyPane?**: `boolean` Whether to preserve the empty pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-15 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`number`\> The pane API #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-15 "Direct link to Inherited from") `Omit.addPane` * * * ### panes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#panes "Direct link to panes()") > **panes**(): [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) > <`number`\>\[\] Returns array of panes' API #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-16 "Direct link to Returns") [`IPaneApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) <`number`\>\[\] array of pane's Api #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-16 "Direct link to Inherited from") `Omit.panes` * * * ### removePane()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#removepane "Direct link to removePane()") > **removePane**(`index`): `void` Removes a pane with index #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-13 "Direct link to Parameters") • **index**: `number` the pane to be removed #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-17 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-17 "Direct link to Inherited from") `Omit.removePane` * * * ### swapPanes()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#swappanes "Direct link to swapPanes()") > **swapPanes**(`first`, `second`): `void` swap the position of two panes. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-14 "Direct link to Parameters") • **first**: `number` the first index • **second**: `number` the second index #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-18 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-18 "Direct link to Inherited from") `Omit.swapPanes` * * * ### autoSizeActive()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#autosizeactive "Direct link to autoSizeActive()") > **autoSizeActive**(): `boolean` Returns the active state of the `autoSize` option. This can be used to check whether the chart is handling resizing automatically with a `ResizeObserver`. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-19 "Direct link to Returns") `boolean` Whether the `autoSize` option is enabled and the active. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-19 "Direct link to Inherited from") `Omit.autoSizeActive` * * * ### chartElement()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#chartelement "Direct link to chartElement()") > **chartElement**(): `HTMLDivElement` Returns the generated div element containing the chart. This can be used for adding your own additional event listeners, or for measuring the elements dimensions and position within the document. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-20 "Direct link to Returns") `HTMLDivElement` generated div element containing the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-20 "Direct link to Inherited from") `Omit.chartElement` * * * ### setCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#setcrosshairposition "Direct link to setCrosshairPosition()") > **setCrosshairPosition**(`price`, `horizontalPosition`, `seriesApi`): `void` Set the crosshair position within the chart. Usually the crosshair position is set automatically by the user's actions. However in some cases you may want to set it explicitly. For example if you want to synchronise the crosshairs of two separate charts. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-15 "Direct link to Parameters") • **price**: `number` The price (vertical coordinate) of the new crosshair position. • **horizontalPosition**: `number` The horizontal coordinate (time by default) of the new crosshair position. • **seriesApi**: [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`number`\> | [`CustomData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomData) <`number`\> | [`AreaData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaData) <`number`\> | [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) <`number`\> | [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) <`number`\> | [`BaselineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineData) <`number`\> | [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) <`number`\> | [`CustomSeriesWhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomSeriesWhitespaceData) <`number`\>, [`CustomSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CustomSeriesOptions) | [`AreaSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/AreaSeriesOptions) | [`BarSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BarSeriesOptions) | [`CandlestickSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/CandlestickSeriesOptions) | [`BaselineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/BaselineSeriesOptions) | [`LineSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LineSeriesOptions) | [`HistogramSeriesOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/HistogramSeriesOptions) , [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \> | [`DeepPartial`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/DeepPartial) <[`CustomStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CustomStyleOptions) & [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) \>> #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-21 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-21 "Direct link to Inherited from") `Omit.setCrosshairPosition` * * * ### clearCrosshairPosition()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#clearcrosshairposition "Direct link to clearCrosshairPosition()") > **clearCrosshairPosition**(): `void` Clear the crosshair position within the chart. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-22 "Direct link to Returns") `void` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-22 "Direct link to Inherited from") `Omit.clearCrosshairPosition` * * * ### paneSize()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#panesize "Direct link to paneSize()") > **paneSize**(`paneIndex`?): [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Returns the dimensions of the chart pane (the plot surface which excludes time and price scales). This would typically only be useful for plugin development. #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-16 "Direct link to Parameters") • **paneIndex?**: `number` The index of the pane #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-23 "Direct link to Returns") [`PaneSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PaneSize) Dimensions of the chart pane #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-23 "Direct link to Inherited from") `Omit.paneSize` #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#default-value "Direct link to Default Value") `0` * * * ### horzBehaviour()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#horzbehaviour "Direct link to horzBehaviour()") > **horzBehaviour**(): [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) > <`number`\> Returns the horizontal scale behaviour. #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-24 "Direct link to Returns") [`IHorzScaleBehavior`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) <`number`\> #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#inherited-from-24 "Direct link to Inherited from") `Omit.horzBehaviour` * * * ### addSeries()[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addseries "Direct link to addSeries()") > **addSeries**<`T`\>(`definition`, `options`?, `paneIndex`?): [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) > <`T`, `number`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) > <`number`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) > <`number`\>, [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) > \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) > \[`T`\]> Creates a series with specified parameters. Note that the Yield Curve chart only supports the Area and Line series types. #### Type parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#type-parameters-1 "Direct link to Type parameters") • **T** _extends_ [`YieldCurveSeriesType`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/YieldCurveSeriesType) #### Parameters[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#parameters-17 "Direct link to Parameters") • **definition**: [`SeriesDefinition`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDefinition) <`T`\> A series definition for either AreaSeries or LineSeries. • **options?**: [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\] Customization parameters of the series being created. • **paneIndex?**: `number` An index of the pane where the series should be created. const series = chart.addSeries(LineSeries, { lineWidth: 2 }); #### Returns[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#returns-25 "Direct link to Returns") [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) <`T`, `number`, [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) <`number`\> | [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) <`number`\>, [`SeriesOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) \[`T`\], [`SeriesPartialOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesPartialOptionsMap) \[`T`\]> * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#extends) * [Methods](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#methods) * [remove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#remove) * [resize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#resize) * [addCustomSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addcustomseries) * [removeSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#removeseries) * [subscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribeclick) * [unsubscribeClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribeclick) * [subscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribedblclick) * [unsubscribeDblClick()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribedblclick) * [subscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#subscribecrosshairmove) * [unsubscribeCrosshairMove()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#unsubscribecrosshairmove) * [priceScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#pricescale) * [timeScale()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#timescale) * [applyOptions()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#applyoptions) * [options()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#options) * [takeScreenshot()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#takescreenshot) * [addPane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addpane) * [panes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#panes) * [removePane()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#removepane) * [swapPanes()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#swappanes) * [autoSizeActive()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#autosizeactive) * [chartElement()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#chartelement) * [setCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#setcrosshairposition) * [clearCrosshairPosition()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#clearcrosshairposition) * [paneSize()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#panesize) * [horzBehaviour()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#horzbehaviour) * [addSeries()](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IYieldCurveChartApi#addseries) --- # Interface: YieldCurveChartOptions | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Extended chart options that include yield curve specific options. This interface combines the standard chart options with yield curve options. Extends[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#extends "Direct link to Extends") ----------------------------------------------------------------------------------------------------------------------------------------- * [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) <`number`\> Properties[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#properties "Direct link to Properties") -------------------------------------------------------------------------------------------------------------------------------------------------- ### width[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#width "Direct link to width") > **width**: `number` Width of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#default-value "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`width`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#width) * * * ### height[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#height "Direct link to height") > **height**: `number` Height of the chart in pixels #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#default-value-1 "Direct link to 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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-1 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`height`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#height) * * * ### autoSize[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#autosize "Direct link to 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`](https://developer.mozilla.org/en-US/docs/Web/API/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-2 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`autoSize`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#autosize) * * * ### layout[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#layout "Direct link to layout") > **layout**: [`LayoutOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions) Layout options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-3 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`layout`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#layout) * * * ### leftPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#leftpricescale "Direct link to leftPriceScale") > **leftPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Left price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-4 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#leftpricescale) * * * ### rightPriceScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#rightpricescale "Direct link to rightPriceScale") > **rightPriceScale**: [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) Right price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-5 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#rightpricescale) * * * ### overlayPriceScales[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#overlaypricescales "Direct link to overlayPriceScales") > **overlayPriceScales**: [`OverlayPriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/OverlayPriceScaleOptions) Overlay price scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-6 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#overlaypricescales) * * * ### timeScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#timescale "Direct link to timeScale") > **timeScale**: [`HorzScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions) Time scale options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-7 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#timescale) * * * ### crosshair[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#crosshair "Direct link to crosshair") > **crosshair**: [`CrosshairOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) The crosshair shows the intersection of the price and time scale values at any point on the chart. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-8 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`crosshair`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#crosshair) * * * ### grid[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#grid "Direct link to grid") > **grid**: [`GridOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-9 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`grid`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#grid) * * * ### handleScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#handlescroll "Direct link to handleScroll") > **handleScroll**: `boolean` | [`HandleScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScrollOptions) Scroll options, or a boolean flag that enables/disables scrolling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-10 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescroll) * * * ### handleScale[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#handlescale "Direct link to handleScale") > **handleScale**: `boolean` | [`HandleScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HandleScaleOptions) Scale options, or a boolean flag that enables/disables scaling #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-11 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`handleScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#handlescale) * * * ### kineticScroll[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#kineticscroll "Direct link to kineticScroll") > **kineticScroll**: [`KineticScrollOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/KineticScrollOptions) Kinetic scroll options #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-12 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`kineticScroll`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#kineticscroll) * * * ### trackingMode[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#trackingmode "Direct link to trackingMode") > **trackingMode**: [`TrackingModeOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/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[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-13 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`trackingMode`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#trackingmode) * * * ### addDefaultPane[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#adddefaultpane "Direct link to addDefaultPane") > **addDefaultPane**: `boolean` Whether to add a default pane to the chart Disable this option when you want to create a chart with no panes and add them manually #### Default Value[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#default-value-2 "Direct link to Default Value") `true` #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-14 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`addDefaultPane`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#adddefaultpane) * * * ### localization[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#localization "Direct link to localization") > **localization**: [`LocalizationOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions) > <`number`\> Localization options. #### Inherited from[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#inherited-from-15 "Direct link to Inherited from") [`ChartOptionsImpl`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl) . [`localization`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsImpl#localization) * * * ### yieldCurve[​](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#yieldcurve "Direct link to yieldCurve") > **yieldCurve**: [`YieldCurveOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveOptions) Yield curve specific options. This object contains all the settings related to how the yield curve is displayed and behaves. * [Extends](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#extends) * [Properties](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#properties) * [width](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#width) * [height](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#height) * [autoSize](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#autosize) * [layout](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#layout) * [leftPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#leftpricescale) * [rightPriceScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#rightpricescale) * [overlayPriceScales](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#overlaypricescales) * [timeScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#timescale) * [crosshair](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#crosshair) * [grid](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#grid) * [handleScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#handlescroll) * [handleScale](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#handlescale) * [kineticScroll](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#kineticscroll) * [trackingMode](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#trackingmode) * [addDefaultPane](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#adddefaultpane) * [localization](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#localization) * [yieldCurve](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/YieldCurveChartOptions#yieldcurve) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: Next On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs/next#requirements "Direct link to Requirements") ----------------------------------------------------------------------------------------------------------------------- Lightweight Charts™ is _a client-side_ library that is not designed to work on the server side, for example, with Node.js. The library code targets the [_ES2020_ language specification](https://262.ecma-international.org/11.0/) . Therefore, the browsers you work with should support this language revision. Consider the following [table](https://compat-table.github.io/compat-table/es2016plus/) to ensure the browser compatibility. To support previous revisions, you can set up a transpilation process for the `lightweight-charts` package in your build system using tools such as Babel. If you encounter any issues, open a [GitHub issue](https://github.com/tradingview/lightweight-charts/issues) with detailed information, and we will investigate potential solutions. Installation[​](https://tradingview.github.io/lightweight-charts/docs/next#installation "Direct link to Installation") ----------------------------------------------------------------------------------------------------------------------- To set up the library, install the [`lightweight-charts`](https://www.npmjs.com/package/lightweight-charts) npm package: npm install --save lightweight-charts The package includes TypeScript declarations, enabling seamless integration within TypeScript projects. ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs/next#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | `lightweight-charts.standalone.development.js` | License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/next#license-and-attribution "Direct link to License and attribution") -------------------------------------------------------------------------------------------------------------------------------------------------------- The Lightweight Charts™ license **requires** specifying TradingView as the product creator. You should add the following attributes to a public page of your website or mobile application: * Attribution notice from the [`NOTICE`](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file * The [https://www.tradingview.com](https://www.tradingview.com/) link Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/next#creating-a-chart "Direct link to Creating a chart") ----------------------------------------------------------------------------------------------------------------------------------- As a first step, import the library to your file: import { createChart } from 'lightweight-charts'; To create a chart, use the [`createChart`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChart) function. You can call the function multiple times to create as many charts as needed: import { createChart } from 'lightweight-charts';// ...const firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); As a result, `createChart` returns an [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi) object that allows you to interact with the created chart. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/next#creating-a-series "Direct link to Creating a series") -------------------------------------------------------------------------------------------------------------------------------------- When the chart is created, you can display data on it. The basic primitive to display data is a [series](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi) . The library supports the following series types: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series, use the [`addSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#addseries) method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi) . As a parameter, specify a [series type](https://tradingview.github.io/lightweight-charts/docs/next/series-types) you would like to create: import { AreaSeries, BarSeries, BaselineSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);const barSeries = chart.addSeries(BarSeries);const baselineSeries = chart.addSeries(BaselineSeries);// ... Note that a series **cannot be transferred** from one type to another one, since different series types require different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/next#setting-and-updating-a-data "Direct link to Setting and updating a data") -------------------------------------------------------------------------------------------------------------------------------------------------------------------- When the series is created, you can populate it with data. Note that the API calls remain the same regardless of the series type, although the data format may vary. ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/next#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data to a series, you should call the [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)',});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries, { upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350',});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); You can also use `setData` to replace all data items. ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/next#updating-the-data-in-a-series "Direct link to Updating the data in a series") If your data is updated, for example in real-time, you may also need to refresh the chart accordingly. To do this, call the [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#update) method that allows you to update the last data item or add a new one. import { AreaSeries, CandlestickSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);areaSeries.setData([ // Other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries);candlestickSeries.setData([ // Other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// ...// Update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// Creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); We do not recommend calling [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#setdata) to update the chart, as this method replaces all series data and can significantly affect the performance. * [Requirements](https://tradingview.github.io/lightweight-charts/docs/next#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs/next#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs/next#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/next#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/next#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/next#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/next#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/next#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/next#updating-the-data-in-a-series) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/5.0#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **5.0**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: 5.0 On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs/5.0#requirements "Direct link to Requirements") ---------------------------------------------------------------------------------------------------------------------- Lightweight Charts™ is _a client-side_ library that is not designed to work on the server side, for example, with Node.js. The library code targets the [_ES2020_ language specification](https://262.ecma-international.org/11.0/) . Therefore, the browsers you work with should support this language revision. Consider the following [table](https://compat-table.github.io/compat-table/es2016plus/) to ensure the browser compatibility. To support previous revisions, you can set up a transpilation process for the `lightweight-charts` package in your build system using tools such as Babel. If you encounter any issues, open a [GitHub issue](https://github.com/tradingview/lightweight-charts/issues) with detailed information, and we will investigate potential solutions. Installation[​](https://tradingview.github.io/lightweight-charts/docs/5.0#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- To set up the library, install the [`lightweight-charts`](https://www.npmjs.com/package/lightweight-charts) npm package: npm install --save lightweight-charts The package includes TypeScript declarations, enabling seamless integration within TypeScript projects. ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs/5.0#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | `lightweight-charts.standalone.development.js` | License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/5.0#license-and-attribution "Direct link to License and attribution") ------------------------------------------------------------------------------------------------------------------------------------------------------- The Lightweight Charts™ license **requires** specifying TradingView as the product creator. You should add the following attributes to a public page of your website or mobile application: * Attribution notice from the [`NOTICE`](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file * The [https://www.tradingview.com](https://www.tradingview.com/) link Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/5.0#creating-a-chart "Direct link to Creating a chart") ---------------------------------------------------------------------------------------------------------------------------------- As a first step, import the library to your file: import { createChart } from 'lightweight-charts'; To create a chart, use the [`createChart`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createChart) function. You can call the function multiple times to create as many charts as needed: import { createChart } from 'lightweight-charts';// ...const firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); As a result, `createChart` returns an [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi) object that allows you to interact with the created chart. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/5.0#creating-a-series "Direct link to Creating a series") ------------------------------------------------------------------------------------------------------------------------------------- When the chart is created, you can display data on it. The basic primitive to display data is a [series](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi) . The library supports the following series types: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series, use the [`addSeries`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi#addseries) method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi) . As a parameter, specify a [series type](https://tradingview.github.io/lightweight-charts/docs/5.0/series-types) you would like to create: import { AreaSeries, BarSeries, BaselineSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);const barSeries = chart.addSeries(BarSeries);const baselineSeries = chart.addSeries(BaselineSeries);// ... Note that a series **cannot be transferred** from one type to another one, since different series types require different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/5.0#setting-and-updating-a-data "Direct link to Setting and updating a data") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- When the series is created, you can populate it with data. Note that the API calls remain the same regardless of the series type, although the data format may vary. ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/5.0#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data to a series, you should call the [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)',});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries, { upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350',});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); You can also use `setData` to replace all data items. ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/5.0#updating-the-data-in-a-series "Direct link to Updating the data in a series") If your data is updated, for example in real-time, you may also need to refresh the chart accordingly. To do this, call the [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi#update) method that allows you to update the last data item or add a new one. import { AreaSeries, CandlestickSeries, createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addSeries(AreaSeries);areaSeries.setData([ // Other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addSeries(CandlestickSeries);candlestickSeries.setData([ // Other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// ...// Update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// Creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); We do not recommend calling [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi#setdata) to update the chart, as this method replaces all series data and can significantly affect the performance. * [Requirements](https://tradingview.github.io/lightweight-charts/docs/5.0#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs/5.0#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs/5.0#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/5.0#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/5.0#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/5.0#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/5.0#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/5.0#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/5.0#updating-the-data-in-a-series) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.2#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.2**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: 4.2 On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs/4.2#requirements "Direct link to Requirements") ---------------------------------------------------------------------------------------------------------------------- First of all, Lightweight Charts™ is _a client-side_ library. This means that it does not and cannot work on the server-side (i.e. NodeJS), at least out of the box. The code of `lightweight-charts` package targets the [_es2016_ language specification](https://262.ecma-international.org/7.0/) . Thus, all the browsers you will have to work with should support this language revision (see [this compatibility table](https://kangax.github.io/compat-table/es2016plus/) ). If you need to support the previous revisions, you could try to setup a transpilation of the package to the target you need to support in your build system (e.g. by using Babel). If you'll have any issues with that, please raise an issue on github with the details and we'll investigate possible ways to solve it. Installation[​](https://tradingview.github.io/lightweight-charts/docs/4.2#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/) : npm install --save lightweight-charts _Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._ ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs/4.2#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | CommonJS ⚠️ | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | `lightweight-charts.production.cjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | `lightweight-charts.development.cjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | \- | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | \- | `lightweight-charts.standalone.development.js` | ⚠️ **Deprecation note:** CommonJS support will be removed from the library at the start of 2024. License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/4.2#license-and-attribution "Direct link to License and attribution") ------------------------------------------------------------------------------------------------------------------------------------------------------- tip The Lightweight Charts™ license requires specifying TradingView as the product creator. You shall add the "attribution notice" from the [NOTICE](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file and a link to [https://www.tradingview.com/](https://www.tradingview.com/) to the page of your website or mobile application that is available to your users. As thanks for creating Lightweight Charts™, we'd be grateful if you add the attribution notice in a prominent place. Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/4.2#creating-a-chart "Direct link to Creating a chart") ---------------------------------------------------------------------------------------------------------------------------------- Once the library has been installed in your repo you're ready to create your first chart. First of all, in a file where you would like to create a chart you need to import the library: import { createChart } from 'lightweight-charts'; [`createChart`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/functions/createChart) is the entry-point for creating charts. You can use it to create as many charts as you need: import { createChart } from 'lightweight-charts';// ...// somewhere in your codeconst firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); The result of this function is a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IChartApi) object, which you need to use to work with a chart instance. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/4.2#creating-a-series "Direct link to Creating a series") ------------------------------------------------------------------------------------------------------------------------------------- Once your chart is created it is ready to display data. The basic primitive to display a data is [a series](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesApi) . There are different types of series: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series with desired type you need to use appropriate method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/IChartApi) . All of them have the same naming `addSeries`, where `` is a type of a series you'd like to create: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();const barSeries = chart.addBarSeries();const baselineSeries = chart.addBaselineSeries();// ... and so on Please look at [this page](https://tradingview.github.io/lightweight-charts/docs/4.2/series-types) for more information about different series types. Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/4.2#setting-and-updating-a-data "Direct link to Setting and updating a data") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Once your chart and series are created it's time to set data to the series. Note that regardless of the series type, the API calls are the same (the type of the data might be different though). ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/4.2#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR,});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR, borderVisible: false, wickUpColor: BAR_UP_COLOR, wickDownColor: BAR_DOWN_COLOR,});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/4.2#updating-the-data-in-a-series "Direct link to Updating the data in a series") In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well. But using [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesApi#setdata) very often might affect the performance and we do not recommend to do this. Also it replaces all series data with the new one, and probably this is not what you're looking for. Thus, to update the data you can use a method [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/4.2/api/interfaces/ISeriesApi#update) . It allows you to update the last data item or add a new one much faster without affecting the performance: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();areaSeries.setData([ // ... other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries();candlestickSeries.setData([ // ... other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// sometime later// update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); * [Requirements](https://tradingview.github.io/lightweight-charts/docs/4.2#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs/4.2#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs/4.2#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/4.2#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/4.2#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/4.2#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/4.2#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/4.2#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/4.2#updating-the-data-in-a-series) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.1#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.1**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: 4.1 On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs/4.1#requirements "Direct link to Requirements") ---------------------------------------------------------------------------------------------------------------------- First of all, Lightweight Charts™ is _a client-side_ library. This means that it does not and cannot work on the server-side (i.e. NodeJS), at least out of the box. The code of `lightweight-charts` package targets the [_es2016_ language specification](https://262.ecma-international.org/7.0/) . Thus, all the browsers you will have to work with should support this language revision (see [this compatibility table](https://kangax.github.io/compat-table/es2016plus/) ). If you need to support the previous revisions, you could try to setup a transpilation of the package to the target you need to support in your build system (e.g. by using Babel). If you'll have any issues with that, please raise an issue on github with the details and we'll investigate possible ways to solve it. Installation[​](https://tradingview.github.io/lightweight-charts/docs/4.1#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/) : npm install --save lightweight-charts _Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._ ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs/4.1#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | CommonJS ⚠️ | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | `lightweight-charts.production.cjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | `lightweight-charts.development.cjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | \- | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | \- | `lightweight-charts.standalone.development.js` | ⚠️ **Deprecation note:** CommonJS support will be removed from the library at the start of 2024. License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/4.1#license-and-attribution "Direct link to License and attribution") ------------------------------------------------------------------------------------------------------------------------------------------------------- tip The Lightweight Charts™ license requires specifying TradingView as the product creator. You shall add the "attribution notice" from the [NOTICE](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file and a link to [https://www.tradingview.com](https://www.tradingview.com/) to the page of your website or mobile application that is available to your users. As thanks for creating Lightweight Charts™, we'd be grateful if you add the attribution notice in a prominent place. Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/4.1#creating-a-chart "Direct link to Creating a chart") ---------------------------------------------------------------------------------------------------------------------------------- Once the library has been installed in your repo you're ready to create your first chart. First of all, in a file where you would like to create a chart you need to import the library: import { createChart } from 'lightweight-charts'; [`createChart`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/functions/createChart) is the entry-point for creating charts. You can use it to create as many charts as you need: import { createChart } from 'lightweight-charts';// ...// somewhere in your codeconst firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); The result of this function is a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IChartApi) object, which you need to use to work with a chart instance. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/4.1#creating-a-series "Direct link to Creating a series") ------------------------------------------------------------------------------------------------------------------------------------- Once your chart is created it is ready to display data. The basic primitive to display a data is [a series](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesApi) . There are different types of series: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series with desired type you need to use appropriate method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/IChartApi) . All of them have the same naming `addSeries`, where `` is a type of a series you'd like to create: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();const barSeries = chart.addBarSeries();const baselineSeries = chart.addBaselineSeries();// ... and so on Please look at [this page](https://tradingview.github.io/lightweight-charts/docs/4.1/series-types) for more information about different series types. Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/4.1#setting-and-updating-a-data "Direct link to Setting and updating a data") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Once your chart and series are created it's time to set data to the series. Note that regardless of the series type, the API calls are the same (the type of the data might be different though). ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/4.1#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR,});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR, borderVisible: false, wickUpColor: BAR_UP_COLOR, wickDownColor: BAR_DOWN_COLOR,});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/4.1#updating-the-data-in-a-series "Direct link to Updating the data in a series") In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well. But using [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesApi#setdata) very often might affect the performance and we do not recommend to do this. Also it replaces all series data with the new one, and probably this is not what you're looking for. Thus, to update the data you can use a method [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/4.1/api/interfaces/ISeriesApi#update) . It allows you to update the last data item or add a new one much faster without affecting the performance: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();areaSeries.setData([ // ... other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries();candlestickSeries.setData([ // ... other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// sometime later// update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); * [Requirements](https://tradingview.github.io/lightweight-charts/docs/4.1#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs/4.1#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs/4.1#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/4.1#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/4.1#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/4.1#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/4.1#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/4.1#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/4.1#updating-the-data-in-a-series) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/4.0#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **4.0**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: 4.0 On this page Requirements[​](https://tradingview.github.io/lightweight-charts/docs/4.0#requirements "Direct link to Requirements") ---------------------------------------------------------------------------------------------------------------------- First of all, Lightweight Charts™ is _a client-side_ library. This means that it does not and cannot work on the server-side (i.e. NodeJS), at least out of the box. The code of `lightweight-charts` package is targeted to [_es2016_ language specification](https://262.ecma-international.org/7.0/) . Thus, all the browsers you will have to work with should support this language revision (see [this compatibility table](https://kangax.github.io/compat-table/es2016plus/) ). If you need to support the previous revisions, you could try to setup a transpilation of the package to the target you need to support in your build system (e.g. by using Babel). If you'll have any issues with that, please raise an issue on github with the details and we'll investigate possible ways to solve it. Installation[​](https://tradingview.github.io/lightweight-charts/docs/4.0#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/) : npm install --save lightweight-charts _Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._ ### Build variants[​](https://tradingview.github.io/lightweight-charts/docs/4.0#build-variants "Direct link to Build variants") The library ships with the following build variants: | Dependencies included | Mode | ES module | CommonJS ⚠️ | IIFE (`window.LightweightCharts`) | | --- | --- | --- | --- | --- | | No | PROD | `lightweight-charts.production.mjs` | `lightweight-charts.production.cjs` | N/A | | No | DEV | `lightweight-charts.development.mjs` | `lightweight-charts.development.cjs` | N/A | | Yes (standalone) | PROD | `lightweight-charts.standalone.production.mjs` | \- | `lightweight-charts.standalone.production.js` | | Yes (standalone) | DEV | `lightweight-charts.standalone.development.mjs` | \- | `lightweight-charts.standalone.development.js` | ⚠️ **Deprecation note:** CommonJS support will be removed from the library at the start of 2024. License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/4.0#license-and-attribution "Direct link to License and attribution") ------------------------------------------------------------------------------------------------------------------------------------------------------- tip The Lightweight Charts™ license requires specifying TradingView as the product creator. You shall add the "attribution notice" from the [NOTICE](https://github.com/tradingview/lightweight-charts/blob/master/NOTICE) file and a link to [https://www.tradingview.com](https://www.tradingview.com/) to the page of your website or mobile application that is available to your users. As thanks for creating Lightweight Charts™, we'd be grateful if you add the attribution notice in a prominent place. Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/4.0#creating-a-chart "Direct link to Creating a chart") ---------------------------------------------------------------------------------------------------------------------------------- Once the library has been installed in your repo you're ready to create your first chart. First of all, in a file where you would like to create a chart you need to import the library: import { createChart } from 'lightweight-charts'; [`createChart`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/functions/createChart) is the entry-point for creating charts. You can use it to create as many charts as you need: import { createChart } from 'lightweight-charts';// ...// somewhere in your codeconst firstChart = createChart(document.getElementById('firstContainer'));const secondChart = createChart(document.getElementById('secondContainer')); The result of this function is a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IChartApi) object, which you need to use to work with a chart instance. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/4.0#creating-a-series "Direct link to Creating a series") ------------------------------------------------------------------------------------------------------------------------------------- Once your chart is created it is ready to display data. The basic primitive to display a data is [a series](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ISeriesApi) . There are different types of series: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series with desired type you need to use appropriate method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/IChartApi) . All of them have the same naming `addSeries`, where `` is a type of a series you'd like to create: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();const barSeries = chart.addBarSeries();const baselineSeries = chart.addBaselineSeries();// ... and so on Please look at [this page](https://tradingview.github.io/lightweight-charts/docs/4.0/series-types) for more information about different series types. Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/4.0#setting-and-updating-a-data "Direct link to Setting and updating a data") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Once your chart and series are created it's time to set data to the series. Note that regardless of the series type, the API calls are the same (the type of the data might be different though). ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/4.0#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ISeriesApi#setdata) method: const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR,});areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR, borderVisible: false, wickUpColor: BAR_UP_COLOR, wickDownColor: BAR_DOWN_COLOR,});candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/4.0#updating-the-data-in-a-series "Direct link to Updating the data in a series") In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well. But using [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ISeriesApi#setdata) very often might affect the performance and we do not recommend to do this. Also it replaces all series data with the new one, and probably this is not what you're looking for. Thus, to update the data you can use a method [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/4.0/api/interfaces/ISeriesApi#update) . It allows you to update the last data item or add a new one much faster without affecting the performance: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();areaSeries.setData([ // ... other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries();candlestickSeries.setData([ // ... other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// sometime later// update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); * [Requirements](https://tradingview.github.io/lightweight-charts/docs/4.0#requirements) * [Installation](https://tradingview.github.io/lightweight-charts/docs/4.0#installation) * [Build variants](https://tradingview.github.io/lightweight-charts/docs/4.0#build-variants) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/4.0#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/4.0#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/4.0#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/4.0#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/4.0#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/4.0#updating-the-data-in-a-series) --- # Getting started | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/3.8#__docusaurus_skipToContent_fallback) This is documentation for Lightweight Charts **3.8**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs) ** (5.1). Version: 3.8 On this page Installation[​](https://tradingview.github.io/lightweight-charts/docs/3.8#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/) : npm install --save lightweight-charts _Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._ License and attribution[​](https://tradingview.github.io/lightweight-charts/docs/3.8#license-and-attribution "Direct link to License and attribution") ------------------------------------------------------------------------------------------------------------------------------------------------------- tip The Lightweight Charts™ license requires specifying TradingView as the product creator. You shall add the "attribution notice" from the [NOTICE](https://github.com/tradingview/lightweight-charts/blob/013424ecbf672db80646fe51ee48b187e9b71cec/NOTICE) file and a link to [https://www.tradingview.com](https://www.tradingview.com/) to the page of your website or mobile application that is available to your users. As thanks for creating Lightweight Charts™, we'd be grateful if you add the attribution notice in a prominent place. Creating a chart[​](https://tradingview.github.io/lightweight-charts/docs/3.8#creating-a-chart "Direct link to Creating a chart") ---------------------------------------------------------------------------------------------------------------------------------- Once the library has been installed in your repo you're ready to create your first chart. First of all, in a file where you would like to create a chart you need to import the library: import { createChart } from 'lightweight-charts'; [`createChart`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/functions/createChart) is the entry-point for creating charts. You can use it to create as many charts as you need: import { createChart } from 'lightweight-charts';// ...// somewhere in your codeconst firstChart = createChart(firstContainer);const secondChart = createChart(secondContainer); The result of this function is a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IChartApi) object, which you need to use to work with a chart instance. Creating a series[​](https://tradingview.github.io/lightweight-charts/docs/3.8#creating-a-series "Direct link to Creating a series") ------------------------------------------------------------------------------------------------------------------------------------- Once your chart is created it is ready to display data. The basic primitive to display a data is [a series](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ISeriesApi) . There are different types of series: * Area * Bar * Baseline * Candlestick * Histogram * Line To create a series with desired type you need to use appropriate method from [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/IChartApi) . All of them have the same naming `addSeries`, where `` is a type of a series you'd like to create: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();const barSeries = chart.addBarSeries();const baselineSeries = chart.addBaselineSeries();// ... and so on Please look at [this page](https://tradingview.github.io/lightweight-charts/docs/3.8/series-types) for more information about different series types. Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types. Setting and updating a data[​](https://tradingview.github.io/lightweight-charts/docs/3.8#setting-and-updating-a-data "Direct link to Setting and updating a data") ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Once your chart and series are created it's time to set data to the series. Note that regardless of the series type, the API calls are the same (the type of the data might be different though). ### Setting the data to a series[​](https://tradingview.github.io/lightweight-charts/docs/3.8#setting-the-data-to-a-series "Direct link to Setting the data to a series") To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ISeriesApi#setdata) method: const chart = createChart(container);const areaSeries = chart.addAreaSeries();areaSeries.setData([ { time: '2018-12-22', value: 32.51 }, { time: '2018-12-23', value: 31.11 }, { time: '2018-12-24', value: 27.02 }, { time: '2018-12-25', value: 27.32 }, { time: '2018-12-26', value: 25.17 }, { time: '2018-12-27', value: 28.89 }, { time: '2018-12-28', value: 25.46 }, { time: '2018-12-29', value: 23.92 }, { time: '2018-12-30', value: 22.68 }, { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries();candlestickSeries.setData([ { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);chart.timeScale().fitContent(); ### Updating the data in a series[​](https://tradingview.github.io/lightweight-charts/docs/3.8#updating-the-data-in-a-series "Direct link to Updating the data in a series") In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well. But using [`ISeriesApi.setData`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ISeriesApi#setdata) very often might affect the performance and we do not recommend to do this. Also it replaces all series data with the new one, and probably this is not what you're looking for. Thus, to update the data you can use a method [`ISeriesApi.update`](https://tradingview.github.io/lightweight-charts/docs/3.8/api/interfaces/ISeriesApi#update) . It allows you to update the last data item or add a new one much faster without affecting the performance: import { createChart } from 'lightweight-charts';const chart = createChart(container);const areaSeries = chart.addAreaSeries();areaSeries.setData([ // ... other data items { time: '2018-12-31', value: 22.67 },]);const candlestickSeries = chart.addCandlestickSeries();candlestickSeries.setData([ // ... other data items { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },]);// sometime later// update the most recent barareaSeries.update({ time: '2018-12-31', value: 25 });candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });// creating the new barareaSeries.update({ time: '2019-01-01', value: 20 });candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); * [Installation](https://tradingview.github.io/lightweight-charts/docs/3.8#installation) * [License and attribution](https://tradingview.github.io/lightweight-charts/docs/3.8#license-and-attribution) * [Creating a chart](https://tradingview.github.io/lightweight-charts/docs/3.8#creating-a-chart) * [Creating a series](https://tradingview.github.io/lightweight-charts/docs/3.8#creating-a-series) * [Setting and updating a data](https://tradingview.github.io/lightweight-charts/docs/3.8#setting-and-updating-a-data) * [Setting the data to a series](https://tradingview.github.io/lightweight-charts/docs/3.8#setting-the-data-to-a-series) * [Updating the data in a series](https://tradingview.github.io/lightweight-charts/docs/3.8#updating-the-data-in-a-series) --- # Series | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/series-types#__docusaurus_skipToContent_fallback) Version: 5.1 On this page This article describes supported series types and ways to [customize](https://tradingview.github.io/lightweight-charts/docs/series-types#customization) them. Supported types[​](https://tradingview.github.io/lightweight-charts/docs/series-types#supported-types "Direct link to Supported types") ---------------------------------------------------------------------------------------------------------------------------------------- ### Area[​](https://tradingview.github.io/lightweight-charts/docs/series-types#area "Direct link to Area") * **Series Definition**: [`AreaSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/AreaSeries) * **Data format**: [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/AreaStyleOptions) This series is represented with a colored area between the [time scale](https://tradingview.github.io/lightweight-charts/docs/time-scale) and line connecting all data points: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];areaSeries.setData(data);chart.timeScale().fitContent(); ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/series-types#bar "Direct link to Bar") * **Series Definition**: [`BarSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/BarSeries) * **Data format**: [`BarData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BarStyleOptions) This series illustrates price movements with vertical bars. The length of each bar corresponds to the range between the highest and lowest price values. Open and close values are represented with the tick marks on the left and right side of the bar, respectively: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const barSeries = chart.addSeries(BarSeries, { upColor: '#26a69a', downColor: '#ef5350' });const data = [ { open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }, { open: 10.96, high: 11.90, low: 10.80, close: 11.50, time: 1643291876 }, { open: 11.50, high: 12.00, low: 11.30, close: 11.80, time: 1643378276 }, { open: 11.80, high: 12.20, low: 11.70, close: 12.00, time: 1643464676 }, { open: 12.00, high: 12.50, low: 11.90, close: 12.30, time: 1643551076 }, { open: 12.30, high: 12.80, low: 12.10, close: 12.60, time: 1643637476 }, { open: 12.60, high: 13.00, low: 12.50, close: 12.90, time: 1643723876 }, { open: 12.90, high: 13.50, low: 12.70, close: 13.20, time: 1643810276 }, { open: 13.20, high: 13.70, low: 13.00, close: 13.50, time: 1643896676 }, { open: 13.50, high: 14.00, low: 13.30, close: 13.80, time: 1643983076 }, { open: 13.80, high: 14.20, low: 13.60, close: 14.00, time: 1644069476 },];barSeries.setData(data);chart.timeScale().fitContent(); ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/series-types#baseline "Direct link to Baseline") * **Series Definition**: [`BaselineSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/BaselineSeries) * **Data format**: [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SingleValueData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions) This series is represented with two colored areas between the [the base value line](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/BaselineStyleOptions#basevalue) and line connecting all data points: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const baselineSeries = chart.addSeries(BaselineSeries, { baseValue: { type: 'price', price: 25 }, topLineColor: 'rgba( 38, 166, 154, 1)', topFillColor1: 'rgba( 38, 166, 154, 0.28)', topFillColor2: 'rgba( 38, 166, 154, 0.05)', bottomLineColor: 'rgba( 239, 83, 80, 1)', bottomFillColor1: 'rgba( 239, 83, 80, 0.05)', bottomFillColor2: 'rgba( 239, 83, 80, 0.28)' });const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];baselineSeries.setData(data);chart.timeScale().fitContent(); ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/series-types#candlestick "Direct link to Candlestick") * **Series Definition**: [`CandlestickSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/CandlestickSeries) * **Data format**: [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions) This series illustrates price movements with candlesticks. The solid body of each candlestick represents the open and close values for the time period. Vertical lines, known as wicks, above and below the candle body represent the high and low values, respectively: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const candlestickSeries = chart.addSeries(CandlestickSeries, { upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350' });const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }];candlestickSeries.setData(data);chart.timeScale().fitContent(); ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/series-types#histogram "Direct link to Histogram") * **Series Definition**: [`HistogramSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/HistogramSeries) * **Data format**: [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HistogramStyleOptions) This series illustrates the distribution of values with columns: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const histogramSeries = chart.addSeries(HistogramSeries, { color: '#26a69a' });const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922, color: 'red' }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722, color: 'red' }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922, color: 'red' }];histogramSeries.setData(data);chart.timeScale().fitContent(); ### Line[​](https://tradingview.github.io/lightweight-charts/docs/series-types#line "Direct link to Line") * **Series Definition**: [`LineSeries`](https://tradingview.github.io/lightweight-charts/docs/api/variables/LineSeries) * **Data format**: [`LineData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon) and [`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions) This series is represented with a set of data points connected by straight line segments: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];lineSeries.setData(data);chart.timeScale().fitContent(); ### Custom series (plugins)[​](https://tradingview.github.io/lightweight-charts/docs/series-types#custom-series-plugins "Direct link to Custom series (plugins)") The library enables you to create custom series types, also known as series plugins, to expand its functionality. With this feature, you can add new series types, indicators, and other visualizations. To define a custom series type, create a class that implements the [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ICustomSeriesPaneView) interface. This class defines the rendering code that Lightweight Charts™ uses to draw the series on the chart. Once your custom series type is defined, it can be added to any chart instance using the [`addCustomSeries()`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addcustomseries) method. Custom series types function like any other series. For more information, refer to the [Plugins](https://tradingview.github.io/lightweight-charts/docs/plugins/intro) article. Customization[​](https://tradingview.github.io/lightweight-charts/docs/series-types#customization "Direct link to Customization") ---------------------------------------------------------------------------------------------------------------------------------- Each series type offers a unique set of customization options listed on the [`SeriesStyleOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesStyleOptionsMap) page. You can adjust series options in two ways: * Specify the default options using the corresponding parameter while creating a series: // Change default top & bottom colors of an area series in creating timeconst series = chart.addSeries(AreaSeries, { topColor: 'red', bottomColor: 'green',}); * Use the [`ISeriesApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#applyoptions) method to apply other options on the fly: // Updating candlestick series options on the flycandlestickSeries.applyOptions({ upColor: 'red', downColor: 'blue',}); * [Supported types](https://tradingview.github.io/lightweight-charts/docs/series-types#supported-types) * [Area](https://tradingview.github.io/lightweight-charts/docs/series-types#area) * [Bar](https://tradingview.github.io/lightweight-charts/docs/series-types#bar) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/series-types#baseline) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/series-types#candlestick) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/series-types#histogram) * [Line](https://tradingview.github.io/lightweight-charts/docs/series-types#line) * [Custom series (plugins)](https://tradingview.github.io/lightweight-charts/docs/series-types#custom-series-plugins) * [Customization](https://tradingview.github.io/lightweight-charts/docs/series-types#customization) --- # Chart types | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/chart-types#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Lightweight Charts offers different types of charts to suit various data visualization needs. This article provides an overview of the available chart types and how to create them. Standard Time-based Chart[​](https://tradingview.github.io/lightweight-charts/docs/chart-types#standard-time-based-chart "Direct link to Standard Time-based Chart") --------------------------------------------------------------------------------------------------------------------------------------------------------------------- The standard time-based chart is the most common type, suitable for displaying time series data. * **Creation method**: [`createChart`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart) * **Horizontal scale**: Time-based * **Use case**: General-purpose charting for financial and time series data import { createChart } from 'lightweight-charts';const chart = createChart(document.getElementById('container'), options); This chart type uses time values for the horizontal scale and is ideal for most financial and time series data visualizations. const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];areaSeries.setData(data);chart.timeScale().fitContent(); Yield Curve Chart[​](https://tradingview.github.io/lightweight-charts/docs/chart-types#yield-curve-chart "Direct link to Yield Curve Chart") --------------------------------------------------------------------------------------------------------------------------------------------- The yield curve chart is specifically designed for displaying yield curves, common in financial analysis. * **Creation method**: [`createYieldCurveChart`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createYieldCurveChart) * **Horizontal scale**: Linearly spaced, defined in monthly time duration units * **Key differences**: * Whitespace is ignored for crosshair and grid lines * Specialized for yield curve representation import { createYieldCurveChart } from 'lightweight-charts';const chart = createYieldCurveChart(document.getElementById('container'), options); Use this chart type when you need to visualize yield curves or similar financial data where the horizontal scale represents time durations rather than specific dates. tip If you want to spread out the beginning of the plot further and don't need a linear time scale, you can enforce a minimum spacing around each point by increasing the [`minBarSpacing`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minbarspacing) option in the TimeScaleOptions. To prevent the rest of the chart from spreading too wide, adjust the `baseResolution` to a larger number, such as `12` (months). const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } }, yieldCurve: { baseResolution: 1, minimumTimeRange: 10, startTimeRange: 3 }, handleScroll: false, handleScale: false,};const chart = createYieldCurveChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const curve = [{ time: 1, value: 5.378 }, { time: 2, value: 5.372 }, { time: 3, value: 5.271 }, { time: 6, value: 5.094 }, { time: 12, value: 4.739 }, { time: 24, value: 4.237 }, { time: 36, value: 4.036 }, { time: 60, value: 3.887 }, { time: 84, value: 3.921 }, { time: 120, value: 4.007 }, { time: 240, value: 4.366 }, { time: 360, value: 4.290 }];lineSeries.setData(curve);chart.timeScale().fitContent(); Options Chart (Price-based)[​](https://tradingview.github.io/lightweight-charts/docs/chart-types#options-chart-price-based "Direct link to Options Chart (Price-based)") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The options chart is a specialized type that uses price values on the horizontal scale instead of time. * **Creation method**: [`createOptionsChart`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createOptionsChart) * **Horizontal scale**: Price-based (numeric) * **Use case**: Visualizing option chains, price distributions, or any data where price is the primary x-axis metric import { createOptionsChart } from 'lightweight-charts';const chart = createOptionsChart(document.getElementById('container'), options); This chart type is particularly useful for financial instruments like options, where the price is a more relevant x-axis metric than time. const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } },};const chart = createOptionsChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const data = [];for (let i = 0; i < 1000; i++) { data.push({ time: i * 0.25, value: Math.sin(i / 100) + i / 500, });}lineSeries.setData(data);chart.timeScale().fitContent(); Custom Horizontal Scale Chart[​](https://tradingview.github.io/lightweight-charts/docs/chart-types#custom-horizontal-scale-chart "Direct link to Custom Horizontal Scale Chart") --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- For advanced use cases, Lightweight Charts allows creating charts with custom horizontal scale behavior. * **Creation method**: [`createChartEx`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx) * **Horizontal scale**: Custom-defined * **Use case**: Specialized charting needs with non-standard horizontal scales import { createChartEx, defaultHorzScaleBehavior } from 'lightweight-charts';const customBehavior = new (defaultHorzScaleBehavior())();// Customize the behavior as neededconst chart = createChartEx(document.getElementById('container'), customBehavior, options); This method provides the flexibility to define custom horizontal scale behavior, allowing for unique and specialized chart types. Choosing the Right Chart Type[​](https://tradingview.github.io/lightweight-charts/docs/chart-types#choosing-the-right-chart-type "Direct link to Choosing the Right Chart Type") --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Use `createChart` for most standard time-based charting needs. * Choose `createYieldCurveChart` when working specifically with yield curves or similar financial data. * Opt for `createOptionsChart` when you need to visualize data with price as the primary horizontal axis, such as option chains. * Use `createChartEx` when you need a custom horizontal scale behavior that differs from the standard time-based or price-based scales. Each chart type provides specific functionality and is optimized for different use cases. Consider your data structure and visualization requirements when selecting the appropriate chart type for your application. * [Standard Time-based Chart](https://tradingview.github.io/lightweight-charts/docs/chart-types#standard-time-based-chart) * [Yield Curve Chart](https://tradingview.github.io/lightweight-charts/docs/chart-types#yield-curve-chart) * [Options Chart (Price-based)](https://tradingview.github.io/lightweight-charts/docs/chart-types#options-chart-price-based) * [Custom Horizontal Scale Chart](https://tradingview.github.io/lightweight-charts/docs/chart-types#custom-horizontal-scale-chart) * [Choosing the Right Chart Type](https://tradingview.github.io/lightweight-charts/docs/chart-types#choosing-the-right-chart-type) --- # Price scale | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/price-scale#__docusaurus_skipToContent_fallback) Version: 5.1 On this page The **price scale** (or price axis) is a vertical scale that maps prices to coordinates and vice versa. The conversion rules depend on the price scale mode, the chart's height, and the visible part of the data. ![Price scales](https://tradingview.github.io/lightweight-charts/assets/images/price-scales-5ff372fd08578f74710940c724ad5df4.png "Price scales") Create price scale[​](https://tradingview.github.io/lightweight-charts/docs/price-scale#create-price-scale "Direct link to Create price scale") ------------------------------------------------------------------------------------------------------------------------------------------------ By default, a chart has two visible price scales: left and right. Additionally, you can create an unlimited number of overlay price scales, which remain hidden in the UI. Overlay price scales allow series to be plotted without affecting the existing visible scales. This is particularly useful for indicators like Volume, where values can differ significantly from price data. To create an overlay price scale, assign [`priceScaleId`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricescaleid) to a series. Note that the `priceScaleId` value should differ from price scale IDs on the left and right. The chart will create an overlay price scale with the provided ID. If a price scale with such ID already exists, a series will be attached to the existing price scale. Further, you can use the provided price scale ID to retrieve its API object using the [`IChartApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#pricescale) method. See the [Price and Volume](https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-and-volume) article for an example of adding a Volume indicator using an overlay price scale. Modify price scale[​](https://tradingview.github.io/lightweight-charts/docs/price-scale#modify-price-scale "Direct link to Modify price scale") ------------------------------------------------------------------------------------------------------------------------------------------------ To modify the left price scale, use the [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#leftpricescale) option. For the right price scale, use [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#rightpricescale) . To change the default settings for an overlay price scale, use the [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#overlaypricescales) option. You can use the [`IChartApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#pricescale) method to retrieve the API object for any price scale. Similarly, to access the API object for the price scale that a series is attached to, use the [`ISeriesApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#pricescale) method. Remove price scale[​](https://tradingview.github.io/lightweight-charts/docs/price-scale#remove-price-scale "Direct link to Remove price scale") ------------------------------------------------------------------------------------------------------------------------------------------------ The default left and right price scales cannot be removed, you can only hide them by setting the [`visible`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#visible) option to `false`. An overlay price scale exists as long as at least one series is attached to it. To remove an overlay price scale, remove all series attached to this price scale. * [Create price scale](https://tradingview.github.io/lightweight-charts/docs/price-scale#create-price-scale) * [Modify price scale](https://tradingview.github.io/lightweight-charts/docs/price-scale#modify-price-scale) * [Remove price scale](https://tradingview.github.io/lightweight-charts/docs/price-scale#remove-price-scale) --- # Time scale | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/time-scale#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Overview[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#overview "Direct link to Overview") ----------------------------------------------------------------------------------------------------------------- Time scale (or time axis) is a horizontal scale that displays the time of data points at the bottom of the chart. ![Time scale]() The horizontal scale can also represent price or other custom values. Refer to the [Chart types](https://tradingview.github.io/lightweight-charts/docs/chart-types) article for more information. ### Time scale appearance[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#time-scale-appearance "Direct link to Time scale appearance") Use [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) to adjust the time scale appearance. You can specify these options in two ways: * On chart initialization. To do this, provide the desired options as a [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#timescale) parameter when calling [`createChart`](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChart) . * On the fly using either the [`ITimeScaleApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#applyoptions) or [`IChartApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#applyoptions) method. Both methods produce the same result. ### Time scale API[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#time-scale-api "Direct link to Time scale API") Call the [`IChartApi.timeScale`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#timescale) method to get an instance of the [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) interface. This interface provides an extensive API for controlling the time scale. For example, you can adjust the visible range, convert a time point or [index](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) to a coordinate, and subscribe to events. chart.timeScale().resetTimeScale(); Visible range[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#visible-range "Direct link to Visible range") -------------------------------------------------------------------------------------------------------------------------------- Visible range is a chart area that is currently visible on the canvas. This area can be measured with both [data](https://tradingview.github.io/lightweight-charts/docs/time-scale#data-range) and [logical](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) range. Data range usually includes bar timestamps, while logical range has bar indices. You can adjust the visible range using the following methods: * [`setVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblerange) * [`getVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblerange) * [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) * [`getVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#getvisiblelogicalrange) ### Data range[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#data-range "Direct link to Data range") The data range includes only values from the first to the last bar visible on the chart. If the visible area has empty space, this part of the scale is not included in the data range. Note that you cannot extrapolate time with the [`setVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblerange) method. For example, the chart does not have data prior `2018-01-01` date. If you set the visible range from `2016-01-01`, it will be automatically adjusted to `2018-01-01`. If you want to adjust the visible range more flexible, operate with the [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) instead. ### Logical range[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range "Direct link to Logical range") The logical range represents a continuous line of values. These values are logical [indices](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/Logical) on the scale that illustrated as red lines in the image below: ![Logical range]() The logical range starts from the first data point across all series, with negative indices before it and positive ones after. The indices can have fractional parts. The integer part represents the fully visible bar, while the fractional part indicates partial visibility. For example, the `5.2` index means that the fifth bar is fully visible, while the sixth bar is 20% visible. A half-index, such as `3.5`, represents the middle of the bar. In the library, the logical range is represented with the [`LogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/type-aliases/LogicalRange) object. This object has the `from` and `to` properties, which are logical indices on the time scale. For example, the visible logical range on the chart above is approximately from `-4.73` to `5.05`. The [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) method allows you to specify the visible range beyond the bounds of the available data. This can be useful for setting a [chart margin](https://tradingview.github.io/lightweight-charts/docs/time-scale#chart-margin) or aligning series visually. Chart margin[​](https://tradingview.github.io/lightweight-charts/docs/time-scale#chart-margin "Direct link to Chart margin") ----------------------------------------------------------------------------------------------------------------------------- Margin is the space between the chart's borders and the series. It depends on the following time scale options: * [`barSpacing`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#barspacing) . The default value is `6`. * [`rightOffset`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#rightoffset) . The default value is `0`. You can specify these options as described [above](https://tradingview.github.io/lightweight-charts/docs/time-scale#time-scale-appearance) . Note that if a series contains only a few data points, the chart may have a large margin on the left side. ![A series with a few points](https://tradingview.github.io/lightweight-charts/assets/images/extra-margin-c1f99247fd0192e01717a0e48e073f13.png) In this case, you can call the [`fitContent`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#fitcontent) method that adjust the view and fits all data within the chart. chart.timeScale().fitContent(); If calling `fitContent` has no effect, it might be due to how the library displays data. The library allocates specific width for each data point to maintain consistency between different chart types. For example, for line series, the plot point is placed at the center of this allocated space, while candlestick series use most of the width for the candle body. The allocated space for each data point is proportional to the chart width. As a result, series with fewer data points may have a small margin on both sides. ![Margin](https://tradingview.github.io/lightweight-charts/assets/images/margin-ba3ba588b8212ea7b6415220ab39424a.png) You can specify the [logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) with the [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) method to display the series exactly to the edges. For example, the code sample below adjusts the range by half a bar-width on both sides. const vr = chart.timeScale().getVisibleLogicalRange();chart.timeScale().setVisibleLogicalRange({ from: vr.from + 0.5, to: vr.to - 0.5 }); * [Overview](https://tradingview.github.io/lightweight-charts/docs/time-scale#overview) * [Time scale appearance](https://tradingview.github.io/lightweight-charts/docs/time-scale#time-scale-appearance) * [Time scale API](https://tradingview.github.io/lightweight-charts/docs/time-scale#time-scale-api) * [Visible range](https://tradingview.github.io/lightweight-charts/docs/time-scale#visible-range) * [Data range](https://tradingview.github.io/lightweight-charts/docs/time-scale#data-range) * [Logical range](https://tradingview.github.io/lightweight-charts/docs/time-scale#logical-range) * [Chart margin](https://tradingview.github.io/lightweight-charts/docs/time-scale#chart-margin) --- # Panes | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/panes#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Panes are essential elements that help segregate data visually within a single chart. Panes are useful when you have a chart that needs to show more than one kind of data. For example, you might want to see a stock's price over time in one pane and its trading volume in another. This setup helps users get a fuller picture without cluttering the chart. By default, Lightweight Charts™ has a single pane, however, you can add more panes to the chart to display different series in separate areas. For detailed examples and code snippets on how to implement panes in your charts [see tutorial](https://tradingview.github.io/lightweight-charts/tutorials/how_to/panes) . Customization Options[​](https://tradingview.github.io/lightweight-charts/docs/panes#customization-options "Direct link to Customization Options") --------------------------------------------------------------------------------------------------------------------------------------------------- Lightweight Charts™ offers a few [customization options](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions) to tailor the appearance and behavior of panes: * [Pane Separator Color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorcolor) : Customize the color of the pane separators to match the chart design or improve visibility. * [Separator Hover Color](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#separatorhovercolor) : Enhance user interaction by changing the color of separators on mouse hover. * [Resizable Panes](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutPanesOptions#enableresize) : Opt to enable or disable the resizing of panes by the user, offering flexibility in how data is displayed. Managing Panes[​](https://tradingview.github.io/lightweight-charts/docs/panes#managing-panes "Direct link to Managing Panes") ------------------------------------------------------------------------------------------------------------------------------ While the specific methods to manipulate panes are covered in the detailed [example](https://tradingview.github.io/lightweight-charts/tutorials/how_to/panes) , it's important to note that Lightweight Charts™ provides an [API for pane management](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi) . This includes adding new panes, moving series between panes, adjusting pane height, and removing panes. The API ensures that developers have full control over the pane lifecycle and organization within their charts. * [Customization Options](https://tradingview.github.io/lightweight-charts/docs/panes#customization-options) * [Managing Panes](https://tradingview.github.io/lightweight-charts/docs/panes#managing-panes) --- # Time zones | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/time-zones#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Overview[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#overview "Direct link to Overview") ----------------------------------------------------------------------------------------------------------------- Lightweight Charts™ **does not** natively **support** time zones. If necessary, you should handle time zone adjustments manually. The library processes all date and time values in UTC. To support time zones, adjust each bar's timestamp in your dataset based on the appropriate time zone offset. Therefore, a UTC timestamp should correspond to the local time in the target time zone. Consider the example. A data point has the `2021-01-01T10:00:00.000Z` timestamp in UTC. You want to display it in the `Europe/Moscow` time zone, which has the `UTC+03:00` offset according to the [IANA time zone database](https://www.iana.org/time-zones) . To do this, adjust the original UTC timestamp by adding 3 hours. Therefore, the new timestamp should be `2021-01-01T13:00:00.000Z`. info When converting time zones, consider the following: * Adding a time zone offset could change not only the time but the date as well. * An offset may vary due to DST (Daylight Saving Time) or other regional adjustments. * If your data is measured in business days and does not include a time component, in most cases, you should not adjust it to a time zone. Approaches[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#approaches "Direct link to Approaches") ----------------------------------------------------------------------------------------------------------------------- Consider the approaches below to convert time values to the required time zone. ### Using pure JavaScript[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-pure-javascript "Direct link to Using pure JavaScript") For more information on this approach, refer to [StackOverflow](https://stackoverflow.com/a/54127122/3893439) . function timeToTz(originalTime, timeZone) { const zonedDate = new Date(new Date(originalTime * 1000).toLocaleString('en-US', { timeZone })); return zonedDate.getTime() / 1000;} If you only need to support a client (local) time zone, you can use the following function: function timeToLocal(originalTime) { const d = new Date(originalTime * 1000); return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;} ### Using the date-fns-tz library[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-date-fns-tz-library "Direct link to Using the date-fns-tz library") You can use the `utcToZonedTime` function from the [`date-fns-tz`](https://github.com/marnusw/date-fns-tz) library as follows: import { utcToZonedTime } from 'date-fns-tz';function timeToTz(originalTime, timeZone) { const zonedDate = utcToZonedTime(new Date(originalTime * 1000), timeZone); return zonedDate.getTime() / 1000;} ### Using the IANA time zone database[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-iana-time-zone-database "Direct link to Using the IANA time zone database") If you process a large dataset and approaches above do not meet your performance requirements, consider using the [`tzdata`](https://www.npmjs.com/package/tzdata) . This approach can significantly improve performance for the following reasons: * You do not need to calculate the time zone offset for every data point individually. Instead, you can look up the correct offset just once for the first timestamp using a fast binary search. * After finding the starting offset, you go through the rest data and check whether an offset should be changed, for example, because of DST starting/ending. Why are time zones not supported?[​](https://tradingview.github.io/lightweight-charts/docs/time-zones#why-are-time-zones-not-supported "Direct link to Why are time zones not supported?") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The approaches above were not implemented in Lightweight Charts™ for the following reasons: * Using [pure JavaScript](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-pure-javascript) is slow. In our tests, processing 100,000 data points took over 20 seconds. * Using the [date-fns-tz library](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-date-fns-tz-library) introduces additional dependencies and is also slow. In our tests, processing 100,000 data points took 18 seconds. * Incorporating the [IANA time zone database](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-iana-time-zone-database) increases the bundle size by [29.9 kB](https://bundlephobia.com/package/tzdata) , which is nearly the size of the entire Lightweight Charts™ library. Since time zone support is not required for all users, it is intentionally left out of the library to maintain high performance and a lightweight package size. * [Overview](https://tradingview.github.io/lightweight-charts/docs/time-zones#overview) * [Approaches](https://tradingview.github.io/lightweight-charts/docs/time-zones#approaches) * [Using pure JavaScript](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-pure-javascript) * [Using the date-fns-tz library](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-date-fns-tz-library) * [Using the IANA time zone database](https://tradingview.github.io/lightweight-charts/docs/time-zones#using-the-iana-time-zone-database) * [Why are time zones not supported?](https://tradingview.github.io/lightweight-charts/docs/time-zones#why-are-time-zones-not-supported) --- # Plugins | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Plugins allow you to extend the library's functionality and render custom elements, such as new series, drawing tools, indicators, and watermarks. You can create plugins of the following types: * [Custom series](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#custom-series) — define new types of series. * [Primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#primitives) — define custom visualizations, drawing tools, and chart annotations that can be attached to an existing series ([series primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#series-primitives) ) or chart pane ([pane primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#pane-primitives) ). Tips * Use the [create-lwc-plugin](https://www.npmjs.com/package/create-lwc-plugin) npm package to quickly scaffold a project for your custom plugin. * Explore the [Plugin Examples Demo](https://tradingview.github.io/lightweight-charts/plugin-examples) page that hosts interactive examples of heatmaps, alerts, watermarks, and tooltips implemented with plugins. You can find the code of these examples in the [`plugin-examples`](https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples) folder in the Lightweight Charts™ repository. Custom series[​](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#custom-series "Direct link to Custom series") ----------------------------------------------------------------------------------------------------------------------------------- Custom series allow you to define new types of series with custom data structures and rendering logic. For implementation details, refer to the [Custom Series Types](https://tradingview.github.io/lightweight-charts/docs/plugins/custom_series) article. Use the [`addCustomSeries`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#addcustomseries) method to add a custom series to the chart. Then, you can manage it through the same API available for built-in series. For example, call the [`setData`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#setdata) method to populate the series with data. javascript class MyCustomSeries { /* Class implementing the ICustomSeriesPaneView interface */}// Create an instantiated custom seriesconst customSeriesInstance = new MyCustomSeries();const chart = createChart(document.getElementById('container'));const myCustomSeries = chart.addCustomSeries(customSeriesInstance, { // Options for MyCustomSeries customOption: 10,});const data = [ { time: 1642425322, value: 123, customValue: 456 }, /* ... more data */];myCustomSeries.setData(data); Primitives[​](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#primitives "Direct link to Primitives") -------------------------------------------------------------------------------------------------------------------------- Primitives allow you to define custom visualizations, drawing tools, and chart annotations. You can render them at different levels in the visual stack to create complex, layered compositions. ### Series primitives[​](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#series-primitives "Direct link to Series primitives") Series primitives are attached to a specific series and can render on the main pane, price and time scales. For implementation details, refer to the [Series Primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/series-primitives) article. Use the [`attachPrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#attachprimitive) method to add a primitive to the chart and attach it to the series. javascript class MyCustomPrimitive { /* Class implementing the ISeriesPrimitive interface */}// Create an instantiated series primitiveconst myCustomPrimitive = new MyCustomPrimitive();const chart = createChart(document.getElementById('container'));const lineSeries = chart.addSeries(LineSeries);const data = [ { time: 1642425322, value: 123 }, /* ... more data */];// Attach the primitive to the serieslineSeries.attachPrimitive(myCustomPrimitive); ### Pane primitives[​](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#pane-primitives "Direct link to Pane primitives") Pane primitives are attached to a chart pane rather than a specific series. You can use them to create chart-wide annotations and features like watermarks. For implementation details, refer to the [Pane Primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/pane-primitives) article. caution Note that pane primitives cannot render on the price or time scale. Use the [`attachPrimitive`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPaneApi#attachprimitive) method to add a primitive to the chart and attach it to the pane. class MyCustomPanePrimitive { /* Class implementing the IPanePrimitive interface */}// Create an instantiated pane primitiveconst myCustomPanePrimitive = new MyCustomPanePrimitive();const chart = createChart(document.getElementById('container'));// Get the main paneconst mainPane = chart.panes()[0];// Attach the primitive to the panemainPane.attachPrimitive(myCustomPanePrimitive); * [Custom series](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#custom-series) * [Primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#primitives) * [Series primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#series-primitives) * [Pane primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#pane-primitives) --- # From v2 to v3 | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#__docusaurus_skipToContent_fallback) Version: 5.1 On this page Lightweight Charts™ library 3.0 announces the major improvements: supporting two price scales and improving the time scale API. In order of keep the API clear and consistent, we decided to allow breaking change of the API. In this document you can find the migration guide from the previous version to 3.0. Time Scale API[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#time-scale-api "Direct link to Time Scale API") ------------------------------------------------------------------------------------------------------------------------------------------------- Previously, to handle changing visible time range you needed to use `subscribeVisibleTimeRangeChange` and `unsubscribeVisibleTimeRangeChange` to subscribe and unsubscribe from visible range events. These methods were available in the chart object (e.g. you call it like `chart.subscribeVisibleTimeRangeChange(func)`). In 3.0 in order to make API more consistent with the new API we decided to move these methods to [ITimeScaleApi](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) (along with the new subscription methods [`ITimeScaleApi.subscribeVisibleLogicalRangeChange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) and [`ITimeScaleApi.unsubscribeVisibleLogicalRangeChange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#unsubscribevisiblelogicalrangechange) ). So, to migrate your code to 3.0 you just need to replace: * `chart.subscribeVisibleTimeRangeChange` with `chart.timeScale().subscribeVisibleTimeRangeChange` * `chart.unsubscribeVisibleTimeRangeChange` with `chart.timeScale().unsubscribeVisibleTimeRangeChange` Two price scales[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#two-price-scales "Direct link to Two price scales") ------------------------------------------------------------------------------------------------------------------------------------------------------- We understand disadvantages of breaking changes in the API, so we have not removed support of the current API at all, but have deprecated it, so the most common cases will continue to work. You can refer to the new API [here](https://tradingview.github.io/lightweight-charts/docs/price-scale) . Following are migration rules. ### Default behavior[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#default-behavior "Direct link to Default behavior") Default behavior is not changed. If you do not specify price scale options, the chart will have the right price scale visible and all the series will assign to it. ### Left price scale[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#left-price-scale "Direct link to Left price scale") If you need the price scale to be drawn on the left side, you should make the following changes. instead of const chart = LightweightCharts.createChart(container, { priceScale: { position: 'left', },}); use const chart = LightweightCharts.createChart(container, { rightPriceScale: { visible: false, }, leftPriceScale: { visible: true, },}); then specify target price scale while creating a series: const histSeries = chart.addHistogramSeries({ priceScaleId: 'left',}); New version fully supports this case via the old API, however this support will be removed in the future releases. ### No price scale[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#no-price-scale "Direct link to No price scale") To create chart without any visible price scale, instead of const chart = LightweightCharts.createChart(container, { priceScale: { position: 'none', },}); use const chart = LightweightCharts.createChart(container, { leftPriceScale: { visible: false, }, rightPriceScale: { visible: false, },}); New version fully supports this case via the old API, however this support will be removed in the future releases. ### Creating overlay[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#creating-overlay "Direct link to Creating overlay") To create an overlay series, instead of const histogramSeries = chart.addHistogramSeries({ overlay: true,}); use const histogramSeries = chart.addHistogramSeries({ // or any other _the same_ id for all overlay series priceScaleId: '',}); New version fully supports this case via the old API, however this support will be removed in the future releases. ### Move price scale from right to left or vice versa[​](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#move-price-scale-from-right-to-left-or-vice-versa "Direct link to Move price scale from right to left or vice versa") To do this, instead of const chart = LightweightCharts.createChart(container);const mainSeries = chart.addLineSeries();// ...chart.applyOptions({ priceScale: { position: 'left', },}); use const chart = LightweightCharts.createChart(container);const mainSeries = chart.addLineSeries();// ...chart.applyOptions({ leftPriceScale: { visible: true, }, rightPriceScale: { visible: false, },});mainSeries.applyOptions({ priceScaleId: 'left',}); New version does not support this case via the old API, so, if you use it, you should migrate your code in order of keeping it working. * [Time Scale API](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#time-scale-api) * [Two price scales](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#two-price-scales) * [Default behavior](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#default-behavior) * [Left price scale](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#left-price-scale) * [No price scale](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#no-price-scale) * [Creating overlay](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#creating-overlay) * [Move price scale from right to left or vice versa](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#move-price-scale-from-right-to-left-or-vice-versa) --- # iOS wrapper | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/ios#__docusaurus_skipToContent_fallback) Version: 5.1 On this page note You can find the source code of the Lightweight Charts™ iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS) . info This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0` in the near future. You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view. Installation[​](https://tradingview.github.io/lightweight-charts/docs/ios#installation "Direct link to Installation") ---------------------------------------------------------------------------------------------------------------------- info Requires iOS 10.0+ ### CocoaPods[​](https://tradingview.github.io/lightweight-charts/docs/ios#cocoapods "Direct link to CocoaPods") [CocoaPods](https://cocoapods.org/) is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate LightweightCharts into your Xcode project using CocoaPods, specify it in your `Podfile`: pod 'LightweightCharts', '~> 3.8.0' ### Swift Package Manager[​](https://tradingview.github.io/lightweight-charts/docs/ios#swift-package-manager "Direct link to Swift Package Manager") The [Swift Package Manager](https://swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the `swift` compiler. Once you have your Swift package set up, adding LightweightCharts as a dependency is as easy as adding it to the `dependencies` value of your `Package.swift`. dependencies: [ .package(url: "https://github.com/tradingview/LightweightChartsIOS", .upToNextMajor(from: "4.0.0"))] Usage[​](https://tradingview.github.io/lightweight-charts/docs/ios#usage "Direct link to Usage") ------------------------------------------------------------------------------------------------- Once the library has been installed in your repo, you're ready to create your first chart. First of all, in a file where you would like to create a chart, you need to import the library: import LightweightCharts Create instance of LightweightCharts, which is a subclass of UIView, and add it to your view. var chart: LightweightCharts!// ...chart = LightweightCharts()view.addSubview(chart)// ... setup layout Add any series to the chart and store a reference to it. var series: BarSeries!// ...series = chart.addBarSeries(options: nil) Add data to the series. let data = [ BarData(time: .string("2018-10-19"), open: 180.34, high: 180.99, low: 178.57, close: 179.85), BarData(time: .string("2018-10-22"), open: 180.82, high: 181.40, low: 177.56, close: 178.75), BarData(time: .string("2018-10-23"), open: 175.77, high: 179.49, low: 175.44, close: 178.53), BarData(time: .string("2018-10-24"), open: 178.58, high: 182.37, low: 176.31, close: 176.97), BarData(time: .string("2018-10-25"), open: 177.52, high: 180.50, low: 176.83, close: 179.07)]// ...series.setData(data: data) How to run the provided example[​](https://tradingview.github.io/lightweight-charts/docs/ios#how-to-run-the-provided-example "Direct link to How to run the provided example") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The [GitHub repository](https://github.com/tradingview/LightweightChartsIOS) for LightweightChartsIOS contains an example of the library in action. To run the example, start by cloning the repository, go to the _Example_ directory, and then run pod install * [Installation](https://tradingview.github.io/lightweight-charts/docs/ios#installation) * [CocoaPods](https://tradingview.github.io/lightweight-charts/docs/ios#cocoapods) * [Swift Package Manager](https://tradingview.github.io/lightweight-charts/docs/ios#swift-package-manager) * [Usage](https://tradingview.github.io/lightweight-charts/docs/ios#usage) * [How to run the provided example](https://tradingview.github.io/lightweight-charts/docs/ios#how-to-run-the-provided-example) --- # Android wrapper | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/android#__docusaurus_skipToContent_fallback) Version: 5.1 On this page note You can find the source code of the Lightweight Charts™ Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android) . info This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0` in the near future. You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view. Installation[​](https://tradingview.github.io/lightweight-charts/docs/android#installation "Direct link to Installation") -------------------------------------------------------------------------------------------------------------------------- info Requires minSdkVersion 21, and installed WebView with support of ES6 In `/build.gradle` allprojects { repositories { google() mavenCentral() }} In `/gradle_module/build.gradle` dependencies { //... implementation 'com.tradingview:lightweightcharts:3.8.0'} Usage[​](https://tradingview.github.io/lightweight-charts/docs/android#usage "Direct link to Usage") ----------------------------------------------------------------------------------------------------- Add view to the layout. Configure the chart layout. charts_view.api.applyOptions { layout = layoutOptions { background = SolidColor(Color.LTGRAY) textColor = Color.BLACK.toIntColor() } localization = localizationOptions { locale = "ru-RU" priceFormatter = PriceFormatter(template = "{price:#2:#3}$") timeFormatter = TimeFormatter( locale = "ru-RU", dateTimeFormat = DateTimeFormat.DATE_TIME ) }} Add any series to the chart and store a reference to it. lateinit var histogramSeries: SeriesApicharts_view.api.addHistogramSeries( onSeriesCreated = { series -> histogramSeries = series }) Add data to the series. val data = listOf( HistogramData(Time.BusinessDay(2019, 6, 11), 40.01f), HistogramData(Time.BusinessDay(2019, 6, 12), 52.38f), HistogramData(Time.BusinessDay(2019, 6, 13), 36.30f), HistogramData(Time.BusinessDay(2019, 6, 14), 34.48f), WhitespaceData(Time.BusinessDay(2019, 6, 15)), WhitespaceData(Time.BusinessDay(2019, 6, 16)), HistogramData(Time.BusinessDay(2019, 6, 17), 41.50f), HistogramData(Time.BusinessDay(2019, 6, 18), 34.82f))histogramSeries.setData(data) How to run the provided example[​](https://tradingview.github.io/lightweight-charts/docs/android#how-to-run-the-provided-example "Direct link to How to run the provided example") ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The [GitHub repository](https://github.com/tradingview/lightweight-charts-android) for lightweight-charts-android contains an example of the library in action. You can run the example (LighweightCharts.app) by cloning the repository and opening it in Android Studio. You will need to have [NodeJS/NPM](https://nodejs.org/) installed. * [Installation](https://tradingview.github.io/lightweight-charts/docs/android#installation) * [Usage](https://tradingview.github.io/lightweight-charts/docs/android#usage) * [How to run the provided example](https://tradingview.github.io/lightweight-charts/docs/android#how-to-run-the-provided-example) --- # Release Notes | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/release-notes#__docusaurus_skipToContent_fallback) Version: 5.1 On this page 5.1.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#510 "Direct link to 5.1.0") --------------------------------------------------------------------------------------------------------- Version 5.1.0 introduces **data conflation**, a powerful performance optimization feature designed for charts with very large datasets. For most use cases with typical dataset sizes, this feature will operate transparently in the background. However, if you're working with datasets containing tens of thousands of data points or more, conflation can dramatically improve rendering performance when users zoom out. ### Major Updates in 5.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#major-updates-in-51 "Direct link to Major Updates in 5.1") #### Data Conflation[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#data-conflation "Direct link to Data Conflation") Data conflation is an automatic performance optimization that merges data points when zoomed out, significantly improving rendering performance for large datasets. When bar spacing falls below a threshold where multiple data points would be rendered in less than 0.5 pixels of screen space, the library intelligently combines them into single points. **Key features:** * **Opt-in activation**: Conflation is disabled by default and can be enabled via the `enableConflation` option. * **Configurable options**: Control conflation behavior through new time scale and series options: * `enableConflation` - Enable or disable the feature (default: false). * `conflationThresholdFactor` - Adjust the zoom level threshold for activation and create smoothing effects. Higher values (2.0, 4.0, 8.0+) result in smoother-looking charts, particularly useful for sparklines and small charts where smooth appearance is prioritized over showing every data point. * `precomputeConflationOnInit` - Pre-calculate conflated data on initialization for improved zoom performance at the cost of initial load time and memory usage (default: false). * `precomputeConflationPriority` - Control background computation priority when using the Prioritized Task Scheduling API (default: 'background'). * **Custom series support**: Plugin developers can implement custom aggregation logic through the new `CustomConflationReducer` interface. This feature is particularly beneficial for applications displaying historical data spanning years or real-time feeds that accumulate large amounts of data over time. For typical use cases with moderate dataset sizes, conflation can remain disabled without any impact. (PR [#1945](https://github.com/tradingview/lightweight-charts/pull/1945) ) **Enhancements** * Added `doNotSnapToHiddenSeriesIndices` option to `CrosshairOptions`. When enabled, the crosshair will snap to the nearest visible series data point instead of snapping to hidden series indices. (PR [#1995](https://github.com/tradingview/lightweight-charts/pull/1995) ) **Bug Fixes** * Fixed price axis label positioning when using plugin views that don't implement the optional `fixedCoordinate()` method. Previously, labels were incorrectly treated as positioned at coordinate 0, causing false overlap detection. (PR [#1993](https://github.com/tradingview/lightweight-charts/pull/1993) , fixes [#1986](https://github.com/tradingview/lightweight-charts/issues/1986) , contributed by [@tpunt](https://github.com/tpunt) ) * Fixed time scale `fitContent` method to properly respect the `rightOffset` option when `rightOffsetPixels` is not set. This addresses a regression introduced in version 5.0.9. (PR [#1989](https://github.com/tradingview/lightweight-charts/pull/1989) , fixes [#1988](https://github.com/tradingview/lightweight-charts/issues/1988) ) **Contributors** We'd like to thank our external contributors for their valuable contributions to this release: * [@tpunt](https://github.com/tpunt) (Thomas Punt) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.9..v5.1.0) . 5.0.9[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#509 "Direct link to 5.0.9") --------------------------------------------------------------------------------------------------------- **Enhancements** * Added `rightOffsetPixels` option to `HorzScaleOptions`, allowing margin space from the right side of the chart to be set in pixels. This option takes precedence over `rightOffset` and ensures consistent pixel offset when using `fitContent` on charts with different amounts of data. The pixel-based offset remains consistent during zoom operations. (PR [#1957](https://github.com/tradingview/lightweight-charts/pull/1957) ) * Added `pop` method to series API that removes a specified number of data points from the end of the series and returns the removed data. (PR [#1949](https://github.com/tradingview/lightweight-charts/pull/1949) , fixes [#1518](https://github.com/tradingview/lightweight-charts/issues/1518) , contributed by [@tpunt](https://github.com/tpunt) ) * Enhanced `takeScreenshot` method with two new optional parameters: * `addTopLayer` - includes top layer primitives in the screenshot (default: false) * `includeCrosshair` - includes the crosshair when `addTopLayer` is enabled (default: false) (PR [#1977](https://github.com/tradingview/lightweight-charts/pull/1977) ) * Added `autoScale` option to `SeriesMarkersOptions`, allowing control over whether markers are included in the auto-scaling calculation of the price scale. When enabled (default: true), the chart will adjust its scale to ensure markers are fully visible. (PR [#1940](https://github.com/tradingview/lightweight-charts/pull/1940) , contributed by [@zbinlin](https://github.com/zbinlin) ) * Added `base` option to price format configuration as an alternative to `minMove`. This helps avoid floating-point precision limitations when dealing with extremely small price movements. (PR [#1952](https://github.com/tradingview/lightweight-charts/pull/1952) ) * Enhanced plugin API with additional functionality: * Added `lastValueData()` method to the public series API * Exposed `setLineStyle` drawing utility through a new `DrawingUtils` interface (PR [#1956](https://github.com/tradingview/lightweight-charts/pull/1956) , contributed by [@tpunt](https://github.com/tpunt) ) **Bug Fixes** * Fixed price scale visible range calculation when in logarithmic scale mode by properly converting the range from log space and handling precision issues with rounding. (PR [#1965](https://github.com/tradingview/lightweight-charts/pull/1965) , contributed by [@tpunt](https://github.com/tpunt) ) **Plugin & Indicator Examples** * Added _Dual Range Histogram Series_ custom plugin example that visualizes paired positive and negative value ranges for each time point using a column-based display. (PR [#1934](https://github.com/tradingview/lightweight-charts/pull/1934) ) * Added _Pretty Histogram_ plugin example demonstrating non-standard histogram rendering. (PR [#1930](https://github.com/tradingview/lightweight-charts/pull/1930) ) * Added examples demonstrating how to implement indicators (studies) within Lightweight Charts. See the [Analysis Indicators tutorial](https://tradingview.github.io/lightweight-charts/tutorials#analysis-indicators) for more information. (PR [#1915](https://github.com/tradingview/lightweight-charts/pull/1915) ) **Contributors** We'd like to thank our external contributors for their valuable contributions to this release: * [@tpunt](https://github.com/tpunt) (Thomas Punt) * [@zbinlin](https://github.com/zbinlin) (Colin Cheng) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.8..v5.0.9) . 5.0.8[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#508 "Direct link to 5.0.8") --------------------------------------------------------------------------------------------------------- **Enhancements** * Improved pane API with several new methods and options: * Added `addDefaultPane` option to chart options, allowing creation of charts with no initial panes * Added `addPane` method to `IChartApi` for programmatically adding panes * Added `setPreserveEmptyPane` and `preserveEmptyPane` methods to control empty pane behavior * Added `getStretchFactor` and `setStretchFactor` methods to control relative pane sizes * Added `addCustomSeries` and `addSeries` methods to `IPaneApi` for creating series directly on a specific pane * Updated `getHTMLElement` to return `null` when a pane hasn't been created yet * These improvements provide greater flexibility when working with multi-pane charts (PR [#1894](https://github.com/tradingview/lightweight-charts/pull/1894) , fixes [#1898](https://github.com/tradingview/lightweight-charts/issues/1898) , [#1896](https://github.com/tradingview/lightweight-charts/issues/1896) , [#1872](https://github.com/tradingview/lightweight-charts/issues/1872) , [#1907](https://github.com/tradingview/lightweight-charts/issues/1907) ) * Added additional price scale tick mark formatting capabilities: * Added `formatTickmarks` method to `IPriceFormatter` interface * Added `tickmarksPriceFormatter` and `tickmarksPercentageFormatter` options to `LocalizationOptionsBase` * Added `tickmarksFormatter` option to `PriceFormatCustom` * These new formatters provide all tick mark values at once, allowing for context-aware formatting decisions such as determining the optimal precision level needed (PR [#1903](https://github.com/tradingview/lightweight-charts/pull/1903) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.7..v5.0.8) . 5.0.7[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#507 "Direct link to 5.0.7") --------------------------------------------------------------------------------------------------------- **Enhancements** * Added price scale visible range control with new methods in `IPriceScaleApi`: `setVisibleRange(range)`, `getVisibleRange()`, and `setAutoScale(on)`. These methods allow for programmatic control of the visible price range on a price scale. Also added `ensureEdgeTickMarksVisible` option to `PriceScaleOptions`, which ensures tick marks are always visible at the very top and bottom of the price scale, providing clear boundary indicators. These features are particularly useful for charts with zooming and panning disabled that are primarily for display purposes. (PR [#1856](https://github.com/tradingview/lightweight-charts/pull/1856) ) * Added control over the rendering stacking order of series markers through a new `zOrder` option in the series markers plugin. This enhancement provides greater flexibility in controlling marker visibility and layering in complex charts. (PR [#1876](https://github.com/tradingview/lightweight-charts/pull/1876) ). [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.6..v5.0.7) . 5.0.6[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#506 "Direct link to 5.0.6") --------------------------------------------------------------------------------------------------------- **Enhancements** * Implemented series order functionality, allowing control over the rendering order of series within a pane. Series with higher order values are rendered on top of those with lower values. Added two new methods to `ISeriesApi`: `seriesOrder()` to get the current order index and `setSeriesOrder(order)` to set a specific order. (PR [#1868](https://github.com/tradingview/lightweight-charts/pull/1868) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.5..v5.0.6) . 5.0.5[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#505 "Direct link to 5.0.5") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed an issue where the series marker plugin could throw an exception if the series data required for individual markers could not be found (such as when the data is cleared or changed via ⁠setData on the series). (PR [#1845](https://github.com/tradingview/lightweight-charts/pull/1845) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.4..v5.0.5) . 5.0.4[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#504 "Direct link to 5.0.4") --------------------------------------------------------------------------------------------------------- **Improvements** * Fixed performance degradation when adding series markers to charts with large datasets (15,000+ data points) by optimizing marker calculations to only run when necessary. (PR [#1835](https://github.com/tradingview/lightweight-charts/pull/1835) , fixes [#1808](https://github.com/tradingview/lightweight-charts/issues/1808) ) * Added price-based positioning for series markers, allowing more precise control over marker placement. New position types include `atPriceTop`, `atPriceBottom`, and `atPriceMiddle`, which require a `price` value to be specified. (PR [#1826](https://github.com/tradingview/lightweight-charts/pull/1826) , thanks to [@EranGrin](https://github.com/EranGrin) ) * Added `MagnetOHLC` to `CrosshairMode`. This mode sticks the crosshair's horizontal line to the price value of a single-value series or to the open/high/low/close price of OHLC-based series. (PR [#1831](https://github.com/tradingview/lightweight-charts/pull/1831) , thanks to [@Jonney](https://github.com/Jonney) ) **Bug Fixes** * Fixed an issue where the crosshair marker would be visible on the first data point when the chart is initially loaded, before any user interaction. This behavior has been reverted to match version 4, where the crosshair remains hidden until user interaction. (PR [#1840](https://github.com/tradingview/lightweight-charts/pull/1840) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.3..v5.0.4) . 5.0.3[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#503 "Direct link to 5.0.3") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed an issue where changing the price scale for one pane would impact all panes in multi-pane setups. Added pane index parameter to the price scale API to ensure changes only affect the intended pane. (PR [#1821](https://github.com/tradingview/lightweight-charts/pull/1821) , fixes [#1817](https://github.com/tradingview/lightweight-charts/issues/1817) ) * Fixed an issue where a cursorStyle defined in a primitive hit-test wouldn't be applied. Additionally improved cursor style handling to maintain the correct cursor when the mouse remains in the same position while price/time scales are adjusted. (PR [#1823](https://github.com/tradingview/lightweight-charts/pull/1823) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.2..v5.0.3) . 5.0.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#502 "Direct link to 5.0.2") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed an issue where the crosshair marker would remain visible after the mouse pointer has left the chart. (PR [#1807](https://github.com/tradingview/lightweight-charts/issues/1807) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v5.0.1..v5.0.2) . * * * 5.0.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#500 "Direct link to 5.0.0") --------------------------------------------------------------------------------------------------------- Version 5.0.0 represents a significant milestone in the evolution of Lightweight Charts™, delivering on our commitment to keep the library truly "lightweight". Despite adding numerous new features, improvements, and fixes, we've managed to reduce the bundle size by up to 16%, bringing the base bundle size down to just 35kB. This remarkable reduction was achieved through enhanced tree-shaking capabilities, modernized architecture, and careful optimization of core features. This release introduces highly requested features like multi-pane support and new chart types. It also modernizes the codebase and improves its architecture to set a foundation for future enhancements without compromising on size. ### Major Updates in 5.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#major-updates-in-50 "Direct link to Major Updates in 5.0") #### Multi-Pane Support[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#multi-pane-support "Direct link to Multi-Pane Support") One of our most requested features, multi-pane support is now available. It allows you to create complex chart layouts with multiple independent viewing areas. This enhancement enables sophisticated technical analysis setups and better visualization of related data series. Additional key benefits include: * Full support for multiple panes within a single chart * Independent scale and series management per pane * Flexible pane sizing and arrangement options See [Panes](https://tradingview.github.io/lightweight-charts/docs/panes) for more information. #### New Chart Types[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#new-chart-types "Direct link to New Chart Types") **Yield Curve Charts** * New specialized chart type for displaying yield curves * Custom horizontal scale behavior with linear spacing * Optimized whitespace handling **Options Charts** * Price-based horizontal scale support * Specialized formatting and interaction handling * Ideal for options chain visualization See [Chart types](https://tradingview.github.io/lightweight-charts/docs/chart-types) for more information about the [Yield Curve Chart](https://tradingview.github.io/lightweight-charts/docs/chart-types#yield-curve-chart) and [Options Chart](https://tradingview.github.io/lightweight-charts/docs/chart-types#options-chart-price-based) types. #### Enhanced Color Support[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#enhanced-color-support "Direct link to Enhanced Color Support") * Expanded native support for sRGB-based colors (RGB, RGBA, hex, named colors, HSL) * Support for expanded color gamuts like Display P3 * Ability to specify a custom color parser to add support for non-sRGB formats * Reduced bundle size through browser-native color parsing #### Architectural Improvements[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#architectural-improvements "Direct link to Architectural Improvements") * Watermark feature reimplemented as plugins (`TextWatermark` and `ImageWatermark`) * Series Markers extracted as a plugin for better tree-shaking * New Up/Down Markers Plugin for price change visualization * Introduction of Pane Primitives for plugin attachment ### Breaking Changes[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#breaking-changes "Direct link to Breaking Changes") * New unified series creation API (see [migration guide](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v4-to-v5) ) * Dropped CommonJS support and updated JS syntax version to ES2020 * Watermark functionality moved to plugins * Series markers implementation changed to plugin system ### Enhancements[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#enhancements "Direct link to Enhancements") * Added relative gradient option for baseline and area series (`relativeGradient`) * New time scale option for maximum bar spacing (`maxBarSpacing`) * Added `priceLines()` method to `ISeriesApi` interface * Enhanced watermark capabilities with multi-line text support * Improved plugin system with Pane Primitives support * Better tree-shaking capabilities for smaller bundle sizes ### Bug Fixes[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#bug-fixes "Direct link to Bug Fixes") * Fixed primitive detachment update issues ([#1594](https://github.com/tradingview/lightweight-charts/issues/1594) ) * Various performance and rendering improvements ### Migration Guide[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#migration-guide "Direct link to Migration Guide") We've prepared a comprehensive migration guide to help you upgrade from v4 to v5. Key areas to note: 1. Series Creation API changes 2. Watermarks and Series Markers moving to separate plugins 3. Plugin system updates See the full migration guide: [Migrating from v4 to v5](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v4-to-v5) ### Technical Notes[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#technical-notes "Direct link to Technical Notes") This release uses ES2020 syntax and no longer supports CommonJS. If you need to support older environments, you'll need to set up transpilation for the `lightweight-charts` package in your build system using tools like Babel. As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. We look forward to seeing what you build with these new capabilities! You can always send us your feedback via GitHub. Happy trading! Team TradingView See [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.2.3..v5.0.1) . * * * 4.2.3[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#423 "Direct link to 4.2.3") --------------------------------------------------------------------------------------------------------- **Minor Improvements** * Improve check for crosshair label visibility on the price scale. This improves upon previous work (#1743 in v4.2.2) by reducing the allocated space for the crosshair when it is enabled, but the label is disabled. (PR [#1757](https://github.com/tradingview/lightweight-charts/issues/1757) ) **Bug Fixes** * Added additional prototype pollution protection for internal merge helper function. (PR [#1758](https://github.com/tradingview/lightweight-charts/issues/1758) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.2.2..v4.2.3) . * * * 4.2.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#422 "Direct link to 4.2.2") --------------------------------------------------------------------------------------------------------- **Minor Improvements** * Improved price scale width calculation by not allocating space for crosshair labels when the crosshair is disabled. (PR [#1743](https://github.com/tradingview/lightweight-charts/issues/1743) ) **Bug Fixes** * Fixed calculations for `fixLeftEdge` and `fixRightEdge` on the first render when both are true and data is added to an initially empty chart. Fixes issue [#1356](https://github.com/tradingview/lightweight-charts/issues/1356) . (PR [#1741](https://github.com/tradingview/lightweight-charts/issues/1741) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.2.1..v4.2.2) . * * * 4.2.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#421 "Direct link to 4.2.1") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed an issue where the series title part of a price scale label appeared blurry when using Firefox. [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.2.0..v4.2.1) . * * * 4.2.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#420 "Direct link to 4.2.0") --------------------------------------------------------------------------------------------------------- **Enhancements** * Added new [`attributionLogo`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#attributionLogo) option to `LayoutOptions`. This feature displays the TradingView attribution logo on the main chart pane by default, helping users meet the library's licensing requirements for attribution. * The TradingView attribution logo can be easily hidden by setting the `attributionLogo` option to `false` in the chart's `layout` option. * Improved data validation for `OhlcData` and `SingleValueData`. Introduced `isFulfilledBarData` for `OhlcData` and `isFulfilledLineData` for `SingleValueData`, ensuring more accurate validation of data types. Contributed by [@mozeryansky](https://github.com/mozeryansky) (PR [#1579](https://github.com/tradingview/lightweight-charts/pull/1579) , fixes [#1526](https://github.com/tradingview/lightweight-charts/issues/1526) ). [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.7..v4.2.0) . * * * 4.1.7[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#417 "Direct link to 4.1.7") --------------------------------------------------------------------------------------------------------- **Enhancements** * Further Refinement of the Price Scale Label Alignment (PR [#1630](https://github.com/tradingview/lightweight-charts/pull/1630) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.6..v4.1.7) . * * * 4.1.6[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#416 "Direct link to 4.1.6") --------------------------------------------------------------------------------------------------------- **Enhancements** * Improved Price Scale Label Alignment: Enhanced the alignment algorithm for price scale labels to ensure they do not move out of the viewport. This improves the visibility of price labels, particularly when they are near the edges of the scale. Fixes [#1620](https://github.com/tradingview/lightweight-charts/issues/1620) (PR [#1621](https://github.com/tradingview/lightweight-charts/pull/1621) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.5..v4.1.6) . * * * 4.1.5[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#415 "Direct link to 4.1.5") --------------------------------------------------------------------------------------------------------- **Enhancements** * Added `IHorzScaleBehavior.shouldResetTickmarkLabels`. (PR [#1614](https://github.com/tradingview/lightweight-charts/pull/1614) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.4..v4.1.5) . * * * 4.1.4[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#414 "Direct link to 4.1.4") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed hoveredSeries being undefined during series removal and creation. (PR [#1529](https://github.com/tradingview/lightweight-charts/pull/1529) , fixes [#1406](https://github.com/tradingview/lightweight-charts/pull/1406) , fixes [#1499](https://github.com/tradingview/lightweight-charts/pull/1499) ) * Fixed price label rendering artefact. (PR [#1585](https://github.com/tradingview/lightweight-charts/pull/1585) , fixes [#1584](https://github.com/tradingview/lightweight-charts/pull/1584) ) * Fixed an issue that prevented primitives with `zOrder` set to `top` from drawing above the last price animation. (PR [#1576](https://github.com/tradingview/lightweight-charts/pull/1576) ) * Fixed possible ReDos. (PR [#1536](https://github.com/tradingview/lightweight-charts/pull/1536) ) * Fixed marker positioning, which could cause a space between histogram and bottom of the chart. (PR [#1538](https://github.com/tradingview/lightweight-charts/pull/1538) & [#1539](https://github.com/tradingview/lightweight-charts/pull/1539) , fixes [#1382](https://github.com/tradingview/lightweight-charts/pull/1382) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.3..v4.1.4) . * * * 4.1.3[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#413 "Direct link to 4.1.3") --------------------------------------------------------------------------------------------------------- **Minor Improvements** * Added option to disable bold labels in the time scale. (PR [#1510](https://github.com/tradingview/lightweight-charts/pull/1510) ) **Bug Fixes** * Fixed sub-pixel horizontal alignment of the crosshair marker and series markers. (PR [#1505](https://github.com/tradingview/lightweight-charts/pull/1505) , fixes [#1504](https://github.com/tradingview/lightweight-charts/issues/1504) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.2..v4.1.3) . * * * 4.1.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#412 "Direct link to 4.1.2") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fix for 'Total canvas memory use exceeds the maximum limit' error raised on iOS Safari. (PR [#1485](https://github.com/tradingview/lightweight-charts/pull/1485) ) **Minor Improvements** * Improved error messages for price scale margins. (PR [#1489](https://github.com/tradingview/lightweight-charts/pull/1489) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.1..v4.1.2) . * * * 4.1.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#411 "Direct link to 4.1.1") --------------------------------------------------------------------------------------------------------- **Bug Fixes** * Fixed `shiftVisibleRangeOnNewBar` behaviour for realtime updates to a series. Additionally, a new option `allowShiftVisibleRangeOnWhitespaceReplacement` has been added if you wish to have the old 4.0 behaviour for when new data replaces existing whitespace. (PR [#1444](https://github.com/tradingview/lightweight-charts/pull/1444) ) * When disabling touch scrolling on the chart via either the `vertTouchDrag` or `horzTouchDrag` setting in the `handleScroll` options, any touch scroll events over the corresponding scale will now be ignored so the page can be scrolled. (PR [#1445](https://github.com/tradingview/lightweight-charts/pull/1445) ) [Changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.1.0..v4.1.1) . * * * 4.1.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#410 "Direct link to 4.1.0") --------------------------------------------------------------------------------------------------------- Version 4.1 of Lightweight Charts introduces exciting new features, including the introduction of Plugins, which provide developers the ability to extend the library's functionality. Additionally, this release includes enhancements to customize the horizontal scale and various minor improvements and bug fixes. **Major Updates** **Plugins** Developers can now leverage the power of Plugins in Lightweight Charts. Two types of Plugins are supported -  [Custom Series](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#custom-series)  and [Drawing Primitives](https://tradingview.github.io/lightweight-charts/docs/plugins/intro#primitives) , offering the ability to define new series types and create custom visualizations, drawing tools, and annotations. With the flexibility provided by these plugins, developers can create highly customizable charting applications for their users. To get started with plugins, please refer to our [Plugins Documentation](https://tradingview.github.io/lightweight-charts/docs/plugins/intro) for a better understanding of what is possible and how plugins work. You can also explore our collection of [plugin examples](https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples) (with a [preview hosted here](https://tradingview.github.io/lightweight-charts/plugin-examples/) ) for inspiration and guidance on implementing specific functionality. To help you get started quickly, we have created an NPM package called [create-lwc-plugin](https://www.npmjs.com/package/create-lwc-plugin) , which sets up a plugin project for you. This way, you can hit the ground running with your plugin development. **Horizontal Scale Customization** The horizontal scale is no longer restricted to only time-based values. The API has been extended to allow customization of the horizontal scale behavior, and enable uses cases like options chart where price values are displayed in the horizontal scale. The most common use-case would be to customise the tick marks behaviour. The [createChartEx](https://tradingview.github.io/lightweight-charts/docs/api/functions/createChartEx) function should be used instead of the usual `createChart` function, and an instance of a class implementing [IHorzScaleBehavior](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IHorzScaleBehavior) should be provided. A simple example can be found in this test case: [horizontal-price-scale.js](https://github.com/tradingview/lightweight-charts/blob/master/tests/e2e/graphics/test-cases/horizontal-price-scale.js) **Enhancements** * Added point markers styling option for line-based series. (closes [#365](https://github.com/tradingview/lightweight-charts/issues/365) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LineStyleOptions#pointmarkersvisible) * Added double click subscriber for the main chart pane. (closes [#1385](https://github.com/tradingview/lightweight-charts/issues/1385) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribedblclick) * Added `setCrosshairPosition` API, allowing programmatic setting of the crosshair position. (fixes [#1198](https://github.com/tradingview/lightweight-charts/issues/1198) , [#1163](https://github.com/tradingview/lightweight-charts/issues/1163) , [#438](https://github.com/tradingview/lightweight-charts/issues/438) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#setcrosshairposition) * Added an option to disable crosshair. Introduced the `Hidden` option in the `CrosshairMode` setting. (closes [#749](https://github.com/tradingview/lightweight-charts/issues/749) , thanks to [@luk707](https://github.com/luk707) ) * Allow overriding tick mark label length via the `tickMarkMaxCharacterLength` option. (closes [#1396](https://github.com/tradingview/lightweight-charts/issues/1396) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/HorzScaleOptions#tickmarkmaxcharacterlength) * Support for overriding the percentage formatter within the localization options. (fixes [#1328](https://github.com/tradingview/lightweight-charts/issues/1328) , [#1291](https://github.com/tradingview/lightweight-charts/issues/1291) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#percentageformatter) * Added `paneSize` getter to `IChartApi`, returning the dimensions of the chart pane. (issue [#1411](https://github.com/tradingview/lightweight-charts/issues/1411) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#panesize) * Added options to set minimum dimensions for the price and time scales. (closes [#1062](https://github.com/tradingview/lightweight-charts/issues/1062) , related to [#1163](https://github.com/tradingview/lightweight-charts/issues/1163) , [#50](https://github.com/tradingview/lightweight-charts/issues/50) ) [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions#minimumheight) , [Docs](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions#minimumwidth) **Bug Fixes** * Fixed chart layout when direction is set to RTL. (PR [#1338](https://github.com/tradingview/lightweight-charts/pull/1338) ) * Fixed re-enabling of `autoSize` after disabling it. (PR [#1274](https://github.com/tradingview/lightweight-charts/pull/1377) ) * Corrected percentage mode and zero first value. (fixes [#1386](https://github.com/tradingview/lightweight-charts/issues/1386) ) * Prevent chart shifting when new data replaces existing whitespace. (fixes [#1201](https://github.com/tradingview/lightweight-charts/issues/1201) ) Thanks to our Contributors for this Release: * [@luk707](https://github.com/luk707) You can always send us your feedback via GitHub. We look forward to hearing from you! And as always, happy trading! Team TradingView See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/24?closed=1)  or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.0.1..v4.1.0) . * * * 4.0.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#401 "Direct link to 4.0.1") --------------------------------------------------------------------------------------------------------- **Enhancements** * Add the ability to specify font colour for the Priceline labels. [#1274](https://github.com/tradingview/lightweight-charts/issues/1274) [#1287](https://github.com/tradingview/lightweight-charts/issues/1287) * Ignore resize method if `autoSize` is active, and added API to check if active. [#1301](https://github.com/tradingview/lightweight-charts/issues/1301) **Bug fixes** * Typo in customization guide. Thanks [@UcheAzubuko](https://github.com/UcheAzubuko) . [#1284](https://github.com/tradingview/lightweight-charts/issues/1284) * Inability to immediately add markers when `autoSize` chart option is enabled. Thanks [@victorbrambati](https://github.com/victorbrambati) . [#1271](https://github.com/tradingview/lightweight-charts/issues/1271) [#1281](https://github.com/tradingview/lightweight-charts/issues/1281) * First render when using `autosize` doesn't show the latest bars. Thanks [@victorbrambati](https://github.com/victorbrambati) [#1281](https://github.com/tradingview/lightweight-charts/issues/1281) . [#1282](https://github.com/tradingview/lightweight-charts/issues/1282) * Series rendering bug when outside of visible range. [#1293](https://github.com/tradingview/lightweight-charts/issues/1293) [#1294](https://github.com/tradingview/lightweight-charts/issues/1294) * Auto contrast text color for crosshair labels. [#1309](https://github.com/tradingview/lightweight-charts/issues/1309) [#1310](https://github.com/tradingview/lightweight-charts/issues/1310) * Hit box from the text of marker incorrectly shifted to the right. [#1270](https://github.com/tradingview/lightweight-charts/issues/1270) [#1305](https://github.com/tradingview/lightweight-charts/issues/1305) As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. And a big shout out to our hero contributors [@victorbrambati](https://github.com/victorbrambati) , and [@UcheAzubuko](https://github.com/UcheAzubuko) ! You can always send us your feedback via GitHub. We look forward to hearing from you! And as always, happy trading! Team TradingView See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/25?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v4.0.0..v4.0.1) . * * * 4.0.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#400 "Direct link to 4.0.0") --------------------------------------------------------------------------------------------------------- Long overdue as it’s been nearly 1 year since our last major update, but behold before all the changes that have happened over the last 12 months. In total, more than 20 tickets have been addressed with one of the most important ones being **fancy-canvas** – the library we use to configure HTML canvas in Lightweight Charts™. Please view the migration guide here: [Migrating from v3 to v4](https://tradingview.github.io/lightweight-charts/docs/migrations/from-v3-to-v4) . **Breaking changes** * Fancy-canvas 2 | [#818](https://github.com/tradingview/lightweight-charts/issues/818) * Added support for ES module exports | [#613](https://github.com/tradingview/lightweight-charts/issues/613) * We are now generating two more build types: esm, standalone & cjs * Updated scales design | [#606](https://github.com/tradingview/lightweight-charts/issues/606) * Changed scales look & feel according to the new design * Add possibility to disable time axis ticks | [#1043](https://github.com/tradingview/lightweight-charts/issues/1043) * Added `ticksVisible` to `TimeScaleOptions`, renamed `drawTicks` to `ticksVisible` in `PriceScaleOptions`. * Custom price lines should be atop of the series | [#684](https://github.com/tradingview/lightweight-charts/issues/684) * Price line to be added on top of any series - shout out to thanhlmm * Remove deprecated code | [#626](https://github.com/tradingview/lightweight-charts/issues/626) * Fix types inconsistency on API level with time | [#470](https://github.com/tradingview/lightweight-charts/issues/470) * Add API to get chart values (data, markers, etc) | [#414](https://github.com/tradingview/lightweight-charts/issues/414) * Added methods: * `ISeriesApi.markers` * `ISeriesApi.dataByIndex` * Changed time types everywhere in the public API to `Time` **Enhancements** * Handle resize with ResizeObserver if it's exist in window | [#71](https://github.com/tradingview/lightweight-charts/issues/71) * There was an issue when resizing the chart (such as rotating the screen of a phone/tablet). * Add possibility to use default tick mark formatter implementation as a fallback | [#1210](https://github.com/tradingview/lightweight-charts/issues/1210) * Allow the custom tick mark formatter to return null so that it will use the default formatter for that specific mark. * Add possibility to invert Area series filled area | [#1115](https://github.com/tradingview/lightweight-charts/issues/1115) * Adds invertFilledArea property to the AreaStyleOptions which when set to true will invert the filled area (draw above the line instead of below it). * Documentation website improvements | [#1001](https://github.com/tradingview/lightweight-charts/issues/1001) [#1002](https://github.com/tradingview/lightweight-charts/issues/1002) * Provides a way to apply theme-based colors to a chart whenever the Docusaurus theme is changed. * Add ability to draw parts of area with different colors | [#1100](https://github.com/tradingview/lightweight-charts/issues/1100) * Add a possibility to change line, top and bottom colors for the different parts of an area series * Add possibility to change price axis text color | [#1114](https://github.com/tradingview/lightweight-charts/issues/1114) * Reset price and time scale double click options | [#1118](https://github.com/tradingview/lightweight-charts/issues/1118) * Distinguishing the reset between price & time scale vs having only one option * Add curved lines | [#506](https://github.com/tradingview/lightweight-charts/issues/506) * Add a new line type that draws curved lines between series points. **Chores** * Replace deprecated String.prototype.substr | [#1048](https://github.com/tradingview/lightweight-charts/issues/1048) * Shout out to CommanderRoot **Bug fixes** * Refactoring resize the chart | [#367](https://github.com/tradingview/lightweight-charts/issues/367) * The chart is blank on printed page in Chromium | [#873](https://github.com/tradingview/lightweight-charts/issues/873) * Chart was blank when printing * Horizontal scroll animations improvements | [#1136](https://github.com/tradingview/lightweight-charts/issues/1136) * Fixes glitches when resetting the chart time scale while scrolling * Draw series last price & price line labels on the top layer | [#1046](https://github.com/tradingview/lightweight-charts/issues/1046) * Fixes an issue where price line could be place over price scale labels * Incorrect price line labels formatting | [#1032](https://github.com/tradingview/lightweight-charts/issues/1032) * When setting the price scale mode to anything than 'Normal' the price for PriceLine wasn't properly calculated. * lockVisibleTimeRangeOnResize does not work with fixLeftEdge | [#991](https://github.com/tradingview/lightweight-charts/issues/991) * The visible range is no longer changed after resizing the chart. * Crosshair label text appears on the chart during initial render | [#1255](https://github.com/tradingview/lightweight-charts/issues/1255) * Small text artefacts from the crosshair no longer appear on the time axis before any interaction with the chart. As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. And a big shout out to our hero contributors [thanhlmm](https://github.com/thanhlmm) , [CommanderRoot](https://github.com/CommanderRoot) , [samhainsamhainsamhain](https://github.com/samhainsamhainsamhain) & colleague [Nipheris](https://github.com/Nipheris) ! You can always send us your feedback via GitHub. We look forward to hearing from you! And as always, happy trading! Team TradingView See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/18?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.8.0..v4.0.0) . * * * 3.8.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#380 "Direct link to 3.8.0") --------------------------------------------------------------------------------------------------------- We're happy to announce the next release of Lightweight Charts™ library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921) . **Enhancement** * Documentation website (see [#875](https://github.com/tradingview/lightweight-charts/issues/875) , [#918](https://github.com/tradingview/lightweight-charts/issues/918) , [#411](https://github.com/tradingview/lightweight-charts/issues/411) , [#919](https://github.com/tradingview/lightweight-charts/issues/919) , [#922](https://github.com/tradingview/lightweight-charts/issues/922) , [#983](https://github.com/tradingview/lightweight-charts/issues/983) , [#980](https://github.com/tradingview/lightweight-charts/issues/980) , [#1006](https://github.com/tradingview/lightweight-charts/issues/1006) ) * Quick tracking mode (see [#830](https://github.com/tradingview/lightweight-charts/issues/830) ) * Improved mouse behaviour on touch devices (like mouse connected to mobile phone/tablet) (see [#106](https://github.com/tradingview/lightweight-charts/issues/106) ) * Custom color for items of candlestick and line series (see [#195](https://github.com/tradingview/lightweight-charts/issues/195) ) * Labels might be cut off when disabling scale and scroll ([#947](https://github.com/tradingview/lightweight-charts/issues/947) ) * Add ability to disable visibility of price line line (see [#969](https://github.com/tradingview/lightweight-charts/issues/969) ) **Fixed** * timeScale.fitContent is not working correctly (see [#966](https://github.com/tradingview/lightweight-charts/issues/966) ) * Delegate.unsubscribeAll method works in opposite way (see [#995](https://github.com/tradingview/lightweight-charts/issues/995) ) * Last price animation is active when no data added to the right (but to the left) (see [#886](https://github.com/tradingview/lightweight-charts/issues/886) ) * subscribeClick on mobile always get the last index of all the items (see [#657](https://github.com/tradingview/lightweight-charts/issues/657) ) * Incorrect crosshair position on scrolling by dragging by mouse (see [#987](https://github.com/tradingview/lightweight-charts/issues/987) ) * A painting slows down after a while with tons of updates (see [#946](https://github.com/tradingview/lightweight-charts/issues/946) ) * Bars disappear with devicePixelRatio less than 1 (see [#982](https://github.com/tradingview/lightweight-charts/issues/982) ) * There are no tick marks on the price axis (see [#939](https://github.com/tradingview/lightweight-charts/issues/939) ) * Disabling scrolling by disabled horzTouchDrag and vertTouchDrag options disables moving crosshair in tracking mode (see [#434](https://github.com/tradingview/lightweight-charts/issues/434) ) * Reducing precision doesn't update price scale width (see [#550](https://github.com/tradingview/lightweight-charts/issues/550) ) * Chart width is jumping on series change from area to candles (see [#943](https://github.com/tradingview/lightweight-charts/issues/943) ) * Log axis is not scaling on small number (see [#874](https://github.com/tradingview/lightweight-charts/issues/874) ) * Overlay series title is not rendered when no series use right price scale (see [#926](https://github.com/tradingview/lightweight-charts/issues/926) ) * scrollToPosition with big negative value and when no data breaks the chart (see [#889](https://github.com/tradingview/lightweight-charts/issues/889) ) * When rendering multiple charts with baseline series, baseValue of the last element is used on all charts series. (see [#898](https://github.com/tradingview/lightweight-charts/issues/898) ) Thanks to our contributors: * [@zaleGZL](https://github.com/zaleGZL) zale See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/23?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.7.0..v3.8.0) . * * * 3.7.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#370 "Direct link to 3.7.0") --------------------------------------------------------------------------------------------------------- **Enhancement** * The new baseline series chart (see [#151](https://github.com/tradingview/lightweight-charts/issues/151) ) * Documentation about time zones support (see [#781](https://github.com/tradingview/lightweight-charts/issues/781) ) * Added methods to get time axis size and subscribe on size change (see [#853](https://github.com/tradingview/lightweight-charts/issues/853) ) * Improved performance of setting/updating series data (see [#418](https://github.com/tradingview/lightweight-charts/issues/418) and [#838](https://github.com/tradingview/lightweight-charts/issues/838) ) * Use lowerbound in TimeScale timeToIndex search (see [#767](https://github.com/tradingview/lightweight-charts/issues/767) ) * Add JSDoc comments for existing API docs (see [#870](https://github.com/tradingview/lightweight-charts/issues/870) ) **Fixed** * Increased min price tick mark step up to 1e-14 (from 1e-9) (see [#841](https://github.com/tradingview/lightweight-charts/issues/841) ) * Fix typo in customization docs (see [#844](https://github.com/tradingview/lightweight-charts/issues/844) ) * Do not paint time axis if it not visible (see [#865](https://github.com/tradingview/lightweight-charts/issues/865) ) * Remove color customisation from settings.json (see [#869](https://github.com/tradingview/lightweight-charts/issues/869) ) Thanks to our contributors: * [@thanhlmm](https://github.com/thanhlmm) Thanh Le See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/22?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.6.1..v3.7.0) . * * * 3.6.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#361 "Direct link to 3.6.1") --------------------------------------------------------------------------------------------------------- **Fixed** * In v3.6.0 there was a typo in `LasPriceAnimationMode` const enum (`Last` without `t`), which was fixed in this release. The incorrect name is still available to import and could be used in your code so no breaking change so far (see e5133cb0c50fc557182aba4011e170aaf30a5b1a) See [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.6.0..v3.6.1) . * * * 3.6.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#360 "Direct link to 3.6.0") --------------------------------------------------------------------------------------------------------- On this day 10 years ago, 10th September 2011, the very first version of the TradingView website was deployed. To celebrate 10th anniversary we're happy to announce the new version of lightweight-charts library v3.6.0 🎉🎉🎉 **Enhancement** * Gradient chart background color (see [#831](https://github.com/tradingview/lightweight-charts/issues/831) ) * How to add buffer animation to price jump (see [#567](https://github.com/tradingview/lightweight-charts/issues/567) ) * Kinetic scroll (see [#832](https://github.com/tradingview/lightweight-charts/issues/832) ) **Fixed** * Incorrect initial barSpacing when both fixRightEdge and fixLeftEdge are enabled (see [#823](https://github.com/tradingview/lightweight-charts/issues/823) ) * Time axis label get cut on the edge if a fix edge option is enabled (see [#835](https://github.com/tradingview/lightweight-charts/issues/835) ) * Price axis doesn't respect the width of crosshair label (see [#834](https://github.com/tradingview/lightweight-charts/issues/834) ) * Fixed both timescale edges make lockVisibleTimeRangeOnResize turn wrong (see [#814](https://github.com/tradingview/lightweight-charts/issues/814) ) * `Error: Value is null` error while set the data is container has 0x0 size (see [#821](https://github.com/tradingview/lightweight-charts/issues/821) ) Thanks to our contributors: * [@thanhlmm](https://github.com/thanhlmm) Thanh Le See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/21?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.5.0..v3.6.0) . * * * 3.5.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#350 "Direct link to 3.5.0") --------------------------------------------------------------------------------------------------------- **A note about rendering order of series, which might be interpret as a bug or breaking change since this release** This is not really a breaking change, but might be interpret like that. In [#794](https://github.com/tradingview/lightweight-charts/issues/794) we've fixed the wrong order of series, thus now all series will be displayed in opposite order (they will be displayed in order of creating now; previously they were displayed in reversed order). To fix that, just change the order of creating the series (thus instead of create series A, then series B create series B first and then series A) - see [#812](https://github.com/tradingview/lightweight-charts/issues/812) . **Fixed** * Screenshot output missing piece on bottom right (see [#798](https://github.com/tradingview/lightweight-charts/issues/798) ) * Overlapped line chart show wrong color order when hover (see [#794](https://github.com/tradingview/lightweight-charts/issues/794) ) * Price line label show on both axis (see [#795](https://github.com/tradingview/lightweight-charts/issues/795) ) Thanks to our contributors: * [@thanhlmm](https://github.com/thanhlmm) Thanh Le See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/20?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.4.0..v3.5.0) . * * * 3.4.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#340 "Direct link to 3.4.0") --------------------------------------------------------------------------------------------------------- **Enhancement** * Add option to fix right edge (see [#218](https://github.com/tradingview/lightweight-charts/issues/218) ) * Drop restriction for min bar spacing value (see [#558](https://github.com/tradingview/lightweight-charts/issues/558) ) * Round corners of the line-style plots (see [#731](https://github.com/tradingview/lightweight-charts/issues/731) ) **Fixed** * AutoscaleProvider documentation error (see [#773](https://github.com/tradingview/lightweight-charts/issues/773) ) * Candlestick upColor and downColor is not changed on applyOptions (see [#750](https://github.com/tradingview/lightweight-charts/issues/750) ) * Cleared and reset data appears at visually different location (see [#757](https://github.com/tradingview/lightweight-charts/issues/757) ) * Remove unused internal method from SeriesApi (see [#768](https://github.com/tradingview/lightweight-charts/issues/768) ) * Removing data for the last series doesn't actually remove the data (see [#752](https://github.com/tradingview/lightweight-charts/issues/752) ) * `to` date of getVisibleRange contains partially visible data item and it's impossible to hover it (see [#624](https://github.com/tradingview/lightweight-charts/issues/624) ) * series.priceFormatter().format(price) does not work (see [#790](https://github.com/tradingview/lightweight-charts/issues/790) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/19?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.3.0..v3.4.0) . * * * 3.3.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#330 "Direct link to 3.3.0") --------------------------------------------------------------------------------------------------------- **Enhancement** * Add type predicates for series type (see [#670](https://github.com/tradingview/lightweight-charts/issues/670) ) * Create Grid instance for every pane (see [#382](https://github.com/tradingview/lightweight-charts/issues/382) ) * Add possibility to chose crosshairMarker color, so it will be independent from line-series color (see [#310](https://github.com/tradingview/lightweight-charts/issues/310) ) * Implement option not to shift the time scale at all when data is added with `setData` (see [#584](https://github.com/tradingview/lightweight-charts/issues/584) ) **Fixed** * Incorrect bar height when its value is more than chart's height (see [#673](https://github.com/tradingview/lightweight-charts/issues/673) ) * Disabling autoScale for non-visible series (see [#687](https://github.com/tradingview/lightweight-charts/issues/687) ) Thanks to our contributors: * [@dubroff](https://github.com/dubroff) * [@SuperPenguin](https://github.com/SuperPenguin) Andree Yosua * [@mecm1993](https://github.com/mecm1993) Manuel Cepeda See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/17?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.2.0..v3.3.0) . * * * 3.2.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#320 "Direct link to 3.2.0") --------------------------------------------------------------------------------------------------------- **Enhancement** * Feat/gzip friendly colors (see [#598](https://github.com/tradingview/lightweight-charts/issues/598) ) * Add coordinateToLogical and logicalToCoordinate (see [#587](https://github.com/tradingview/lightweight-charts/issues/587) ) * Add API to show/hide series without removing it (see [#471](https://github.com/tradingview/lightweight-charts/issues/471) ) * Add run-time validation of inputs in debug mode (see [#315](https://github.com/tradingview/lightweight-charts/issues/315) ) * Pixel perfect renderers fixes (see [#535](https://github.com/tradingview/lightweight-charts/issues/535) ) * Add title option to createPriceLine (see [#357](https://github.com/tradingview/lightweight-charts/issues/357) ) **Fixed** * Set rightOffset and scrollToPosition async as well as setVisibleRange (see [#406](https://github.com/tradingview/lightweight-charts/issues/406) ) * timeScale() changes visible range on setData() (see [#549](https://github.com/tradingview/lightweight-charts/issues/549) ) * Remove chart's size restriction or make it smaller (see [#366](https://github.com/tradingview/lightweight-charts/issues/366) ) * LineStyle.Dotted make no effect (see [#572](https://github.com/tradingview/lightweight-charts/issues/572) ) * If priceScaleId is empty string, invalid price scale api is returned (see [#537](https://github.com/tradingview/lightweight-charts/issues/537) ) * Incorrect Selection seen on long press in ios webview on chart (see [#609](https://github.com/tradingview/lightweight-charts/issues/609) ) * One-point line series is invisible (see [#597](https://github.com/tradingview/lightweight-charts/issues/597) ) * Empty price scale after creating series with the same price range (see [#615](https://github.com/tradingview/lightweight-charts/issues/615) ) **Infra and dev env** * Compress artifacts in graphics tests in CI (see [#145](https://github.com/tradingview/lightweight-charts/issues/145) ) * Run tests against production build (see [#503](https://github.com/tradingview/lightweight-charts/issues/503) ) * Add test to check code usage coverage (see [#495](https://github.com/tradingview/lightweight-charts/issues/495) ) * Migrate from codechecks (see [#356](https://github.com/tradingview/lightweight-charts/issues/356) ) * Updated dev deps Thanks to our contributors: * Andree Yosua [@SuperPenguin](https://github.com/SuperPenguin) * Christos [@christose](https://github.com/christose) * Shergin Rodion [@beholderrk](https://github.com/beholderrk) * wenhoujx [@wenhoujx](https://github.com/wenhoujx) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/11?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.1.5..v3.2.0) . * * * 3.1.5[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#315 "Direct link to 3.1.5") --------------------------------------------------------------------------------------------------------- It's a just re-published accidentally published 3.1.4 version, which didn't actually fix the issue [#536](https://github.com/tradingview/lightweight-charts/issues/536) . Version 3.1.4 has been deprecated. **Fixed** * TypeError `_internal_priceScale is not a function` while getting series price scale (see [#536](https://github.com/tradingview/lightweight-charts/issues/536) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/16?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.1.3..v3.1.5) . * * * 3.1.3[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#313 "Direct link to 3.1.3") --------------------------------------------------------------------------------------------------------- **Fixed** * `handleScroll` and `handleScale` options aren't applied (see [#527](https://github.com/tradingview/lightweight-charts/issues/527) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/14?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.1.2..v3.1.3) . * * * 3.1.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#312 "Direct link to 3.1.2") --------------------------------------------------------------------------------------------------------- **Fixed** * Crosshair doesn't work on touch devices (see [#511](https://github.com/tradingview/lightweight-charts/issues/511) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/13?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.1.1..v3.1.2) . * * * 3.1.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#311 "Direct link to 3.1.1") --------------------------------------------------------------------------------------------------------- **Fixed** * Fixed production build of 3.1 version (see [#502](https://github.com/tradingview/lightweight-charts/issues/502) and [62aa93724e40fbb1b678d9b44655279a1df529c5](https://github.com/tradingview/lightweight-charts/commit/62aa93724e40fbb1b678d9b44655279a1df529c5) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/12?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.1.0..v3.1.1) . * * * 3.1.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#310 "Direct link to 3.1.0") --------------------------------------------------------------------------------------------------------- **Enhancement** * Whitespaces support (see [#209](https://github.com/tradingview/lightweight-charts/issues/209) ) * Custom font families for watermarks (see [#437](https://github.com/tradingview/lightweight-charts/issues/437) ) **Fixed** * Added support for 'transparent' color (see [#491](https://github.com/tradingview/lightweight-charts/issues/491) ) * Refactor DataLayer/ChartApi (see [#270](https://github.com/tradingview/lightweight-charts/issues/270) ) * Remove series then scroll to right after not working (see [#355](https://github.com/tradingview/lightweight-charts/issues/355) ) * Scaling via mouse click and drag doesn't work if chart is inside shadow root (see [#427](https://github.com/tradingview/lightweight-charts/issues/427) ) * Applying watermark in setTimeout doesn't make an effect (see [#485](https://github.com/tradingview/lightweight-charts/issues/485) ) * Importing the library in server-side context caused `ReferenceError` (see [#446](https://github.com/tradingview/lightweight-charts/issues/446) ) **Undocumented breaking changes** We know that some of users probably used some hacky-workarounds calling internal methods to achieve multi-pane support. In this release, to reduce size of the bundle we [dropped out a code for pane's separator](https://github.com/tradingview/lightweight-charts/pull/496) (which allows to resize panes). As soon this workaround is undocumented and we don't support this feature yet - we don't bump a major version. But we think it's better to let you know that it has been changed. **Development** * Dropped support NodeJS < 12.18 * Migrated from TSLint to ESLint (see [#314](https://github.com/tradingview/lightweight-charts/issues/314) ) * Migrated from clean-publish to in-house script to clear package.json (see [#474](https://github.com/tradingview/lightweight-charts/issues/474) ) Thanks to our contributors: * Meet Mangukiya [@meetmangukiya](https://github.com/meetmangukiya) * NekitCorp [@NekitCorp](https://github.com/NekitCorp) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/9?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.0.1..v3.1.0) . * * * 3.0.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#301 "Direct link to 3.0.1") --------------------------------------------------------------------------------------------------------- **Fixed** * Correctly handle `overlay: true` in series options while create series to backward compat (see [#475](https://github.com/tradingview/lightweight-charts/issues/475) ) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/10?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v3.0.0..v3.0.1) . * * * 3.0.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#300 "Direct link to 3.0.0") --------------------------------------------------------------------------------------------------------- **Breaking changes** We have some breaking changes since the latest version due some features and API improvements: * Methods `subscribeVisibleTimeRangeChange` and `unsubscribeVisibleTimeRangeChange` has been moved from ChartApi to TimeScaleApi * Since 3.0 you can specify price axis you'd like to place the series on. The same for moving the series between price scales (see migration guide below) See [breaking changes doc](https://github.com/tradingview/lightweight-charts/blob/master/docs/3.0-breaking-changes.md) with migration guide to migrate smoothly. **Enhancement** * Added ability to customize time scale tick marks formatter (see [#226](https://github.com/tradingview/lightweight-charts/issues/226) ) * Added ability to put text for series markers (see [#207](https://github.com/tradingview/lightweight-charts/issues/207) ) * Added ability to specify your own date formatter (see [#368](https://github.com/tradingview/lightweight-charts/issues/368) ) * Improved tick marks generation algorithm for the first point (see [#387](https://github.com/tradingview/lightweight-charts/issues/387) ) * Made inbound types weakly (outbound ones should be strict) (see [#374](https://github.com/tradingview/lightweight-charts/issues/374) ) * Removed non-exported const enum's JS code (see [#432](https://github.com/tradingview/lightweight-charts/issues/432) ) * Introduced [ts-transformer-properties-rename](https://github.com/timocov/ts-transformer-properties-rename) instead of [ts-transformer-minify-privates](https://github.com/timocov/ts-transformer-minify-privates) (see [#436](https://github.com/tradingview/lightweight-charts/issues/436) ) **Added** * Add ability to override series' autoscale range (see [#392](https://github.com/tradingview/lightweight-charts/issues/392) ) * Add API to get price scale's width (see [#452](https://github.com/tradingview/lightweight-charts/issues/452) ) * Disabling/enabling scaling axis for both price and time (see [#440](https://github.com/tradingview/lightweight-charts/issues/440) ) * Get screen coordinate by a time point (see [#435](https://github.com/tradingview/lightweight-charts/issues/435) ) * Remove tick mark from price label (see [#378](https://github.com/tradingview/lightweight-charts/issues/378) ) * Support the second price axis (see [#129](https://github.com/tradingview/lightweight-charts/issues/129) ) * Visible time range should have bars count of the space from left/right (see [#335](https://github.com/tradingview/lightweight-charts/issues/335) ) **Fixed** * `series.setMarkers` requires at least one data point (see [#372](https://github.com/tradingview/lightweight-charts/issues/372) ) * Impossible to override the only width or height in constructor (see [#353](https://github.com/tradingview/lightweight-charts/issues/353) ) * Incorrect alignment of markers if series has gaps (see [#464](https://github.com/tradingview/lightweight-charts/issues/464) ) * Multiple series: error while trying to scroll the chart (see [#373](https://github.com/tradingview/lightweight-charts/issues/373) ) * Replace const enums with enums to let use them in projects with enabled isolatedModules option (see [#375](https://github.com/tradingview/lightweight-charts/issues/375) ) Thanks to our contributors: * Ben Guidarelli [@barnjamin](https://github.com/barnjamin) * gkaindl [@gkaindl](https://github.com/gkaindl) * scrwdrv [@scrwdrv](https://github.com/scrwdrv) * Yusuf Sahin HAMZA [@yusufsahinhamza](https://github.com/yusufsahinhamza) See [issues assigned to this version's milestone](https://github.com/tradingview/lightweight-charts/milestone/7?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v2.0.0..v3.0.0) . * * * 2.0.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#200 "Direct link to 2.0.0") --------------------------------------------------------------------------------------------------------- **Breaking changes** * Removed unused `lineWidth` property from `HistogramStyleOptions` interface (it affects nothing, but could break your compilation) * Changed order of `width` and `height` args in `resize` method ([#157](https://github.com/tradingview/lightweight-charts/issues/157) ) * Pattern for all non-solid (dotted, dashed, large dashed and sparse dotted) line styles was a bit changed ([#274](https://github.com/tradingview/lightweight-charts/issues/274) ) **Enhancement** * Pixel-perfect rendering ([#274](https://github.com/tradingview/lightweight-charts/issues/274) ) * Time scale enhancements ([#352](https://github.com/tradingview/lightweight-charts/issues/352) ) **Added** * Disable all kinds of scrolls and touch with one option ([#230](https://github.com/tradingview/lightweight-charts/issues/230) ) * Added to the acceptable date formats ([#296](https://github.com/tradingview/lightweight-charts/issues/296) ) * Add option to show the "global" last value of the series instead of the last visible ([#203](https://github.com/tradingview/lightweight-charts/issues/203) ) **Fixed** * Price line didn\`t hightlight price ([#273](https://github.com/tradingview/lightweight-charts/issues/273) ) * CreatePriceLine not removed ([#285](https://github.com/tradingview/lightweight-charts/issues/285) ) * Crosshair line not visible when priceScale position set to none ([#302](https://github.com/tradingview/lightweight-charts/issues/302) ) * chart.resize parameter is inverted ([#157](https://github.com/tradingview/lightweight-charts/issues/157) ) * Removed unnecessary spacing from left/right (1 bar from each side) in `fitContent` ([#345](https://github.com/tradingview/lightweight-charts/issues/345) ) Thanks to our contributors: * Andree Yosua [@SuperPenguin](https://github.com/SuperPenguin) * kpaape [@kpaape](https://github.com/kpaape) * Matt Conway [@mattsre](https://github.com/mattsre) See [issues assigned to this version’s milestone](https://github.com/tradingview/lightweight-charts/milestone/6?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v1.2.2..v2.0.0) . * * * 1.2.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#122 "Direct link to 1.2.2") --------------------------------------------------------------------------------------------------------- **Fixed** * Bug while rendering few datasets with not equal timescale ([#321](https://github.com/tradingview/lightweight-charts/issues/321) ) * * * 1.2.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#121 "Direct link to 1.2.1") --------------------------------------------------------------------------------------------------------- **Added** * Add custom price lines ([#183](https://github.com/tradingview/lightweight-charts/issues/183) ) * Migrate canvas-related logic to fancy-canvas library ([#141](https://github.com/tradingview/lightweight-charts/issues/141) ) * Add coordinateToPrice method to ISeriesApi ([#171](https://github.com/tradingview/lightweight-charts/issues/171) ) **Fixed** * Scrolling by price is incorrect ([#213](https://github.com/tradingview/lightweight-charts/issues/213) ) * Histogram (volume) does not honor color setting (sometimes) ([#233](https://github.com/tradingview/lightweight-charts/issues/233) ) * Logarithmic scaling is applied to volume ([#227](https://github.com/tradingview/lightweight-charts/issues/227) ) * hoveredSeries in mouse events params is always undefined ([#190](https://github.com/tradingview/lightweight-charts/issues/190) ) * `lineType` option does not work for area/line series ([#220](https://github.com/tradingview/lightweight-charts/issues/220) ) * Double clicking on time scale will reset fix left edge ([#224](https://github.com/tradingview/lightweight-charts/issues/224) ) * Series' marker does not aligned after autoscale ([#212](https://github.com/tradingview/lightweight-charts/issues/212) ) * Error on setData empty array for overlay histogram series ([#267](https://github.com/tradingview/lightweight-charts/issues/267) ) * Added some missing docs ([#211](https://github.com/tradingview/lightweight-charts/issues/211) [#193](https://github.com/tradingview/lightweight-charts/issues/193) [#245](https://github.com/tradingview/lightweight-charts/issues/245) ) See [issues assigned to this version’s milestone](https://github.com/tradingview/lightweight-charts/milestone/4?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v1.1.0...v1.2.1) . * * * 1.1.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#110 "Direct link to 1.1.0") --------------------------------------------------------------------------------------------------------- **Added** * Apply localization to specific series ([#62](https://github.com/tradingview/lightweight-charts/issues/62) ) * Series-based markers ([#24](https://github.com/tradingview/lightweight-charts/issues/24) ) * Reduced size of the library by using [`ts-transformer-minify-privates`](https://github.com/timocov/ts-transformer-minify-privates) transformer ([#98](https://github.com/tradingview/lightweight-charts/issues/98) ) **Fixed** * The chart can't start from the left ([#144](https://github.com/tradingview/lightweight-charts/issues/144) ) * OHLC charts render incorrect when `value` is provided ([#165](https://github.com/tradingview/lightweight-charts/issues/165) ) * Price axis is not shown if series is created inside promise chain ([#164](https://github.com/tradingview/lightweight-charts/issues/164) ) * The line chart can't move to the left ([#143](https://github.com/tradingview/lightweight-charts/issues/143) ) * Lots of non-passive event listener warnings ([#139](https://github.com/tradingview/lightweight-charts/issues/139) ) * applyOptions of histogram series with color doesn't affect the data ([#112](https://github.com/tradingview/lightweight-charts/issues/112) ) * Price Axis Scaling Bug ([#122](https://github.com/tradingview/lightweight-charts/issues/122) ) * LineSeries is not displayed if starting x value is out of viewport ([#116](https://github.com/tradingview/lightweight-charts/issues/116) ) * Crosshair isn't updated when timescale is changed ([#120](https://github.com/tradingview/lightweight-charts/issues/120) ) * Pinch isn't prevented by long tap ([#95](https://github.com/tradingview/lightweight-charts/issues/95) ) Thanks to our contributors: * zach [@n8tb1t](https://github.com/n8tb1t) * Chris Kaczor [@krzkaczor](https://github.com/krzkaczor) See [issues assigned to this version’s milestone](https://github.com/tradingview/lightweight-charts/milestone/2?closed=1) or [changes since the last published version](https://github.com/tradingview/lightweight-charts/compare/v1.0.2...v1.1.0) . * * * 1.0.2[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#102 "Direct link to 1.0.2") --------------------------------------------------------------------------------------------------------- **Fixed** * The histogram last bar not hide in chart ([#133](https://github.com/tradingview/lightweight-charts/issues/133) ) * * * 1.0.1[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#101 "Direct link to 1.0.1") --------------------------------------------------------------------------------------------------------- **Fixed** * Setting the data to series fails after setting the data to histogram series with custom color ([#110](https://github.com/tradingview/lightweight-charts/issues/110) ) * * * 1.0.0[​](https://tradingview.github.io/lightweight-charts/docs/release-notes#100 "Direct link to 1.0.0") --------------------------------------------------------------------------------------------------------- The first release. The docs for this version are available [here](https://github.com/tradingview/lightweight-charts/tree/v1.0.0/docs) . * [5.1.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#510) * [5.0.9](https://tradingview.github.io/lightweight-charts/docs/release-notes#509) * [5.0.8](https://tradingview.github.io/lightweight-charts/docs/release-notes#508) * [5.0.7](https://tradingview.github.io/lightweight-charts/docs/release-notes#507) * [5.0.6](https://tradingview.github.io/lightweight-charts/docs/release-notes#506) * [5.0.5](https://tradingview.github.io/lightweight-charts/docs/release-notes#505) * [5.0.4](https://tradingview.github.io/lightweight-charts/docs/release-notes#504) * [5.0.3](https://tradingview.github.io/lightweight-charts/docs/release-notes#503) * [5.0.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#502) * [5.0.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#500) * [4.2.3](https://tradingview.github.io/lightweight-charts/docs/release-notes#423) * [4.2.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#422) * [4.2.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#421) * [4.2.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#420) * [4.1.7](https://tradingview.github.io/lightweight-charts/docs/release-notes#417) * [4.1.6](https://tradingview.github.io/lightweight-charts/docs/release-notes#416) * [4.1.5](https://tradingview.github.io/lightweight-charts/docs/release-notes#415) * [4.1.4](https://tradingview.github.io/lightweight-charts/docs/release-notes#414) * [4.1.3](https://tradingview.github.io/lightweight-charts/docs/release-notes#413) * [4.1.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#412) * [4.1.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#411) * [4.1.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#410) * [4.0.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#401) * [4.0.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#400) * [3.8.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#380) * [3.7.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#370) * [3.6.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#361) * [3.6.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#360) * [3.5.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#350) * [3.4.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#340) * [3.3.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#330) * [3.2.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#320) * [3.1.5](https://tradingview.github.io/lightweight-charts/docs/release-notes#315) * [3.1.3](https://tradingview.github.io/lightweight-charts/docs/release-notes#313) * [3.1.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#312) * [3.1.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#311) * [3.1.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#310) * [3.0.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#301) * [3.0.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#300) * [2.0.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#200) * [1.2.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#122) * [1.2.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#121) * [1.1.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#110) * [1.0.2](https://tradingview.github.io/lightweight-charts/docs/release-notes#102) * [1.0.1](https://tradingview.github.io/lightweight-charts/docs/release-notes#101) * [1.0.0](https://tradingview.github.io/lightweight-charts/docs/release-notes#100) --- # Price scale | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/price-scale) ** (5.1). Version: Next On this page The **price scale** (or price axis) is a vertical scale that maps prices to coordinates and vice versa. The conversion rules depend on the price scale mode, the chart's height, and the visible part of the data. ![Price scales](https://tradingview.github.io/lightweight-charts/assets/images/price-scales-5ff372fd08578f74710940c724ad5df4.png "Price scales") Create price scale[​](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#create-price-scale "Direct link to Create price scale") ----------------------------------------------------------------------------------------------------------------------------------------------------- By default, a chart has two visible price scales: left and right. Additionally, you can create an unlimited number of overlay price scales, which remain hidden in the UI. Overlay price scales allow series to be plotted without affecting the existing visible scales. This is particularly useful for indicators like Volume, where values can differ significantly from price data. To create an overlay price scale, assign [`priceScaleId`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon#pricescaleid) to a series. Note that the `priceScaleId` value should differ from price scale IDs on the left and right. The chart will create an overlay price scale with the provided ID. If a price scale with such ID already exists, a series will be attached to the existing price scale. Further, you can use the provided price scale ID to retrieve its API object using the [`IChartApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#pricescale) method. See the [Price and Volume](https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-and-volume) article for an example of adding a Volume indicator using an overlay price scale. Modify price scale[​](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#modify-price-scale "Direct link to Modify price scale") ----------------------------------------------------------------------------------------------------------------------------------------------------- To modify the left price scale, use the [`leftPriceScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsBase#leftpricescale) option. For the right price scale, use [`rightPriceScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsBase#rightpricescale) . To change the default settings for an overlay price scale, use the [`overlayPriceScales`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsBase#overlaypricescales) option. You can use the [`IChartApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#pricescale) method to retrieve the API object for any price scale. Similarly, to access the API object for the price scale that a series is attached to, use the [`ISeriesApi.priceScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#pricescale) method. Remove price scale[​](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#remove-price-scale "Direct link to Remove price scale") ----------------------------------------------------------------------------------------------------------------------------------------------------- The default left and right price scales cannot be removed, you can only hide them by setting the [`visible`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/PriceScaleOptions#visible) option to `false`. An overlay price scale exists as long as at least one series is attached to it. To remove an overlay price scale, remove all series attached to this price scale. * [Create price scale](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#create-price-scale) * [Modify price scale](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#modify-price-scale) * [Remove price scale](https://tradingview.github.io/lightweight-charts/docs/next/price-scale#remove-price-scale) --- # Panes | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/panes#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/panes) ** (5.1). Version: Next On this page Panes are essential elements that help segregate data visually within a single chart. Panes are useful when you have a chart that needs to show more than one kind of data. For example, you might want to see a stock's price over time in one pane and its trading volume in another. This setup helps users get a fuller picture without cluttering the chart. By default, Lightweight Charts™ has a single pane, however, you can add more panes to the chart to display different series in separate areas. For detailed examples and code snippets on how to implement panes in your charts [see tutorial](https://tradingview.github.io/lightweight-charts/tutorials/how_to/panes) . Customization Options[​](https://tradingview.github.io/lightweight-charts/docs/next/panes#customization-options "Direct link to Customization Options") -------------------------------------------------------------------------------------------------------------------------------------------------------- Lightweight Charts™ offers a few [customization options](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutPanesOptions) to tailor the appearance and behavior of panes: * [Pane Separator Color](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutPanesOptions#separatorcolor) : Customize the color of the pane separators to match the chart design or improve visibility. * [Separator Hover Color](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutPanesOptions#separatorhovercolor) : Enhance user interaction by changing the color of separators on mouse hover. * [Resizable Panes](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LayoutPanesOptions#enableresize) : Opt to enable or disable the resizing of panes by the user, offering flexibility in how data is displayed. Managing Panes[​](https://tradingview.github.io/lightweight-charts/docs/next/panes#managing-panes "Direct link to Managing Panes") ----------------------------------------------------------------------------------------------------------------------------------- While the specific methods to manipulate panes are covered in the detailed [example](https://tradingview.github.io/lightweight-charts/tutorials/how_to/panes) , it's important to note that Lightweight Charts™ provides an [API for pane management](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPaneApi) . This includes adding new panes, moving series between panes, adjusting pane height, and removing panes. The API ensures that developers have full control over the pane lifecycle and organization within their charts. * [Customization Options](https://tradingview.github.io/lightweight-charts/docs/next/panes#customization-options) * [Managing Panes](https://tradingview.github.io/lightweight-charts/docs/next/panes#managing-panes) --- # Series | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/series-types#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/series-types) ** (5.1). Version: Next On this page This article describes supported series types and ways to [customize](https://tradingview.github.io/lightweight-charts/docs/next/series-types#customization) them. Supported types[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#supported-types "Direct link to Supported types") --------------------------------------------------------------------------------------------------------------------------------------------- ### Area[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#area "Direct link to Area") * **Series Definition**: [`AreaSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/AreaSeries) * **Data format**: [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SingleValueData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`AreaStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/AreaStyleOptions) This series is represented with a colored area between the [time scale](https://tradingview.github.io/lightweight-charts/docs/next/time-scale) and line connecting all data points: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];areaSeries.setData(data);chart.timeScale().fitContent(); ### Bar[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#bar "Direct link to Bar") * **Series Definition**: [`BarSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/BarSeries) * **Data format**: [`BarData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BarData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`BarStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BarStyleOptions) This series illustrates price movements with vertical bars. The length of each bar corresponds to the range between the highest and lowest price values. Open and close values are represented with the tick marks on the left and right side of the bar, respectively: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const barSeries = chart.addSeries(BarSeries, { upColor: '#26a69a', downColor: '#ef5350' });const data = [ { open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }, { open: 10.96, high: 11.90, low: 10.80, close: 11.50, time: 1643291876 }, { open: 11.50, high: 12.00, low: 11.30, close: 11.80, time: 1643378276 }, { open: 11.80, high: 12.20, low: 11.70, close: 12.00, time: 1643464676 }, { open: 12.00, high: 12.50, low: 11.90, close: 12.30, time: 1643551076 }, { open: 12.30, high: 12.80, low: 12.10, close: 12.60, time: 1643637476 }, { open: 12.60, high: 13.00, low: 12.50, close: 12.90, time: 1643723876 }, { open: 12.90, high: 13.50, low: 12.70, close: 13.20, time: 1643810276 }, { open: 13.20, high: 13.70, low: 13.00, close: 13.50, time: 1643896676 }, { open: 13.50, high: 14.00, low: 13.30, close: 13.80, time: 1643983076 }, { open: 13.80, high: 14.20, low: 13.60, close: 14.00, time: 1644069476 },];barSeries.setData(data);chart.timeScale().fitContent(); ### Baseline[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#baseline "Direct link to Baseline") * **Series Definition**: [`BaselineSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/BaselineSeries) * **Data format**: [`SingleValueData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SingleValueData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`BaselineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BaselineStyleOptions) This series is represented with two colored areas between the [the base value line](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/BaselineStyleOptions#basevalue) and line connecting all data points: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const baselineSeries = chart.addSeries(BaselineSeries, { baseValue: { type: 'price', price: 25 }, topLineColor: 'rgba( 38, 166, 154, 1)', topFillColor1: 'rgba( 38, 166, 154, 0.28)', topFillColor2: 'rgba( 38, 166, 154, 0.05)', bottomLineColor: 'rgba( 239, 83, 80, 1)', bottomFillColor1: 'rgba( 239, 83, 80, 0.05)', bottomFillColor2: 'rgba( 239, 83, 80, 0.28)' });const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];baselineSeries.setData(data);chart.timeScale().fitContent(); ### Candlestick[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#candlestick "Direct link to Candlestick") * **Series Definition**: [`CandlestickSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/CandlestickSeries) * **Data format**: [`CandlestickData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CandlestickData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`CandlestickStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/CandlestickStyleOptions) This series illustrates price movements with candlesticks. The solid body of each candlestick represents the open and close values for the time period. Vertical lines, known as wicks, above and below the candle body represent the high and low values, respectively: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const candlestickSeries = chart.addSeries(CandlestickSeries, { upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350' });const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }];candlestickSeries.setData(data);chart.timeScale().fitContent(); ### Histogram[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#histogram "Direct link to Histogram") * **Series Definition**: [`HistogramSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/HistogramSeries) * **Data format**: [`HistogramData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HistogramData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`HistogramStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/HistogramStyleOptions) This series illustrates the distribution of values with columns: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const histogramSeries = chart.addSeries(HistogramSeries, { color: '#26a69a' });const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922, color: 'red' }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722, color: 'red' }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922, color: 'red' }];histogramSeries.setData(data);chart.timeScale().fitContent(); ### Line[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#line "Direct link to Line") * **Series Definition**: [`LineSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/variables/LineSeries) * **Data format**: [`LineData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LineData) or [`WhitespaceData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/WhitespaceData) * **Style options**: a mix of [`SeriesOptionsCommon`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon) and [`LineStyleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/LineStyleOptions) This series is represented with a set of data points connected by straight line segments: const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];lineSeries.setData(data);chart.timeScale().fitContent(); ### Custom series (plugins)[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#custom-series-plugins "Direct link to Custom series (plugins)") The library enables you to create custom series types, also known as series plugins, to expand its functionality. With this feature, you can add new series types, indicators, and other visualizations. To define a custom series type, create a class that implements the [`ICustomSeriesPaneView`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ICustomSeriesPaneView) interface. This class defines the rendering code that Lightweight Charts™ uses to draw the series on the chart. Once your custom series type is defined, it can be added to any chart instance using the [`addCustomSeries()`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#addcustomseries) method. Custom series types function like any other series. For more information, refer to the [Plugins](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro) article. Customization[​](https://tradingview.github.io/lightweight-charts/docs/next/series-types#customization "Direct link to Customization") --------------------------------------------------------------------------------------------------------------------------------------- Each series type offers a unique set of customization options listed on the [`SeriesStyleOptionsMap`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesStyleOptionsMap) page. You can adjust series options in two ways: * Specify the default options using the corresponding parameter while creating a series: // Change default top & bottom colors of an area series in creating timeconst series = chart.addSeries(AreaSeries, { topColor: 'red', bottomColor: 'green',}); * Use the [`ISeriesApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#applyoptions) method to apply other options on the fly: // Updating candlestick series options on the flycandlestickSeries.applyOptions({ upColor: 'red', downColor: 'blue',}); * [Supported types](https://tradingview.github.io/lightweight-charts/docs/next/series-types#supported-types) * [Area](https://tradingview.github.io/lightweight-charts/docs/next/series-types#area) * [Bar](https://tradingview.github.io/lightweight-charts/docs/next/series-types#bar) * [Baseline](https://tradingview.github.io/lightweight-charts/docs/next/series-types#baseline) * [Candlestick](https://tradingview.github.io/lightweight-charts/docs/next/series-types#candlestick) * [Histogram](https://tradingview.github.io/lightweight-charts/docs/next/series-types#histogram) * [Line](https://tradingview.github.io/lightweight-charts/docs/next/series-types#line) * [Custom series (plugins)](https://tradingview.github.io/lightweight-charts/docs/next/series-types#custom-series-plugins) * [Customization](https://tradingview.github.io/lightweight-charts/docs/next/series-types#customization) --- # Time zones | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/time-zones) ** (5.1). Version: Next On this page Overview[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#overview "Direct link to Overview") ---------------------------------------------------------------------------------------------------------------------- Lightweight Charts™ **does not** natively **support** time zones. If necessary, you should handle time zone adjustments manually. The library processes all date and time values in UTC. To support time zones, adjust each bar's timestamp in your dataset based on the appropriate time zone offset. Therefore, a UTC timestamp should correspond to the local time in the target time zone. Consider the example. A data point has the `2021-01-01T10:00:00.000Z` timestamp in UTC. You want to display it in the `Europe/Moscow` time zone, which has the `UTC+03:00` offset according to the [IANA time zone database](https://www.iana.org/time-zones) . To do this, adjust the original UTC timestamp by adding 3 hours. Therefore, the new timestamp should be `2021-01-01T13:00:00.000Z`. info When converting time zones, consider the following: * Adding a time zone offset could change not only the time but the date as well. * An offset may vary due to DST (Daylight Saving Time) or other regional adjustments. * If your data is measured in business days and does not include a time component, in most cases, you should not adjust it to a time zone. Approaches[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#approaches "Direct link to Approaches") ---------------------------------------------------------------------------------------------------------------------------- Consider the approaches below to convert time values to the required time zone. ### Using pure JavaScript[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-pure-javascript "Direct link to Using pure JavaScript") For more information on this approach, refer to [StackOverflow](https://stackoverflow.com/a/54127122/3893439) . function timeToTz(originalTime, timeZone) { const zonedDate = new Date(new Date(originalTime * 1000).toLocaleString('en-US', { timeZone })); return zonedDate.getTime() / 1000;} If you only need to support a client (local) time zone, you can use the following function: function timeToLocal(originalTime) { const d = new Date(originalTime * 1000); return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;} ### Using the date-fns-tz library[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-date-fns-tz-library "Direct link to Using the date-fns-tz library") You can use the `utcToZonedTime` function from the [`date-fns-tz`](https://github.com/marnusw/date-fns-tz) library as follows: import { utcToZonedTime } from 'date-fns-tz';function timeToTz(originalTime, timeZone) { const zonedDate = utcToZonedTime(new Date(originalTime * 1000), timeZone); return zonedDate.getTime() / 1000;} ### Using the IANA time zone database[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-iana-time-zone-database "Direct link to Using the IANA time zone database") If you process a large dataset and approaches above do not meet your performance requirements, consider using the [`tzdata`](https://www.npmjs.com/package/tzdata) . This approach can significantly improve performance for the following reasons: * You do not need to calculate the time zone offset for every data point individually. Instead, you can look up the correct offset just once for the first timestamp using a fast binary search. * After finding the starting offset, you go through the rest data and check whether an offset should be changed, for example, because of DST starting/ending. Why are time zones not supported?[​](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#why-are-time-zones-not-supported "Direct link to Why are time zones not supported?") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ The approaches above were not implemented in Lightweight Charts™ for the following reasons: * Using [pure JavaScript](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-pure-javascript) is slow. In our tests, processing 100,000 data points took over 20 seconds. * Using the [date-fns-tz library](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-date-fns-tz-library) introduces additional dependencies and is also slow. In our tests, processing 100,000 data points took 18 seconds. * Incorporating the [IANA time zone database](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-iana-time-zone-database) increases the bundle size by [29.9 kB](https://bundlephobia.com/package/tzdata) , which is nearly the size of the entire Lightweight Charts™ library. Since time zone support is not required for all users, it is intentionally left out of the library to maintain high performance and a lightweight package size. * [Overview](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#overview) * [Approaches](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#approaches) * [Using pure JavaScript](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-pure-javascript) * [Using the date-fns-tz library](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-date-fns-tz-library) * [Using the IANA time zone database](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#using-the-iana-time-zone-database) * [Why are time zones not supported?](https://tradingview.github.io/lightweight-charts/docs/next/time-zones#why-are-time-zones-not-supported) --- # Chart types | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/chart-types) ** (5.1). Version: Next On this page Lightweight Charts offers different types of charts to suit various data visualization needs. This article provides an overview of the available chart types and how to create them. Standard Time-based Chart[​](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#standard-time-based-chart "Direct link to Standard Time-based Chart") -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The standard time-based chart is the most common type, suitable for displaying time series data. * **Creation method**: [`createChart`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChart) * **Horizontal scale**: Time-based * **Use case**: General-purpose charting for financial and time series data import { createChart } from 'lightweight-charts';const chart = createChart(document.getElementById('container'), options); This chart type uses time values for the horizontal scale and is ideal for most financial and time series data visualizations. const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };const chart = createChart(document.getElementById('container'), chartOptions);const areaSeries = chart.addSeries(AreaSeries, { lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)' });const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];areaSeries.setData(data);chart.timeScale().fitContent(); Yield Curve Chart[​](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#yield-curve-chart "Direct link to Yield Curve Chart") -------------------------------------------------------------------------------------------------------------------------------------------------- The yield curve chart is specifically designed for displaying yield curves, common in financial analysis. * **Creation method**: [`createYieldCurveChart`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createYieldCurveChart) * **Horizontal scale**: Linearly spaced, defined in monthly time duration units * **Key differences**: * Whitespace is ignored for crosshair and grid lines * Specialized for yield curve representation import { createYieldCurveChart } from 'lightweight-charts';const chart = createYieldCurveChart(document.getElementById('container'), options); Use this chart type when you need to visualize yield curves or similar financial data where the horizontal scale represents time durations rather than specific dates. tip If you want to spread out the beginning of the plot further and don't need a linear time scale, you can enforce a minimum spacing around each point by increasing the [`minBarSpacing`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScaleOptions#minbarspacing) option in the TimeScaleOptions. To prevent the rest of the chart from spreading too wide, adjust the `baseResolution` to a larger number, such as `12` (months). const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } }, yieldCurve: { baseResolution: 1, minimumTimeRange: 10, startTimeRange: 3 }, handleScroll: false, handleScale: false,};const chart = createYieldCurveChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const curve = [{ time: 1, value: 5.378 }, { time: 2, value: 5.372 }, { time: 3, value: 5.271 }, { time: 6, value: 5.094 }, { time: 12, value: 4.739 }, { time: 24, value: 4.237 }, { time: 36, value: 4.036 }, { time: 60, value: 3.887 }, { time: 84, value: 3.921 }, { time: 120, value: 4.007 }, { time: 240, value: 4.366 }, { time: 360, value: 4.290 }];lineSeries.setData(curve);chart.timeScale().fitContent(); Options Chart (Price-based)[​](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#options-chart-price-based "Direct link to Options Chart (Price-based)") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ The options chart is a specialized type that uses price values on the horizontal scale instead of time. * **Creation method**: [`createOptionsChart`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createOptionsChart) * **Horizontal scale**: Price-based (numeric) * **Use case**: Visualizing option chains, price distributions, or any data where price is the primary x-axis metric import { createOptionsChart } from 'lightweight-charts';const chart = createOptionsChart(document.getElementById('container'), options); This chart type is particularly useful for financial instruments like options, where the price is a more relevant x-axis metric than time. const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } },};const chart = createOptionsChart(document.getElementById('container'), chartOptions);const lineSeries = chart.addSeries(LineSeries, { color: '#2962FF' });const data = [];for (let i = 0; i < 1000; i++) { data.push({ time: i * 0.25, value: Math.sin(i / 100) + i / 500, });}lineSeries.setData(data);chart.timeScale().fitContent(); Custom Horizontal Scale Chart[​](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#custom-horizontal-scale-chart "Direct link to Custom Horizontal Scale Chart") -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- For advanced use cases, Lightweight Charts allows creating charts with custom horizontal scale behavior. * **Creation method**: [`createChartEx`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChartEx) * **Horizontal scale**: Custom-defined * **Use case**: Specialized charting needs with non-standard horizontal scales import { createChartEx, defaultHorzScaleBehavior } from 'lightweight-charts';const customBehavior = new (defaultHorzScaleBehavior())();// Customize the behavior as neededconst chart = createChartEx(document.getElementById('container'), customBehavior, options); This method provides the flexibility to define custom horizontal scale behavior, allowing for unique and specialized chart types. Choosing the Right Chart Type[​](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#choosing-the-right-chart-type "Direct link to Choosing the Right Chart Type") -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Use `createChart` for most standard time-based charting needs. * Choose `createYieldCurveChart` when working specifically with yield curves or similar financial data. * Opt for `createOptionsChart` when you need to visualize data with price as the primary horizontal axis, such as option chains. * Use `createChartEx` when you need a custom horizontal scale behavior that differs from the standard time-based or price-based scales. Each chart type provides specific functionality and is optimized for different use cases. Consider your data structure and visualization requirements when selecting the appropriate chart type for your application. * [Standard Time-based Chart](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#standard-time-based-chart) * [Yield Curve Chart](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#yield-curve-chart) * [Options Chart (Price-based)](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#options-chart-price-based) * [Custom Horizontal Scale Chart](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#custom-horizontal-scale-chart) * [Choosing the Right Chart Type](https://tradingview.github.io/lightweight-charts/docs/next/chart-types#choosing-the-right-chart-type) --- # Time scale | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/time-scale) ** (5.1). Version: Next On this page Overview[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#overview "Direct link to Overview") ---------------------------------------------------------------------------------------------------------------------- Time scale (or time axis) is a horizontal scale that displays the time of data points at the bottom of the chart. ![Time scale]() The horizontal scale can also represent price or other custom values. Refer to the [Chart types](https://tradingview.github.io/lightweight-charts/docs/next/chart-types) article for more information. ### Time scale appearance[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#time-scale-appearance "Direct link to Time scale appearance") Use [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScaleOptions) to adjust the time scale appearance. You can specify these options in two ways: * On chart initialization. To do this, provide the desired options as a [`timeScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ChartOptionsBase#timescale) parameter when calling [`createChart`](https://tradingview.github.io/lightweight-charts/docs/next/api/functions/createChart) . * On the fly using either the [`ITimeScaleApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#applyoptions) or [`IChartApi.applyOptions`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#applyoptions) method. Both methods produce the same result. ### Time scale API[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#time-scale-api "Direct link to Time scale API") Call the [`IChartApi.timeScale`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#timescale) method to get an instance of the [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi) interface. This interface provides an extensive API for controlling the time scale. For example, you can adjust the visible range, convert a time point or [index](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Logical) to a coordinate, and subscribe to events. chart.timeScale().resetTimeScale(); Visible range[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#visible-range "Direct link to Visible range") ------------------------------------------------------------------------------------------------------------------------------------- Visible range is a chart area that is currently visible on the canvas. This area can be measured with both [data](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#data-range) and [logical](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#logical-range) range. Data range usually includes bar timestamps, while logical range has bar indices. You can adjust the visible range using the following methods: * [`setVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#setvisiblerange) * [`getVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#getvisiblerange) * [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) * [`getVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#getvisiblelogicalrange) ### Data range[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#data-range "Direct link to Data range") The data range includes only values from the first to the last bar visible on the chart. If the visible area has empty space, this part of the scale is not included in the data range. Note that you cannot extrapolate time with the [`setVisibleRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#setvisiblerange) method. For example, the chart does not have data prior `2018-01-01` date. If you set the visible range from `2016-01-01`, it will be automatically adjusted to `2018-01-01`. If you want to adjust the visible range more flexible, operate with the [logical range](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#logical-range) instead. ### Logical range[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#logical-range "Direct link to Logical range") The logical range represents a continuous line of values. These values are logical [indices](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/Logical) on the scale that illustrated as red lines in the image below: ![Logical range]() The logical range starts from the first data point across all series, with negative indices before it and positive ones after. The indices can have fractional parts. The integer part represents the fully visible bar, while the fractional part indicates partial visibility. For example, the `5.2` index means that the fifth bar is fully visible, while the sixth bar is 20% visible. A half-index, such as `3.5`, represents the middle of the bar. In the library, the logical range is represented with the [`LogicalRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/type-aliases/LogicalRange) object. This object has the `from` and `to` properties, which are logical indices on the time scale. For example, the visible logical range on the chart above is approximately from `-4.73` to `5.05`. The [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) method allows you to specify the visible range beyond the bounds of the available data. This can be useful for setting a [chart margin](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#chart-margin) or aligning series visually. Chart margin[​](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#chart-margin "Direct link to Chart margin") ---------------------------------------------------------------------------------------------------------------------------------- Margin is the space between the chart's borders and the series. It depends on the following time scale options: * [`barSpacing`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScaleOptions#barspacing) . The default value is `6`. * [`rightOffset`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/TimeScaleOptions#rightoffset) . The default value is `0`. You can specify these options as described [above](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#time-scale-appearance) . Note that if a series contains only a few data points, the chart may have a large margin on the left side. ![A series with a few points](https://tradingview.github.io/lightweight-charts/assets/images/extra-margin-c1f99247fd0192e01717a0e48e073f13.png) In this case, you can call the [`fitContent`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#fitcontent) method that adjust the view and fits all data within the chart. chart.timeScale().fitContent(); If calling `fitContent` has no effect, it might be due to how the library displays data. The library allocates specific width for each data point to maintain consistency between different chart types. For example, for line series, the plot point is placed at the center of this allocated space, while candlestick series use most of the width for the candle body. The allocated space for each data point is proportional to the chart width. As a result, series with fewer data points may have a small margin on both sides. ![Margin](https://tradingview.github.io/lightweight-charts/assets/images/margin-ba3ba588b8212ea7b6415220ab39424a.png) You can specify the [logical range](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#logical-range) with the [`setVisibleLogicalRange`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ITimeScaleApi#setvisiblelogicalrange) method to display the series exactly to the edges. For example, the code sample below adjusts the range by half a bar-width on both sides. const vr = chart.timeScale().getVisibleLogicalRange();chart.timeScale().setVisibleLogicalRange({ from: vr.from + 0.5, to: vr.to - 0.5 }); * [Overview](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#overview) * [Time scale appearance](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#time-scale-appearance) * [Time scale API](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#time-scale-api) * [Visible range](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#visible-range) * [Data range](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#data-range) * [Logical range](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#logical-range) * [Chart margin](https://tradingview.github.io/lightweight-charts/docs/next/time-scale#chart-margin) --- # Plugins | Lightweight Charts [Skip to main content](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#__docusaurus_skipToContent_fallback) This is unreleased documentation for Lightweight Charts **Next** version. For up-to-date documentation, see the **[latest version](https://tradingview.github.io/lightweight-charts/docs/plugins/intro) ** (5.1). Version: Next On this page Plugins allow you to extend the library's functionality and render custom elements, such as new series, drawing tools, indicators, and watermarks. You can create plugins of the following types: * [Custom series](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#custom-series) — define new types of series. * [Primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#primitives) — define custom visualizations, drawing tools, and chart annotations that can be attached to an existing series ([series primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#series-primitives) ) or chart pane ([pane primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#pane-primitives) ). Tips * Use the [create-lwc-plugin](https://www.npmjs.com/package/create-lwc-plugin) npm package to quickly scaffold a project for your custom plugin. * Explore the [Plugin Examples Demo](https://tradingview.github.io/lightweight-charts/plugin-examples) page that hosts interactive examples of heatmaps, alerts, watermarks, and tooltips implemented with plugins. You can find the code of these examples in the [`plugin-examples`](https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples) folder in the Lightweight Charts™ repository. Custom series[​](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#custom-series "Direct link to Custom series") ---------------------------------------------------------------------------------------------------------------------------------------- Custom series allow you to define new types of series with custom data structures and rendering logic. For implementation details, refer to the [Custom Series Types](https://tradingview.github.io/lightweight-charts/docs/next/plugins/custom_series) article. Use the [`addCustomSeries`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IChartApi#addcustomseries) method to add a custom series to the chart. Then, you can manage it through the same API available for built-in series. For example, call the [`setData`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#setdata) method to populate the series with data. javascript class MyCustomSeries { /* Class implementing the ICustomSeriesPaneView interface */}// Create an instantiated custom seriesconst customSeriesInstance = new MyCustomSeries();const chart = createChart(document.getElementById('container'));const myCustomSeries = chart.addCustomSeries(customSeriesInstance, { // Options for MyCustomSeries customOption: 10,});const data = [ { time: 1642425322, value: 123, customValue: 456 }, /* ... more data */];myCustomSeries.setData(data); Primitives[​](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#primitives "Direct link to Primitives") ------------------------------------------------------------------------------------------------------------------------------- Primitives allow you to define custom visualizations, drawing tools, and chart annotations. You can render them at different levels in the visual stack to create complex, layered compositions. ### Series primitives[​](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#series-primitives "Direct link to Series primitives") Series primitives are attached to a specific series and can render on the main pane, price and time scales. For implementation details, refer to the [Series Primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/series-primitives) article. Use the [`attachPrimitive`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/ISeriesApi#attachprimitive) method to add a primitive to the chart and attach it to the series. javascript class MyCustomPrimitive { /* Class implementing the ISeriesPrimitive interface */}// Create an instantiated series primitiveconst myCustomPrimitive = new MyCustomPrimitive();const chart = createChart(document.getElementById('container'));const lineSeries = chart.addSeries(LineSeries);const data = [ { time: 1642425322, value: 123 }, /* ... more data */];// Attach the primitive to the serieslineSeries.attachPrimitive(myCustomPrimitive); ### Pane primitives[​](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#pane-primitives "Direct link to Pane primitives") Pane primitives are attached to a chart pane rather than a specific series. You can use them to create chart-wide annotations and features like watermarks. For implementation details, refer to the [Pane Primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/pane-primitives) article. caution Note that pane primitives cannot render on the price or time scale. Use the [`attachPrimitive`](https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/IPaneApi#attachprimitive) method to add a primitive to the chart and attach it to the pane. class MyCustomPanePrimitive { /* Class implementing the IPanePrimitive interface */}// Create an instantiated pane primitiveconst myCustomPanePrimitive = new MyCustomPanePrimitive();const chart = createChart(document.getElementById('container'));// Get the main paneconst mainPane = chart.panes()[0];// Attach the primitive to the panemainPane.attachPrimitive(myCustomPanePrimitive); * [Custom series](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#custom-series) * [Primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#primitives) * [Series primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#series-primitives) * [Pane primitives](https://tradingview.github.io/lightweight-charts/docs/next/plugins/intro#pane-primitives) ---