KLineChart

https://v9.klinecharts.com/
Admin
KLineChart is a highly customizable, lightweight professional-grade financial charting library for...
Tokens:54,292
Snippets:442
Trust Score:6.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://v9.klinecharts.com/more/local-development

Install project dependencies using npm. Ensure Node.js is installed.

```bash
# 项目根目录下执行
npm install

```

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

### Tooltip Configuration

Source: https://v9.klinecharts.com/guide/styles

Sets up the tooltip's offset, display rules, type, and text styling. Includes an example of icon configuration within the tooltip.

```javascript
// 提示
    tooltip: {
      offsetLeft: 4,
      offsetTop: 6,
      offsetRight: 4,
      offsetBottom: 6,
      // 'always' | 'follow_cross' | 'none'
      showRule: 'always',
      // 'standard' | 'rect'
      showType: 'standard',
      showName: true,
      showParams: true,
      defaultValue: 'n/a',
      text: {
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: '#D9D9D9',
        marginTop: 4,
        marginRight: 8,
        marginBottom: 4,
        marginLeft: 8
      },
      // 示例：
      // [{
      //   id: 'icon_id',
      //   position: 'left', // 类型有'left'，'middle'，'right'
      //   marginLeft: 8,
      //   marginTop: 6,
      //   marginRight: 0,
      //   marginBottom: 0,
      //   paddingLeft: 1,
      //   paddingTop: 1,
      //   paddingRight: 1,
      //   paddingBottom: 1,
      //   icon: '\ue900',
      //   fontFamily: 'iconfont',
      //   size: 12,
      //   color: '#76808F',
      //   backgroundColor: 'rgba(33, 150, 243, 0.2)',
      //   activeBackgroundColor: 'rgba(33, 150, 243, 0.4)'
      // }]
      icons: []
    }
  },
```

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

### Get and Draw a Basic Figure Instance

Source: https://v9.klinecharts.com/guide/figure

Demonstrates how to retrieve a built-in figure class by name and then instantiate and draw it on a canvas context. Ensure you have a canvas context available.

```javascript
// Get a basic figure instance
// name is the figure name, such as 'arc', 'circle', etc.
const Figure = klinecharts.getFigureClass(name)
// Instantiate and draw
// attrs properties
// styles styles
// ctx canvas context
new Figure({ attrs, styles }).draw(ctx)
```

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

### Initialize KLineChart with Preact

Source: https://v9.klinecharts.com/guide/quick-start

Basic initialization of a KLineChart within a Preact component using `useEffect` for setup and cleanup.

```jsx
import { useEffect } from 'preact/hooks'
import { init, dispose } from 'klinecharts'

export default () => {
  useEffect(() => {
    const chart = init('chart')

```

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

### getSize

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Gets the size and position of a specific pane or the entire chart. Supports specifying the pane ID and position.

```APIDOC
## getSize(paneId, position)

### Description
Gets the size and position of a specific pane or the entire chart. Supports specifying the pane ID and position.

### Parameters
#### Path Parameters
- **paneId** (string) - Optional - The ID of the pane. Defaults to the entire chart container.
- **position** (string) - Optional - The position within the pane. Supports 'root', 'main', 'yAxis'. Defaults to 'root'.

### Returns
- **object** - An object containing width, height, left, top, right, and bottom properties.
```

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

### Get Chart as Image URL

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Generate a URL for an image representation of the current chart. This allows for exporting the chart as a static image file.

```typescript
(includeOverlay?: boolean, type?: string, backgroundColor?: string) => string
```

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

### Get Data List

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the entire current dataset displayed on the chart.

```typescript
instance.getDataList()
```

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

### Get Styles

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the current style configuration of the chart. Useful for inspecting or modifying existing styles.

```typescript
instance.getStyles()
```

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

### getSize

Source: https://v9.klinecharts.com/guide/instance-api

Gets the size and position of a specific pane or the entire chart. Supports specifying the pane ID and the position within the pane.

