### Install Example Dependencies with CocoaPods

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/ios

After cloning the LightweightChartsIOS repository and navigating to the Example directory, run 'pod install' to set up the project dependencies for the example application.

```bash
pod install
```

--------------------------------

### JavaScript Example for Plugin Creation

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/release-notes

This snippet represents the setup for creating a plugin for Lightweight Charts using the create-lwc-plugin NPM package.

```javascript
// This is a placeholder for the actual code generated by create-lwc-plugin.
// It would typically involve setting up a new project structure for a plugin.
console.log('Plugin creation setup using create-lwc-plugin.');

```

--------------------------------

### Install Lightweight Charts

Source: https://tradingview.github.io/lightweight-charts/docs/5.0

Install the lightweight-charts npm package to begin using the library in your project.

```bash
npm install --save lightweight-charts  

```

--------------------------------

### Custom Color Parsers Example

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/LayoutOptions

Example demonstrating how to define custom color parsers for non-standard color formats. Parsers are tried in order until one returns a non-null result. This option should be set during chart creation.

```typescript
[
  // Example custom parser for Display P3 colors
  (value: string) => {
    if (value.startsWith('color(display-p3 ')) {
      // Parse the color string and return Rgba array or null
      // ... implementation details ...
      return null; // Placeholder
    }
    return null;
  },
  // Add other custom parsers here...
]
```

--------------------------------

### BusinessDay Example

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/BusinessDay

An example of how to define a BusinessDay object with year, month, and day properties.

```typescript
const day = { year: 2019, month: 6, day: 1 }; // June 1, 2019  
```

--------------------------------

### JavaScript Example for Horizontal Price Scale

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/release-notes

A test case demonstrating the use of a horizontal price scale. This example is part of the Lightweight Charts test suite.

```javascript
// This is a placeholder for the actual code from horizontal-price-scale.js
// The actual code would demonstrate how to configure and use a custom horizontal scale.
console.log('Horizontal price scale example code goes here.');

```

--------------------------------

### Line Series Creation in v4

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Example of creating a line series using the v4 API.

```javascript
import { createChart } from 'lightweight-charts';
const chart = createChart(container, {});
const lineSeries = chart.addLineSeries({ color: 'red' });

```

--------------------------------

### Configure AutoscaleInfoProvider with Price Range and Margins

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesOptionsCommon

This example demonstrates how to customize the autoscale behavior by specifying both a price range and margins. This allows for additional padding above and below the data range.

```javascript
const firstSeries = chart.addSeries(LineSeries, {
    autoscaleInfoProvider: () => ({
        priceRange: {
            minValue: 0,
            maxValue: 100,
        },
        margins: {
            above: 10,
            below: 10,
        },
    }),
});

```

--------------------------------

### Series Markers Management in v4

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Demonstrates how series markers were managed directly through the series instance in v4, including setting and getting markers.

```javascript
// Markers were directly managed through the series instance
series.setMarkers([
    {
        time: '2019-04-09',
        position: 'aboveBar',
        color: 'black',
        shape: 'arrowDown',
    },
]);

// Getting markers
const markers = series.markers();

```

--------------------------------

### Watermark Configuration in v4

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Example of configuring a text watermark using the options object in v4.

```javascript
const chart = createChart(container, {
    watermark: {
        text: 'Watermark Text',
        color: 'rgba(255,0,0,0.5)',
    },
});

```

--------------------------------

### Line Series Creation in v5 (ESM)

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Example of creating a line series using the v5 API with ES Modules. Ensure specific series types are imported.

```javascript
import { createChart, LineSeries } from 'lightweight-charts';
const chart = createChart(container, {});
const lineSeries = chart.addSeries(LineSeries, { color: 'red' });

```

--------------------------------

### Handling Time Value Types with Helpers

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v3-to-v4

This example demonstrates how to use helper functions like `isUTCTimestamp` and `isBusinessDay` to determine the type of time values received in event parameters.

```javascript
import {
    createChart,
    isUTCTimestamp,
    isBusinessDay,
} from 'lightweight-charts';

const chart = createChart(document.body);

chart.subscribeClick(param => {
    if (param.time === undefined) {
        // the time is undefined, i.e. there is no any data point where a time could be received from
        return;
    }

    if (isUTCTimestamp(param.time)) {
        // param.time is UTCTimestamp
    } else if (isBusinessDay(param.time)) {
        // param.time is a BusinessDay object
    } else {
        // param.time is a business day string in ISO format, e.g. '2010-01-01'
    }
});
```