```APIDOC
## getSize(paneId, position)

### Description
Gets the size and position of a DOM container.

### Method
`getSize(paneId?: string, position?: 'root' | 'main' | 'yAxis') => { width: number, height: number, left: number, top: number, right: number, bottom: number }`

### Parameters
#### Path Parameters
- **paneId** (string) - Optional - The ID of the pane. Defaults to the entire chart container.
- **position** (string) - Optional - The position within the pane. Supports 'root', 'main', 'yAxis'. Defaults to 'root'.

### Response
- **object** - An object containing width, height, left, top, right, and bottom properties.
```

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

### Register and Apply Locales

Source: https://v9.klinecharts.com/sample/i18n

Demonstrates how to register a custom locale ('zh-HK') and apply it to the KLineChart instance. This snippet also includes a function to dynamically switch locales and a setup for language selection buttons.

```javascript
import { init, registerLocale } from 'klinecharts'
import './index.css'

function genData (timestamp = new Date().getTime(), length = 800) {
  let basePrice = 5000
  timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
  const dataList = []
  for (let i = 0; i < length; i++) {
    const prices = []
    for (let j = 0; j < 4; j++) {
      prices.push(basePrice + Math.random() * 60 - 30)
    }
    prices.sort()
    const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const high = +(prices[3].toFixed(2))
    const low = +(prices[0].toFixed(2))
    const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const volume = Math.round(Math.random() * 100) + 10
    const turnover = (open + high + low + close) / 4 * volume
    dataList.push({ timestamp, open, high,low, close, volume, turnover })

    basePrice = close
    timestamp += 60 * 1000
  }
  return dataList
}

registerLocale('zh-HK', {
  time: '時間：',
  open: '開：',
  high: '高：',
  low: '低：',
  close: '收：',
  volume: '成交量：'
})

const chart = init('k-line-chart')
chart.applyNewData(genData())

function setLang (lang) {
  chart.setLocale(lang)
}

// 以下仅仅是为了协助代码演示，在实际项目中根据情况进行调整。
// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.
const container = document.getElementById('container')
const buttonContainer = document.createElement('div')
buttonContainer.className = 'button-container'
const items = [
  { key: 'zh-CN', text: '简体中文' },
  { key: 'zh-HK', text: '繁体中文' },
  { key: 'en-US', text: 'English' }
]
items.forEach(({ key, text }) => {
  const button = document.createElement('button')
  button.innerText = text
  button.addEventListener('click', () => { setLang(key) })
  buttonContainer.appendChild(button)
})
container.appendChild(buttonContainer)
```

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

### Get Data List

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the entire current dataset loaded in the chart. The returned data is in the same format as expected for input data.

```typescript
getDataList() => Array<{ timestamp: number, open: number, close: number, high: number, low: number, volume?: number, turnover?: number }>
```

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

### Get Chart Styles

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the current style configuration of the chart. The returned object contains the full style details.

```typescript
getStyles() => object
```

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

### Get Chart as Image URL

Source: https://v9.klinecharts.com/guide/instance-api

Generate a URL for an image representation of the current chart state. Options include whether to include overlays, the image format (png, jpeg, bmp), and background color.

```typescript
chart.getConvertPictureUrl(true, 'png', '#000000')
```

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

### Get Size and Position

Source: https://v9.klinecharts.com/guide/instance-api

Obtains the dimensions (width, height) and position (left, top, right, bottom) of the chart or a specific pane. Useful for responsive layouts or custom rendering.

```typescript
getSize(paneId?: string, position?: 'root' | 'main' | 'yAxis') => {
  width: number
  height: number
  left: number
  top: number
  right: number
  bottom: number
}
```

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

### getConvertPictureUrl

Source: https://v9.klinecharts.com/guide/instance-api

Gets the URL of the chart converted into an image.

```APIDOC
## getConvertPictureUrl(includeOverlay, type, backgroundColor)

### Description
Gets the URL of the chart as an image.

### Parameters
* **includeOverlay** (boolean) - Optional - Whether to include overlays in the image. Defaults to false.
* **type** (string) - Optional - The image format ('png', 'jpeg', 'bmp'). Defaults to 'jpeg'.
* **backgroundColor** (string) - Optional - The background color of the image. Defaults to '#FFFFFF'.

### Response
* (string) - The URL of the converted image.
```

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

### getConvertPictureUrl

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Gets the URL of the chart converted into an image.

```APIDOC
## getConvertPictureUrl(includeOverlay, type, backgroundColor)

### Description
Gets the URL of the chart converted into an image.

### Parameters
#### Path Parameters
- **includeOverlay** (boolean) - Optional - Whether to include the overlay. Defaults to false.
- **type** (string) - Optional - The type of the converted image. Can be 'png', 'jpeg', or 'bmp'. Defaults to 'jpeg'.
- **backgroundColor** (string) - Optional - The background color of the image. Defaults to '#FFFFFF'.
```

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

### Initialize Chart with Custom Axes

Source: https://v9.klinecharts.com/guide/custom-axis

Demonstrates how to use the init method to configure a chart with custom X and Y axes by specifying their names in the layout options.

```typescript
init(
  // 这里的 domId 使用自己定义的容器id代替
  `${domId}`,
  {
    layout: [
      {
        type: 'candle',
        options: {
          axisOptions: {
            // 这里的 customYAxisName 使用自定义y轴时的 name 代替
            name: `${customYAxisName}`
          }
        }
      },
      {
        type: 'xAxis',
        options: {
          position: 'bottom',
          axisOptions: {
            // 这里的 customXAxisName 使用自定义x轴时的 name 代替
            name: `${customXAxisName}`
          }
        }
      }
    ]
  }
)
```

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

### Get Timezone

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the currently set timezone for the chart.

```typescript
instance.getTimezone()
```

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

### Initialize Chart and Apply Data

Source: https://v9.klinecharts.com/sample/indicator

Initializes the KLineChart instance and applies the generated sample data to it. This is a foundational step for displaying the chart.

```javascript
const chart = init('k-line-chart')
chart.applyNewData(genData())
```

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

### Get Bar Space

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the current width of each bar on the chart.

```typescript
instance.getBarSpace()
```

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

### Build UMD production module

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-umd:prod to package as a UMD production module.

```bash
npm run build-umd:prod

```

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

### Get Timezone

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the currently configured timezone name for the chart.

```typescript
getTimezone() => string
```

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

### Get Figure Class

Source: https://v9.klinecharts.com/guide/chart-api

Retrieves a figure class by its registered name.

```typescript
(name: string) => Figure
```

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

### init

Source: https://v9.klinecharts.com/guide/chart-api

Initializes a chart instance. It takes a data source (DOM element or ID) and an optional configuration object for layout, locale, styles, and custom APIs.

```APIDOC
## init(ds, options)

### Description
Initializes a chart instance. It takes a data source (DOM element or ID) and an optional configuration object for layout, locale, styles, and custom APIs.

### Parameters
* `ds` (string | HTMLElement) - The container for the chart, which can be a DOM element or its ID.
* `options` (object) - Optional configuration settings.
  * `layout` (Array<object>) - Custom layout configuration. Each item can define chart types ('candle', 'indicator', 'xAxis'), their content, and specific options like height, position, and axis settings.
  * `locale` (string) - The language for the chart. Built-in support for 'zh-CN' and 'en-US'.
  * `styles` (string | object) - Custom styles for the chart, either a registered style name or an object. Supports incremental additions.
  * `timezone` (string) - The timezone name (e.g., 'Asia/Shanghai'). Defaults to the user's local timezone if not set.
  * `customApi` (object) - Allows for custom API implementations.
    * `formatDate` (function) - A function to format date and time.
    * `formatBigNumber` (function) - A function to format large numbers (e.g., 1000 to '1k').
  * `thousandsSeparator` (string) - The character used as a thousands separator.
  * `decimalFoldThreshold` (number) - Threshold for folding decimal numbers.
```

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