--------------------------------

### Consistent Time Values in v4

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v3-to-v4

In v4, the library returns the same time values that were provided. This example shows how to use the consistent time values with formatters and event handlers.

```javascript
series.setData([
    { time: '2001-01-01', value: 1 },
]);

chart.applyOptions({
    localization: {
        timeFormatter: time => time, // will be '2001-01-01' for the bar above
    },
    timeScale: {
        tickMarkFormatter: time => time, // will be '2001-01-01' for the bar above
    },
});

chart.subscribeCrosshairMove(param => {
    console.log(param.time); // will be '2001-01-01' if you hover the bar above
});

chart.subscribeClick(param => {
    console.log(param.time); // will be '2001-01-01' if you click on the bar above
});
```

--------------------------------

### Series Markers Management in v5

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Shows the v5 approach to managing series markers using the `createSeriesMarkers` primitive for setting, getting, and updating markers.

```javascript
// Import the markers primitive
import { createSeriesMarkers } from 'lightweight-charts';

// Create a markers primitive instance
const seriesMarkers = createSeriesMarkers(series, [
    {
        time: '2019-04-09',
        position: 'aboveBar',
        color: 'black',
        shape: 'arrowDown',
    },
]);

// Getting markers
const markers = seriesMarkers.markers();

// Updating markers
seriesMarkers.setMarkers([/* new markers */]);

// Remove all markers
seriesMarkers.setMarkers([]);

```

--------------------------------

### Install Lightweight Charts with CocoaPods

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/ios

Integrate Lightweight Charts into your Xcode project using CocoaPods by specifying the version in your Podfile.

```ruby
pod 'LightweightCharts', '~> 3.8.0'
```

--------------------------------

### Time Type Examples

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/type-aliases/Time

Demonstrates the different formats accepted by the Time type alias: UTCTimestamp, BusinessDay object, and business day string.

```javascript
const timestamp = 1529899200; // Literal timestamp representing 2018-06-25T04:00:00.000Z  
const businessDay = { year: 2019, month: 6, day: 1 }; // June 1, 2019  
const businessDayString = '2021-02-03'; // Business day string literal  

```

--------------------------------

### Line Series Creation in v5 (UMD)

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Example of creating a line series using the v5 API with UMD builds. Series types are accessed via the LightweightCharts namespace.

```javascript
const chart = LightweightCharts.createChart(container, {});
const lineSeries = chart.addSeries(LightweightCharts.LineSeries, { color: 'red' });

```

--------------------------------

### Implement Multi-Line Text Watermark (v5)

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

Shows how to implement a text watermark with multiple lines, each having customizable text, color, font size, style, and family. This example assumes chart and series data are already set up.

```javascript
const chart = createChart(container, options);
const mainSeries = chart.addSeries(LineSeries);
mainSeries.setData(generateData());

const firstPane = chart.panes()[0];
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',
        },
    ],
});

```

--------------------------------

### Crosshair Line Style Example

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/CrosshairLineOptions

Demonstrates setting the style for a crosshair line. The default value is LineStyle.LargeDashed.

```typescript
{
    style: LineStyle.LargeDashed
}
```

--------------------------------

### Configure AutoscaleInfoProvider with Price Range

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesOptionsCommon

This example shows how to set a custom price range for autoscale information when adding a series. It overrides the default autoscale behavior to fix the visible price range.

```javascript
const firstSeries = chart.addSeries(LineSeries, {
    autoscaleInfoProvider: () => ({
        priceRange: {
            minValue: 0,
            maxValue: 100,
        },
    }),
});

```

--------------------------------

### Whitespace Data Example

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/WhitespaceData

Demonstrates how to include whitespace data points in a chart dataset. Whitespace is indicated by omitting the 'value' property for a given time entry.

```javascript
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 },
];

```

--------------------------------

### Create and Configure Text Watermark

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createTextWatermark

Demonstrates how to create a text watermark on the first pane of a chart. It shows how to set alignment, text content, color, font size, style, and family for multiple lines. It also includes examples of updating options and detaching the watermark.

```typescript
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 options  
textWatermark.applyOptions({ horzAlign: 'left' });  
// to remove watermark from the pane  
textWatermark.detach();  


```