### Build all modules and DTS files

Source: https://v9.klinecharts.com/more/local-development

Run npm run build to package ESM, CommonJS, UMD modules and generate TypeScript dependency files.

```bash
npm run build

```

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

### Build UMD modules

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-umd to package both UMD development and production modules.

```bash
npm run build-umd

```

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

### Get Bar Width

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the current width of each data bar on the chart.

```typescript
getBarSpace() => number
```

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

### Build UMD development module

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-umd:dev to package as a UMD development module.

```bash
npm run build-umd:dev

```

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

### getVisibleRange

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Gets the visible range of data on the chart, including the real visible range.

```APIDOC
## getVisibleRange()

### Description
Gets the visible range of data on the chart, including the real visible range.

### Returns
- **object** - An object containing 'from', 'to', 'realFrom', and 'realTo' timestamps.
```

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

### Get Supported Locales

Source: https://v9.klinecharts.com/guide/chart-api

Returns an array of all locale names that the chart currently supports.

```typescript
() => string[]
```

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

### Initialize Chart and Generate Data

Source: https://v9.klinecharts.com/sample/candle-type

Initializes the KLineChart and generates sample data. This is a prerequisite for displaying any chart data.

```javascript
import { init } from 'klinecharts'
import './index.css'

function genData (timestamp = new Date().getTime(), length = 800) {
  let basePrice = 5000
  timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
  const dataList = []
  for (let i = 0; i < length; i++) {
    const prices = []
    for (let j = 0; j < 4; j++) {
      prices.push(basePrice + Math.random() * 60 - 30)
    }
    prices.sort()
    const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const high = +(prices[3].toFixed(2))
    const low = +(prices[0].toFixed(2))
    const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const volume = Math.round(Math.random() * 100) + 10
    const turnover = (open + high + low + close) / 4 * volume
    dataList.push({ timestamp, open, high,low, close, volume, turnover })

    basePrice = close
    timestamp += 60 * 1000
  }
  return dataList
}

const chart = init('k-line-chart')
chart.applyNewData(genData())
```

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

### Get Overlay Class

Source: https://v9.klinecharts.com/guide/chart-api

Retrieves the properties of an overlay within the chart based on its name.

```typescript
(name: string) => Nullable<OverlayConstructor>
```

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

### Build core modules

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-core to package ESM, CommonJS, and UMD development/production modules.

```bash
npm run build-core

```

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

### Build DTS files

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-dts to generate TypeScript dependency files.

```bash
npm run build-dts

```

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

### Get Chart Version

Source: https://v9.klinecharts.com/guide/chart-api

Retrieves the current version of the chart library. This is useful for compatibility checks and debugging.

```typescript
() => string
```

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

### Create and Initialize a k-line Chart

Source: https://v9.klinecharts.com/guide/quick-start

Initializes a k-line chart on a specified DOM element and applies new data to it. Ensure the DOM element with the ID 'chart' exists before running this code.

```javascript
var chart = klinecharts.init('chart')

chart.applyNewData([
  { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
  { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
  { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
  { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
  { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
  { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
  { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
  { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
  { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
  { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
])
```

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

### Get Right Offset Distance

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the currently set empty space to the right of the last data point.

```typescript
instance.getOffsetRightDistance()
```

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

### Create KLineChart with React

Source: https://v9.klinecharts.com/guide/quick-start

Initialize a KLineChart and apply new data within a React component. Ensure to dispose of the chart instance on component unmount.

```jsx
import { useEffect } from 'react'
import { init, dispose } from 'klinecharts'
export default () => {
  useEffect(() => {
    const chart = init('chart')
          
    chart.applyNewData([
      { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
      { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
      { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
      { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
      { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
      { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
      { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
      { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
      { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
      { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
    ])
          
    return () => {
      dispose('chart')
    }
  }, [])

  return <div id="chart" style={{ width: 600, height: 600 }}/>
}
```

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

### Get Right Offset Distance

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the currently set empty space to the right of the chart's data.

```typescript
getOffsetRightDistance() => number
```

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

### Build CJS module

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-cjs to package as a CommonJS module.

```bash
npm run build-cjs

```

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

### getSupportedOverlays()

Source: https://v9.klinecharts.com/guide/chart-api

Retrieves a list of all overlays supported by the chart.

```APIDOC
## getSupportedOverlays()

### Description
Retrieves a list of all overlays supported by the chart.

### Method
`() => string[]`

### Returns
A string array containing the names of supported overlays.
```

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

### Run npm clean command

Source: https://v9.klinecharts.com/more/local-development

Run npm run clean to clear bundled files.

```bash
npm run clean

```

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

### Generate Sample Data

Source: https://v9.klinecharts.com/sample/data

Generates a list of sample k-line data points with timestamp, open, high, low, close prices, volume, and turnover. Useful for initial chart rendering or testing.

```javascript
import { init } from 'klinecharts'

function genData (timestamp = new Date().getTime(), length = 800) {
  let basePrice = 5000
  timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
  const dataList = []
  for (let i = 0; i < length; i++) {
    const prices = []
    for (let j = 0; j < 4; j++) {
      prices.push(basePrice + Math.random() * 60 - 30)
    }
    prices.sort()
    const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const high = +(prices[3].toFixed(2))
    const low = +(prices[0].toFixed(2))
    const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const volume = Math.round(Math.random() * 100) + 10
    const turnover = (open + high + low + close) / 4 * volume
    dataList.push({ timestamp, open, high,low, close, volume, turnover })

    basePrice = close
    timestamp += 60 * 1000
  }
  return dataList
}

const chart = init('k-line-chart')
chart.applyNewData(genData())
chart.loadMore((timestamp) => {
  loadMoreTimer = setTimeout(() => {
    chart.applyMoreData(genData(timestamp), true)
  }, 2000)
})
chart.applyNewData(genData(), true)
updateData()

function updateData () {
  setTimeout(() => {
    const dataList = chart.getDataList()
    const lastData = dataList[dataList.length - 1]
    const newData = { ...lastData }
    newData.close += (Math.random() * 20 - 10)
    newData.high = Math.max(newData.high, newData.close)
    newData.low = Math.min(newData.low, newData.close)
    newData.volume += Math.round(Math.random() * 10)
    chart.updateData(newData)
    updateData()
  }, 600)
}
```

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

### Create Overlay with Detailed Styles and Events

Source: https://v9.klinecharts.com/guide/instance-api

Use this snippet to create a custom overlay with specific styling, points, and event handlers. The `value` parameter accepts an object with numerous configuration options.

```javascript
chart.createOverlay({
  name: 'segment',
  id: 'segment_1',
  groupId: 'segment',
  points: [
    { timestamp: 1614171282000, value: 18987 },
    { timestamp: 1614171202000, value: 16098 },
  ],
  styles: {
    line: {
      style: 'solid',
      dashedValue: [2, 2],
      color: '#f00',
      size: 2
    }
  },
  lock: false,
  visible: true,
  zLevel: 0,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  extendData: 'xxxxxxxx',
  needDefaultPointFigure: false,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  onDrawStart: function (event) { console.log(event) },
  onDrawing: function (event) { console.log(event) },
  onDrawEnd: function (event) { console.log(event) },
  onClick: function (event) { console.log(event) },
  onDoubleClick: function (event) { console.log(event) },
  onRightClick: function (event) {
    console.log(event)
    return false
  },
  onMouseEnter: function (event) { console.log(event) },
  onMouseLeave: function (event) { console.log(event) },
  onPressedMoveStart: function (event) { console.log(event) },
  onPressedMoving: function (event) { console.log(event) },
  onPressedMoveEnd: function (event) { console.log(event) },
  onRemoved: function (event) { console.log(event) },
  onSelected: function (event) { console.log(event) },
  onDeselected: function (event) { console.log(event) }
})
```

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