--------------------------------

### Override AutoscaleInfoProvider with Original Data Modification

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesOptionsCommon

This example shows how to override the autoscale info provider to modify the original autoscale calculation. It expands the default price range by a fixed amount.

```javascript
const firstSeries = chart.addSeries(LineSeries, {
    autoscaleInfoProvider: original => {
        const res = original();
        if (res !== null) {
            res.priceRange.minValue -= 10;
            res.priceRange.maxValue += 10;
        }
        return res;
    },
});

```

--------------------------------

### createOptionsChart

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api

Creates a chart instance using predefined options.

```APIDOC
## createOptionsChart

### Description
Creates a chart instance using predefined options.

### Signature
createOptionsChart(container: string | HTMLElement, options?: ChartOptions)

### Parameters
#### container
- **container** (string | HTMLElement) - Required - The DOM element or its ID where the chart will be rendered.

#### options
- **options** (ChartOptions) - Optional - Configuration options for the chart.
```

--------------------------------

### Add and Set Data for a Line Series

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/series-types

Demonstrates how to create a line series, set its data, and fit the chart content. Ensure the chart container and initial options are set up before adding the series.

```javascript
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();  


```

--------------------------------

### Import createChart Function

Source: https://tradingview.github.io/lightweight-charts/docs/5.0

Import the necessary createChart function from the lightweight-charts library to initialize a chart.

```javascript
import { createChart } from 'lightweight-charts';  

```

--------------------------------

### backColor()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveAxisView

Gets the background color of the label.

```APIDOC
## backColor()

### Description
Gets the background color of the label.

### Returns
`string` - The background color of the label.
```

--------------------------------

### textColor()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveAxisView

Gets the text color of the label.

```APIDOC
## textColor()

### Description
Gets the text color of the label.

### Returns
`string` - The text color of the label.
```

--------------------------------

### text()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveAxisView

Gets the text content of the label.

```APIDOC
## text()

### Description
Gets the text content of the label.

### Returns
`string` - The text of the label.
```

--------------------------------

### height

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ITimeScaleApi

Gets the current height of the time scale in pixels.

```APIDOC
## height()

### Description
Returns the height of the time scale in pixels.

### Method
GET

### Endpoint
/timeScale/height

### Returns
#### Success Response
- **height** (number) - The height of the time scale.
```

--------------------------------

### width

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ITimeScaleApi

Gets the current width of the time scale in pixels.

```APIDOC
## width()

### Description
Returns the width of the time scale in pixels.

### Method
GET

### Endpoint
/timeScale/width

### Returns
#### Success Response
- **width** (number) - The width of the time scale.
```

--------------------------------

### Configure Overlay Series

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v2-to-v3

To create an overlay series, set the `priceScaleId` to an empty string ('') for the series.

```javascript
const histogramSeries = chart.addHistogramSeries({
    overlay: true,
});

```

```javascript
const histogramSeries = chart.addHistogramSeries({
    // or any other _the same_ id for all overlay series
    priceScaleId: '',
});

```

--------------------------------

### Get Series Type

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Returns the current type of the series (e.g., 'Line', 'Candlestick').

```typescript
const lineSeries = chart.addSeries(LineSeries);
console.log(lineSeries.seriesType()); // "Line"

const candlestickSeries = chart.addCandlestickSeries();
console.log(candlestickSeries.seriesType()); // "Candlestick"
```

--------------------------------

### Get All Series Data

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Retrieves all data points currently in the series as a read-only array.

```typescript
const originalData = series.data();
```

--------------------------------

### Series Creation Migration Reference

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v4-to-v5

A reference table showing the migration from v4 series creation methods to v5 `addSeries` syntax for various series types.

```plaintext
v4 Method| v5 Method  
---|---
`chart.addLineSeries(options)`| `chart.addSeries(LineSeries, options)`
`chart.addAreaSeries(options)`| `chart.addSeries(AreaSeries, options)`
`chart.addBarSeries(options)`| `chart.addSeries(BarSeries, options)`
`chart.addBaselineSeries(options)`| `chart.addSeries(BaselineSeries, options)`
`chart.addCandlestickSeries(options)`| `chart.addSeries(CandlestickSeries, options)`
`chart.addHistogramSeries(options)`| `chart.addSeries(HistogramSeries, options)`

```