### Get DOM Element

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Retrieves the DOM element of the chart or a specific pane. Useful for direct DOM manipulation or integration with other libraries.

```typescript
instance.getDom(paneId, position)
```

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

### Build ESM module

Source: https://v9.klinecharts.com/more/local-development

Run npm run build-esm to package as an ESM module.

```bash
npm run build-esm

```

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

### utils

Source: https://v9.klinecharts.com/guide/chart-api

Provides a collection of utility methods for common tasks such as deep cloning, merging objects, and type checking.

```APIDOC
## utils

### Description
Provides a collection of utility methods for common tasks such as deep cloning, merging objects, and type checking.

### utils.clone(target)

#### Description
Performs a deep copy of the target object.

#### Method
`(target: any) => any`

### utils.merge(target, source)

#### Description
Merges the properties of the source object into the target object.

#### Method
`(target: object, source: object) => void`

### utils.isString(value)

#### Description
Checks if the provided value is a string.

#### Method
`(value: any) => boolean`

### utils.isNumber(value)

#### Description
Checks if the provided value is a number.

#### Method
`(value: any) => boolean`

### utils.isValid(value)

#### Description
Checks if the provided value is considered valid.

#### Method
`(value: any) => boolean`

### utils.isObject(value)

#### Description
Checks if the provided value is an object.

#### Method
`(value: any) => boolean`

### utils.isFunction(value)

#### Description
Checks if the provided value is a function.

#### Method
`(value: any) => boolean`

### utils.isBoolean(value)

#### Description
Checks if the provided value is a boolean.

#### Method
`(value: any) => boolean`
```

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

### Get DOM Element

Source: https://v9.klinecharts.com/guide/instance-api

Retrieves the DOM element of the chart or a specific pane. Useful for direct DOM manipulation or integration with other libraries.

```typescript
getDom(paneId?: string, position?: 'root' | 'main' | 'yAxis') => HTMLElement
```

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

### Overlay Rectangle Configuration

Source: https://v9.klinecharts.com/guide/styles

Configures rectangle overlays with options for fill, stroke, border, and rounding. Useful for highlighting price ranges.

```javascript
rect: {
  // 'fill' | 'stroke' | 'stroke_fill'
  style: 'fill',
  color: 'rgba(22, 119, 255, 0.25)',
  borderColor: '#1677FF',
  borderSize: 1,
  borderRadius: 0,
  // 'solid' | 'dashed'
  borderStyle: 'solid',
  borderDashedValue: [2, 2]
}
```

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

### Get Visible Data Range

Source: https://v9.klinecharts.com/guide/instance-api

Returns the range of data currently visible on the chart, including both the displayed range and the real data range.

```typescript
getVisibleRange() => {
  from: number
  to: number
  realFrom: number
  realTo: number
}
```

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

### Run npm lint command

Source: https://v9.klinecharts.com/more/local-development

Run npm run lint to check code rules.

```bash
npm run lint

```

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

### Get Visible Range

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Returns the visible range of data on the chart, including the 'from' and 'to' timestamps and the 'realFrom' and 'realTo' timestamps considering any offsets.

```typescript
instance.getVisibleRange()
```

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

### createOverlay(value, paneId)

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Creates an overlay on the chart and returns a string identifier. The `value` parameter can be a string representing the overlay name or an object with detailed overlay configurations. The `paneId` specifies which pane the overlay should be added to.

```APIDOC
## createOverlay(value, paneId)

### Description
Creates an overlay on the chart and returns a string identifier. The `value` parameter can be a string representing the overlay name or an object with detailed overlay configurations. The `paneId` specifies which pane the overlay should be added to.

### Parameters
#### Path Parameters
- **value** (string | object) - Required - The name of the overlay or an object containing overlay properties.
- **paneId** (string) - Optional - The ID of the pane to which the overlay will be added. Defaults to the main chart pane if not provided.

### Special IDs
- **'candle_pane'**: The ID for the main chart pane.

### Request Example
```javascript
chart.createOverlay({
  name: 'segment',
  id: 'segment_1',
  groupId: 'segment',
  points: [
    { timestamp: 1614171282000, value: 18987 },
    { timestamp: 1614171202000, value: 16098 },
  ],
  styles: {
    line: {
      style: 'solid',
      dashedValue: [2, 2],
      color: '#f00',
      size: 2
    }
  },
  lock: false,
  visible: true,
  zLevel: 0,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  extendData: 'xxxxxxxx',
  needDefaultPointFigure: false,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  onDrawStart: function (event) { console.log(event) },
  onDrawing: function (event) { console.log(event) },
  onDrawEnd: function (event) { console.log(event) },
  onClick: function (event) { console.log(event) },
  onDoubleClick: function (event) { console.log(event) },
  onRightClick: function (event) {
    console.log(event)
    return false
  },
  onMouseEnter: function (event) { console.log(event) },
  onMouseLeave: function (event) { console.log(event) },
  onPressedMoveStart: function (event) { console.log(event) },
  onPressedMoving: function (event) { console.log(event) },
  onPressedMoveEnd: function (event) { console.log(event) },
  onRemoved: function (event) { console.log(event) },
  onSelected: function (event) { console.log(event) },
  onDeselected: function (event) { console.log(event) }
})
```

### Response
Returns a string identifier for the created overlay, or null if creation fails.
```

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

### createOverlay

Source: https://v9.klinecharts.com/guide/instance-api

Creates an overlay on the chart. It can accept either a string representing the overlay name or an object with detailed configuration for the overlay. It returns a string identifier for the created overlay.

```APIDOC
## createOverlay(value, paneId)

### Description
Creates an overlay on the chart. It can accept either a string representing the overlay name or an object with detailed configuration for the overlay. It returns a string identifier for the created overlay.

### Parameters
#### Path Parameters
- **value** (string | object) - Required - The name of the overlay or an object containing overlay configuration. When an object is provided, its parameters are consistent with `overrideOverlay`.
- **paneId** (string) - Optional - The ID of the pane where the overlay should be created. Defaults to the main chart pane if not specified.

### Request Example
```javascript
chart.createOverlay({
  name: 'segment',
  id: 'segment_1',
  groupId: 'segment',
  points: [
    { timestamp: 1614171282000, value: 18987 },
    { timestamp: 1614171202000, value: 16098 },
  ],
  styles: {
    line: {
      style: 'solid',
      dashedValue: [2, 2],
      color: '#f00',
      size: 2
    }
  },
  lock: false,
  visible: true,
  zLevel: 0,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  extendData: 'xxxxxxxx',
  needDefaultPointFigure: false,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  onDrawStart: function (event) { console.log(event) },
  onDrawing: function (event) { console.log(event) },
  onDrawEnd: function (event) { console.log(event) },
  onClick: function (event) { console.log(event) },
  onDoubleClick: function (event) { console.log(event) },
  onRightClick: function (event) {
    console.log(event)
    return false
  },
  onMouseEnter: function (event) { console.log(event) },
  onMouseLeave: function (event) { console.log(event) },
  onPressedMoveStart: function (event) { console.log(event) },
  onPressedMoving: function (event) { console.log(event) },
  onPressedMoveEnd: function (event) { console.log(event) },
  onRemoved: function (event) { console.log(event) },
  onSelected: function (event) { console.log(event) },
  onDeselected: function (event) { console.log(event) }
})
```

### Response
#### Success Response (200)
- **Return Value** (string | null) - An identifier for the created overlay, or null if creation failed.
```

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

### Create KLineChart with Angular

Source: https://v9.klinecharts.com/guide/quick-start

Initialize a KLineChart and apply new data within an Angular component. Ensure chart disposal in the `ngOnDestroy` lifecycle hook.