--------------------------------

### Get All Panes API

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi

Retrieves an array containing the API objects for all panes currently present in the chart.

```typescript
const panes = chart.panes();
```

--------------------------------

### SeriesDataItemTypeMap Interface

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/SeriesDataItemTypeMap

Represents the type of data that a series contains. For example, a bar series contains BarData or WhitespaceData.

```APIDOC
## Interface: SeriesDataItemTypeMap<HorzScaleItem>

Represents the type of data that a series contains. For example a bar series contains BarData or WhitespaceData.

### Type parameters

• **HorzScaleItem** = `Time`

### Properties

#### Bar

> **Bar** : `WhitespaceData`<`HorzScaleItem`> | `BarData`<`HorzScaleItem`>

The types of bar series data.

* * *

#### Candlestick

> **Candlestick** : `WhitespaceData`<`HorzScaleItem`> | `CandlestickData`<`HorzScaleItem`>

The types of candlestick series data.

* * *

#### Area

> **Area** : `AreaData`<`HorzScaleItem`> | `WhitespaceData`<`HorzScaleItem`>

The types of area series data.

* * *

#### Baseline

> **Baseline** : `WhitespaceData`<`HorzScaleItem`> | `BaselineData`<`HorzScaleItem`>

The types of baseline series data.

* * *

#### Line

> **Line** : `WhitespaceData`<`HorzScaleItem`> | `LineData`<`HorzScaleItem`>

The types of line series data.

* * *

#### Histogram

> **Histogram** : `WhitespaceData`<`HorzScaleItem`> | `HistogramData`<`HorzScaleItem`>

The types of histogram series data.

* * *

#### Custom

> **Custom** : `CustomData`<`HorzScaleItem`> | `CustomSeriesWhitespaceData`<`HorzScaleItem`>

The base types of an custom series data.
```

--------------------------------

### createChartEx

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api

Creates a new chart instance with extended options, allowing for more advanced configurations.

```APIDOC
## createChartEx

### Description
Creates a new chart instance with extended options.

### Signature
createChartEx(container: string | HTMLElement, options?: ChartOptions)

### Parameters
#### container
- **container** (string | HTMLElement) - Required - The DOM element or its ID where the chart will be rendered.

#### options
- **options** (ChartOptions) - Optional - Configuration options for the chart.
```

--------------------------------

### seriesOrder

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Gets the zero-based index of this series within the list of all series on the current pane. This indicates the rendering order.

```APIDOC
## seriesOrder()

### Description
Gets the zero-based index of this series within the list of all series on the current pane.

### Method
(Implicitly a method call on a Series API object)

### Parameters
None

### Response
#### Success Response
`number` - The current index of the series in the pane's series collection.

### Response Example
```json
{
  "example": 1
}
```
```

--------------------------------

### Get Time Scale Options

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ITimeScaleApi

Retrieves the current options applied to the time scale. The returned options are read-only.

```javascript
const currentOptions = chart.timeScale().options();
console.log(currentOptions.timeVisible);
```

--------------------------------

### version

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api

Returns the version of the Lightweight Charts library.

```APIDOC
## version

### Description
Returns the version of the Lightweight Charts library.

### Signature
version(): string
```

--------------------------------

### scrollPosition

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ITimeScaleApi

Gets the current scroll position of the time scale, measured in bars from the right edge to the latest bar.

```APIDOC
## scrollPosition()

### Description
Returns the distance from the right edge of the time scale to the latest bar of the series, measured in bars.

### Method
GET

### Endpoint
/timeScale/scrollPosition

### Returns
#### Success Response
- **scrollPosition** (number) - The distance in bars.
```

--------------------------------

### Add Repositories to Project-Level Gradle

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/android

Configure your project-level build.gradle file to include the necessary repositories for fetching dependencies.

```gradle
allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

```

--------------------------------

### Get Chart Options

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi

Retrieves a read-only object containing all the currently applied options for the chart, including default values.

```typescript
const options = chart.options();
```

--------------------------------

### Get Data by Index

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Retrieves a data item by its logical index. Optionally, specifies a direction to search if the exact index is not found.

```typescript
const originalData = series.dataByIndex(10, LightweightCharts.MismatchDirection.NearestLeft);
```

--------------------------------

### Import Lightweight Charts Library in Swift

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/ios

Import the LightweightCharts library into your Swift file to begin using its functionalities for chart creation.

```swift
import LightweightCharts
```

--------------------------------

### Renamed `hoveredMarkerId` to `hoveredObjectId`

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v3-to-v4

In v4, `hoveredMarkerId` has been renamed to `hoveredObjectId`. Use `hoveredObjectId` to get the ID of the hovered object in crosshair move and click events.

```javascript
chart.subscribeCrosshairMove(param => {
    console.log(param.hoveredObjectId);
});

chart.subscribeClick(param => {
    console.log(param.hoveredObjectId);
});
```

--------------------------------

### version()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/version

Returns the current version of the Lightweight Charts library as a string.

```APIDOC
## version()

### Description
Returns the current version of the Lightweight Charts library as a string. For example, `'3.3.0'`.

### Returns
`string` - The current version of the library.
```

--------------------------------

### options

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPriceScaleApi

Returns the currently applied options of the price scale, including any default values.

```APIDOC
## options

### Description
Returns currently applied options of the price scale.

### Method
`options(): Readonly<PriceScaleOptions>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

### Request Example
None

### Response
#### Success Response (Readonly<PriceScaleOptions>)
Full set of currently applied options, including defaults.

#### Response Example
```json
{
  "autoScale": true,
  "mode": "normal",
  "priceLineSource": "lastBar",
  "scaleMargins": {
    "top": 0.05,
    "bottom": 0.05
  },
  "ticks": {
    "color": "#888495",
    "textColor": "#888495",
    "visible": true
  },
  "borderVisible": true,
  "borderColor": "#2a2f37"
}
```
```

--------------------------------

### applyOptions()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPanePrimitiveWrapper

Applies options to the primitive, merging them deeply with the current options. This method is part of the IPanePrimitiveWrapper interface.

```APIDOC
## applyOptions(options)

### Description
Applies options to the primitive.

### Method
`applyOptions`

### Parameters
#### Path Parameters
- **options** (DeepPartial<Options>) - Required - Options to apply. The options are deeply merged with the current options.

### Returns
`void`
```

--------------------------------

### Get Time Scale API

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi

Retrieves the API for the chart's time scale. This API can be used to manipulate the time scale, such as zooming or scrolling.

```typescript
const timeScaleApi = chart.timeScale();
```

--------------------------------

### IPaneApi Methods

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IPaneApi

This section outlines the methods available on the IPaneApi interface for managing and interacting with chart panes.

```APIDOC
## getHeight()

### Description
Retrieves the height of the pane in pixels.

### Method
GET

### Endpoint
IPaneApi.getHeight()

### Returns
- **number**: The height of the pane in pixels.

---

## setHeight(height)

### Description
Sets the height of the pane.

### Method
POST

### Endpoint
IPaneApi.setHeight(height)

### Parameters
#### Path Parameters
- **height** (number): Required - The number of pixels to set as the height of the pane.

### Returns
- **void**

---

## moveTo(paneIndex)

### Description
Moves the pane to a new position.

### Method
POST

### Endpoint
IPaneApi.moveTo(paneIndex)

### Parameters
#### Path Parameters
- **paneIndex** (number): Required - The target index of the pane. Should be a number between 0 and the total number of panes - 1.

### Returns
- **void**

---

## paneIndex()

### Description
Retrieves the index of the pane.

### Method
GET

### Endpoint
IPaneApi.paneIndex()

### Returns
- **number**: The index of the pane. It is a number between 0 and the total number of panes - 1.

---

## getSeries()

### Description
Retrieves the array of series for the current pane.

### Method
GET

### Endpoint
IPaneApi.getSeries()

### Returns
- **ISeriesApi[]**: An array of series.

---

## getHTMLElement()

### Description
Retrieves the HTML element of the pane.

### Method
GET

### Endpoint
IPaneApi.getHTMLElement()

### Returns
- **HTMLElement**: The HTML element of the pane or null if pane wasn't created yet.

---

## attachPrimitive(primitive)

### Description
Attaches additional drawing primitive to the pane.

### Method
POST

### Endpoint
IPaneApi.attachPrimitive(primitive)

### Parameters
#### Path Parameters
- **primitive** (IPanePrimitive): Required - any implementation of IPanePrimitive interface.

### Returns
- **void**

---

## detachPrimitive(primitive)