```ts
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { init, dispose } from 'klinecharts';

@Component({
  selector: 'app-chart',
  template: `<div id="chart" style="width:600px;height:600px"/>`,
})
export class ChartComponent implements AfterViewInit, OnDestroy {
  ngAfterViewInit(): void {
    const chart = init('chart');

    chart?.applyNewData([
      { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
      { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
      { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
      { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
      { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
      { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
      { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
      { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
      { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
      { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
    ]);
  }

  ngOnDestroy(): void {
    dispose('chart');
  }
}
```

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

### Rectangle Figure Definition

Source: https://v9.klinecharts.com/guide/figure

Defines the structure for a rectangle figure, specifying its starting point, width, and height. Style options include fill, stroke, border, and border-radius.

```typescript
new ({ 
  attrs: {
    // Starting x-coordinate
    x: number
    // Starting y-coordinate
    y: number
    // Width
    width: number
    // Height
    height: number
  },
  styles: {
    // Style, optional 'fill', 'stroke', 'stroke_fill'
    style?: 'fill' | 'stroke' | 'stroke_fill'
    // Color
    color?: string
    // Border style
    borderStyle?: 'solid' | 'dashed',
    // Border color
    borderColor?: string
    // Border size
    borderSize?: number
    // Border dashed line parameters
    borderDashedValue?: number[]
    // Border radius
    borderRadius?: number
  }
}) => Figure
```

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

### Create KLineChart with Vue

Source: https://v9.klinecharts.com/guide/quick-start

Initialize a KLineChart and apply new data within a Vue component using the Composition API. Ensure chart disposal on component unmount.

```vue
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { init, dispose } from 'klinecharts'

onMounted(() => {
  const chart = init('chart')

  chart.applyNewData([
    { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
    { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
    { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
    { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
    { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
    { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
    { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
    { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
    { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
    { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
  ])
})

onUnmounted(() => {
  dispose('chart')
})
</script>

<template>
  <div id="chart" style="width:600px;height:600px"/>
</template>
```

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

### Overlay Line Configuration

Source: https://v9.klinecharts.com/guide/styles

Sets the style for line overlays, including color, size, and dashing. Supports smooth lines.

```javascript
line: {
  // 'solid' | 'dashed'
  style: 'solid',
  smooth: false,
  color: '#1677FF',
  size: 1,
  dashedValue: [2, 2]
}
```

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

### Get Element Size and Position

Source: https://v9.klinecharts.com/guide/instance-api#setloaddatacallback-cb-9-8-0

Obtains the dimensions (width, height) and position (left, top, right, bottom) of the chart or a specific pane. Helpful for responsive layouts or custom rendering.

```typescript
instance.getSize(paneId, position)
```

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

### Initialize Chart

Source: https://v9.klinecharts.com/guide/chart-api

Initializes a new chart instance within a specified DOM element or by its ID. Accepts configuration options for layout, localization, styles, and custom APIs.

```typescript
Chart
(
  ds: string | HTMLElement,
  options?: {
    layout?: Array<{ 
      type: 'candle' | 'indicator' | 'xAxis'
      content: Array<Indicator | string>
      options: {
        id?: string
        height?: number
        minHeight?: number
        dragEnabled?: boolean
        position?: 'top' | 'bottom'
        gap?: {
          top?: number
          bottom?: number
        }
        axisOptions?: {
          name?: string
          scrollZoomEnabled?: boolean
        }
      }
    }> 
    locale?: string
    styles?: string | object
    timezone?: string
    customApi?: {
      formatDate?: (dateTimeFormat: Intl.DateTimeFormat, timestamp: number, format: string, type: number) => string
      formatBigNumber?: (value: string | number) => string
    }
    thousandsSeparator?: string
    decimalFoldThreshold?: number
  }
) => Chart
```

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

### Get Indicator by Pane ID

Source: https://v9.klinecharts.com/guide/instance-api

Retrieve technical indicator information for a specified pane. If `paneId` is omitted, all indicators across all panes are returned. The `name` parameter can filter indicators by their specific name.

```typescript
(paneId?: string, name?: string) => object
```
Tokens:
Raw