### Description
Detaches additional drawing primitive from the pane. Does nothing if specified primitive was not attached.

### Method
POST

### Endpoint
IPaneApi.detachPrimitive(primitive)

### Parameters
#### Path Parameters
- **primitive** (IPanePrimitive): Required - implementation of IPanePrimitive interface attached before.

### Returns
- **void**

---

## priceScale(priceScaleId)

### Description
Returns the price scale with the given id.

### Method
GET

### Endpoint
IPaneApi.priceScale(priceScaleId)

### Parameters
#### Path Parameters
- **priceScaleId** (string): Required - ID of the price scale to find.

### Returns
- **IPriceScaleApi**: The price scale API.

### Throws
If the price scale with the given id is not found in this pane.

---

## setPreserveEmptyPane(preserve)

### Description
Sets whether to preserve the empty pane.

### Method
POST

### Endpoint
IPaneApi.setPreserveEmptyPane(preserve)

### Parameters
#### Path Parameters
- **preserve** (boolean): Required - Whether to preserve the empty pane.

### Returns
- **void**

---

## preserveEmptyPane()

### Description
Returns whether to preserve the empty pane.

### Method
GET

### Endpoint
IPaneApi.preserveEmptyPane()

### Returns
- **boolean**: Whether to preserve the empty pane.

---

## getStretchFactor()

### Description
Returns the stretch factor of the pane. Stretch factor determines the relative size of the pane compared to other panes.

### Method
GET

### Endpoint
IPaneApi.getStretchFactor()

### Returns
- **number**: The stretch factor of the pane. Default is 1.

---

```

--------------------------------

### Get Price Scale API

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApi

Retrieves the API for a specific price scale, identified by its ID and optionally its pane index. This allows for manipulation of that price scale.

```typescript
const priceScaleApi = chart.priceScale('left');
```

--------------------------------

### Create an Options Chart (Price-based)

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/chart-types

Initializes a specialized Options Chart where the horizontal scale is price-based (numeric) instead of time-based. Ideal for visualizing option chains or price distributions.

```javascript
import { createOptionsChart } from 'lightweight-charts';  
  
const chart = createOptionsChart(document.getElementById('container'), options);  

```

--------------------------------

### Get Bars Info in Logical Range

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Retrieves information about bars within a specified logical range of the chart. Useful for implementing data loading strategies.

```typescript
const barsInfo = series.barsInLogicalRange(chart.timeScale().getVisibleLogicalRange());
console.log(barsInfo);
```

--------------------------------

### Add Line Series to an Options Chart

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/chart-types

Adds a Line Series to an Options Chart and populates it with data. This example demonstrates generating synthetic data with a price-based x-axis.

```javascript
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();  

```

--------------------------------

### createChart()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createChart

Creates a new chart instance. This is the primary function to initialize a chart on a given HTML element with optional initial configuration.

```APIDOC
## Function: createChart()

### Description
This function is the simplified main entry point of the Lightweight Charting Library with time points for the horizontal scale.

### Parameters
#### Parameters
- **container** (string | HTMLElement) - Required - ID of HTML element or element itself
- **options** (DeepPartial<TimeChartOptions>) - Optional - Any subset of options to be applied at start.

### Returns
`IChartApi` - An interface to the created chart
```

--------------------------------

### applyOptions()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveWrapper

Applies options to the primitive. This method accepts a DeepPartial object of options and merges them with the current options. It returns void.

```APIDOC
## applyOptions(options)

### Description
Applies options to the primitive.

### Method
(options: DeepPartial<Options>) => void

### Parameters
#### Path Parameters
- **options** (DeepPartial<Options>) - Required - Options to apply. The options are deeply merged with the current options.

### Returns
void
```

--------------------------------

### Using createChartEx for Horizontal Scale Customization

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/release-notes

Use `createChartEx` instead of `createChart` when customizing the horizontal scale behavior. An instance of a class implementing `IHorzScaleBehavior` must be provided.

```javascript
import { createChartEx, IHorzScaleBehavior } from 'lightweight-charts';

// Example implementation of IHorzScaleBehavior
class CustomHorzScaleBehavior {
    // ... implementation details ...
}

const chart = createChartEx({
    // chart options
    horizontalScaleBehavior: new CustomHorzScaleBehavior()
});
```

--------------------------------

### Get Last Value Data

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesApi

Retrieves the last value data for the series. Can fetch the last visible value or the absolute last value based on the 'globalLast' parameter.

```typescript
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' }
```

--------------------------------

### Configure Chart Layout and Localization Options

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/android

Customize the chart's appearance and localization settings, including background color, text color, locale, and price/time formatting.

```kotlin
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
        )
    }
}

```

--------------------------------

### Apply Candlestick Series Options Dynamically

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/series-types

Demonstrates how to update the up and down colors of a Candlestick Series after it has been created using the `applyOptions` method. This allows for on-the-fly customization.

```javascript
// Updating candlestick series options on the fly  
candlestickSeries.applyOptions({  
    upColor: 'red',  
    downColor: 'blue',  
});  


```

--------------------------------

### Create and Use Series Up Down Markers

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/functions/createUpDownMarkers

This snippet demonstrates how to create the Series Up Down Markers Plugin, set its data, update existing markers, and detach the plugin from the series. It requires importing necessary functions and series types from 'lightweight-charts'.

```typescript
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 data  
upDownMarkers.setData(  
    [  
        { time: '2020-02-02', value: 12.34 },  
        //... more line series data  
    ]  
);  
// ... Update some values  
upDownMarkers.update({ time: '2020-02-02', value: 13.54 }, true);  
// to remove plugin from the series  
upDownMarkers.detach();  

```

--------------------------------

### Configure Price Scale Margins

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/PriceScaleOptions

Use scaleMargins to adjust the top and bottom margins of the price scale. This example sets the top margin to 0.8 and the bottom margin to 0.

```javascript
chart.priceScale('right').applyOptions({
    scaleMargins: {
        top: 0.8,
        bottom: 0,
    },
});
```

--------------------------------

### resize(width, height, forceRepaint?)

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/IChartApiBase

Sets a fixed size for the chart. By default, the chart occupies 100% of its container. If `autoSize` is enabled and ResizeObserver is available, width and height values are ignored.

```APIDOC
## resize(width, height, forceRepaint?)

### Description
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.

### Method
resize

### Parameters
#### Path Parameters
- **width** (number) - Required - Target width of the chart.
- **height** (number) - Required - Target height of the chart.
- **forceRepaint** (boolean) - Optional - True to initiate resize immediately. One could need this to get a screenshot immediately after resize.

### Returns
`void`
```

--------------------------------

### Accessing Series Data with `seriesData`

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/migrations/from-v3-to-v4

The `seriesPrices` property has been removed. Use `MouseEventParams.seriesData` to access series data items instead. This example shows how to retrieve line and bar series data.

```javascript
lineSeries.setData([{ time: '2001-01-01', value: 1 }]);
barSeries.setData([{ time: '2001-01-01', open: 5, high: 10, low: 1, close: 7 }]);

chart.subscribeCrosshairMove(param => {
    console.log(param.seriesData.get(lineSeries)); // { time: '2001-01-01', value: 1 } or undefined
    console.log(param.seriesData.get(barSeries)); // { time: '2001-01-01', open: 5, high: 10, low: 1, close: 7 } or undefined
});
```

--------------------------------

### Create Chart with Custom Horizontal Scale

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/chart-types

Demonstrates how to create a chart with a custom horizontal scale behavior. Import `createChartEx` and `defaultHorzScaleBehavior` from 'lightweight-charts'. Instantiate a custom behavior and pass it to `createChartEx`.

```javascript
import { createChartEx, defaultHorzScaleBehavior } from 'lightweight-charts';  
  
const customBehavior = new (defaultHorzScaleBehavior())();  
// Customize the behavior as needed  
  
const chart = createChartEx(document.getElementById('container'), customBehavior, options);
```

--------------------------------

### coordinate()

Source: https://tradingview.github.io/lightweight-charts/docs/5.0/api/interfaces/ISeriesPrimitiveAxisView

Gets the desired coordinate for the label. The label will be automatically adjusted to prevent overlapping. For a price axis, this is the vertical distance from the top; for a time axis, it's the horizontal distance from the left.

```APIDOC
## coordinate()

### Description
Gets the desired coordinate for the label. The label will be automatically adjusted to prevent overlapping. For a price axis, this is the vertical distance from the top; for a time axis, it's the horizontal distance from the left.

### Returns
`number` - The coordinate for the label.
```