KLineChart

https://klinecharts.com/en-US/guide
Admin
KLineChart is a professional lightweight financial charting library for web applications focused on...
Tokens:29,859
Snippets:208
Trust Score:6.7
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Build UMD and Start Docs Site

Source: https://klinecharts.com/en-US/guide/local-development

Build the production UMD bundle and start the docs site. The docs site reads dist/umd/klinecharts.min.js and injects it into the page, so build before starting the docs site for the first time or after changing src. The docs site uses port 8888 by default.

```bash
pnpm run build-umd:prod
pnpm run docs:dev
```

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

### Install Dependencies with pnpm

Source: https://klinecharts.com/en-US/guide/local-development

Install project dependencies in the project root using pnpm.

```bash
pnpm install
```

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

### Install KLineChart Skills with npx

Source: https://klinecharts.com/en-US/guide/skills

Installs the KLineChart Agent Skills package into a project that supports Agent Skills, such as Cursor.

```bash
npx skills add klinecharts/KLineChart
```

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

### Run Built-in Debug Page

Source: https://klinecharts.com/en-US/guide/local-development

Start the built-in debug page, which imports src/index.ts directly, so no dist build is needed. After startup, open the local URL shown in the terminal and edit debug/main.js to change initialization options, data loading, or interaction examples.

```bash
pnpm run debug
```

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

### Backend response example

Source: https://klinecharts.com/en-US/guide/data-integration

Example of a typical backend response with abbreviated field names and string values. This format does not match KLineData and must be normalized before use.

```ts
{
  t: 1711425600,
  o: '68000.1',
  h: '68920.5',
  l: '67500.2',
  c: '68610.8',
  v: '1234.56'
}
```

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

### Install KLineChart with npm, yarn, pnpm, or bun

Source: https://klinecharts.com/en-US/guide/quick-start

Install KLineChart using your preferred package manager. The documentation recommends using a package manager for development to leverage the JavaScript ecosystem.

```bash
npm install klinecharts
```

```bash
yarn add klinecharts
```

```bash
pnpm install klinecharts
```

```bash
bun add klinecharts
```

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

### Update and get hot key configuration with setHotkey and getHotkey

Source: https://klinecharts.com/en-US/guide/hot-key

Demonstrates updating the hot key configuration after chart creation and retrieving the current configuration.

```javascript
chart.setHotkey({
  enabled: false
})

chart.setHotkey({
  enabled: true,
  exclude: ['zoomIn']
})

const hotkey = chart.getHotkey()
```

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

### Get supported hot keys and hot key template

Source: https://klinecharts.com/en-US/guide/hot-key

Shows how to retrieve the list of registered hot key names and a specific hot key template.

```javascript
import { getSupportedHotkeys, getHotkey } from 'klinecharts'

const names = getSupportedHotkeys()
const zoomIn = getHotkey('zoomIn')
```

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

### Create first chart in Vue with init, setSymbol, setPeriod, setDataLoader

Source: https://klinecharts.com/en-US/guide/quick-start

Create a KLineChart in a Vue component using the Composition API. Initialize the chart in onMounted and dispose it in onUnmounted. The chart uses the same sample data and configuration as the React example.

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

onMounted(() => {
  const chart = init('chart')
  chart.setSymbol({ ticker: 'TestSymbol' })
  chart.setPeriod({ span: 1, type: 'day' })
  chart.setDataLoader({
    getBars: ({ callback}) => {
      callback([
        { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
        { timestamp: 1517932800000, open: 7310.1, high: 8499.9, low: 6810, close: 8165.4, volume: 148807 },
        { timestamp: 1518019200000, open: 8166.7, high: 8700.8, low: 7400, close: 8245.1, volume: 24467 },
        { timestamp: 1518105600000, open: 8244, high: 8494, low: 7760, close: 8364, volume: 29834 },
        { timestamp: 1518192000000, open: 8363.6, high: 9036.7, low: 8269.8, close: 8311.9, volume: 28203 },
        { timestamp: 1518278400000, open: 8301, high: 8569.4, low: 7820.2, close: 8426, volume: 59854 },
        { timestamp: 1518364800000, open: 8426, high: 8838, low: 8024, close: 8640, volume: 54457 },
        { timestamp: 1518451200000, open: 8640, high: 8976.8, low: 8360, close: 8500, volume: 51156 },
        { timestamp: 1518537600000, open: 8504.9, high: 9307.3, low: 8474.3, close: 9307.3, volume: 49118 },
        { timestamp: 1518624000000, open: 9307.3, high: 9897, low: 9182.2, close: 9774, volume: 48092 }
      ])
    }
  })
})

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

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

### Create indicators with new signature

Source: https://klinecharts.com/en-US/guide/v9-to-v10

Shows the new createIndicator signature with isStack parameter. Examples include creating in a specified pane, stacking, and binding to a y-axis.

```javascript
// create in a specified pane
chart.createIndicator({
  name: 'MACD',
  paneId: 'macd_pane'
})

// stack indicator
chart.createIndicator('MA', true)

// bind to a specified y-axis
chart.createIndicator({
  name: 'VOL',
  paneId: 'volume_pane',
  yAxisId: 'volume_axis'
})
```

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

### Prepare Environment with nvm, corepack, and pnpm

Source: https://klinecharts.com/en-US/guide/local-development

Prepare the environment by switching to the repository's Node.js version, enabling Corepack, and verifying pnpm. Requires Node.js >= 22.0.0 and pnpm as the package manager; npm or yarn are not supported.

```bash
nvm use
corepack enable
pnpm -v
```

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

### Build documentation after doc changes

Source: https://klinecharts.com/en-US/guide/local-development

Run this command if you changed documentation as well as source code, to build the docs site.

```bash
pnpm run docs:build
```

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

### Create a KLineChart with CDN and sample data

Source: https://klinecharts.com/en-US/guide/quick-start

Complete HTML page that loads KLineChart from CDN, initializes a chart in a div with id 'chart', sets symbol and period, and provides sample data via setDataLoader.

```html
<!DOCTYPE html>
<html lang="cn" >
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="keywords" content="Quick Start"/>
    <meta name="description" content="Quick Start"/>
    <title>Quick Start</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/klinecharts/dist/umd/klinecharts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width:600px;height:600px"></div>
    <script>
      window.onload = function () {
        var chart = klinecharts.init('chart')
        chart.setSymbol({ ticker: 'TestSymbol' })
        chart.setPeriod({ span: 1, type: 'day' })
        chart.setDataLoader({
          getBars: ({ callback}) => {
            callback([
              { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
              { timestamp: 1517932800000, open: 7310.1, high: 8499.9, low: 6810, close: 8165.4, volume: 148807 },
              { timestamp: 1518019200000, open: 8166.7, high: 8700.8, low: 7400, close: 8245.1, volume: 24467 },
              { timestamp: 1518105600000, open: 8244, high: 8494, low: 7760, close: 8364, volume: 29834 },
              { timestamp: 1518192000000, open: 8363.6, high: 9036.7, low: 8269.8, close: 8311.9, volume: 28203 },
              { timestamp: 1518278400000, open: 8301, high: 8569.4, low: 7820.2, close: 8426, volume: 59854 },
              { timestamp: 1518364800000, open: 8426, high: 8838, low: 8024, close: 8640, volume: 54457 },
              { timestamp: 1518451200000, open: 8640, high: 8976.8, low: 8360, close: 8500, volume: 51156 },
              { timestamp: 1518537600000, open: 8504.9, high: 9307.3, low: 8474.3, close: 9307.3, volume: 49118 },
              { timestamp: 1518624000000, open: 9307.3, high: 9897, low: 9182.2, close: 9774, volume: 48092 }
            ])
          }
        })
      }
    </script>
  </body>
</html>
```

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

### Run Baseline Checks (code-lint, type-check, build)

Source: https://klinecharts.com/en-US/guide/local-development

Run baseline checks: linting, type checking, and building the project.

```bash
pnpm run code-lint
pnpm run type-check
pnpm run build
```

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

### Get indicators with filter

Source: https://klinecharts.com/en-US/guide/v9-to-v10

Uses getIndicators with a filter object to look up indicators by pane and name.

```javascript
const indicators = chart.getIndicators({
  paneId: 'candle_pane',
  name: 'MA'
})
```

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

### new Figure({ attrs, styles }) - rect

Source: https://klinecharts.com/en-US/guide/figure

Creates a rectangle figure. The rectangle is defined by starting point, width, and height.

```APIDOC
## [CONSTRUCTOR] new Figure({ attrs, styles }) - rect

### Description
Creates a rectangle figure. The rectangle is defined by starting point, width, and height.

### Method
CONSTRUCTOR

### Endpoint
new Figure({ attrs, styles }) - rect

### Parameters
#### Request Body
- **attrs.x** (number) - Required - The x-axis coordinate value of the starting point.
- **attrs.y** (number) - Required - The y-axis coordinate value of the starting point.
- **attrs.width** (number) - Required - Width.
- **attrs.height** (number) - Required - Height.
- **styles.style** ('fill' | 'stroke' | 'stroke_fill') - Optional - Style, optional `fill`, `stroke`, `stroke_fill`.
- **styles.color** (string) - Optional - Color.
- **styles.borderStyle** ('solid' | 'dashed') - Optional - Border style.
- **styles.borderColor** (string) - Optional - Border color.
- **styles.borderSize** (number) - Optional - Frame size.
- **styles.borderDashedValue** (number[]) - Optional - Border dotted line parameters.
- **styles.borderRadius** (number) - Optional - Border fillet value.

### Response
#### Success Response (200)
Returns a Figure instance.
```

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

### Create first chart in React with init, setSymbol, setPeriod, setDataLoader

Source: https://klinecharts.com/en-US/guide/quick-start

Create a KLineChart in a React component. Initialize the chart with init('chart'), set a symbol and period, and provide sample data via setDataLoader. Clean up with dispose('chart') on unmount.

```jsx
import { useEffect } from 'react'
import { init, dispose } from 'klinecharts'
export default () => {
  useEffect(() => {
    const chart = init('chart')
    chart.setSymbol({ ticker: 'TestSymbol' })
    chart.setPeriod({ span: 1, type: 'day' })
    chart.setDataLoader({
      getBars: ({ callback}) => {
        callback([
          { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
          { timestamp: 1517932800000, open: 7310.1, high: 8499.9, low: 6810, close: 8165.4, volume: 148807 },
          { timestamp: 1518019200000, open: 8166.7, high: 8700.8, low: 7400, close: 8245.1, volume: 24467 },
          { timestamp: 1518105600000, open: 8244, high: 8494, low: 7760, close: 8364, volume: 29834 },
          { timestamp: 1518192000000, open: 8363.6, high: 9036.7, low: 8269.8, close: 8311.9, volume: 28203 },
          { timestamp: 1518278400000, open: 8301, high: 8569.4, low: 7820.2, close: 8426, volume: 59854 },
          { timestamp: 1518364800000, open: 8426, high: 8838, low: 8024, close: 8640, volume: 54457 },
          { timestamp: 1518451200000, open: 8640, high: 8976.8, low: 8360, close: 8500, volume: 51156 },
          { timestamp: 1518537600000, open: 8504.9, high: 9307.3, low: 8474.3, close: 9307.3, volume: 49118 },
          { timestamp: 1518624000000, open: 9307.3, high: 9897, low: 9182.2, close: 9774, volume: 48092 }
        ])
      }
    })

    return () => {
      dispose('chart')
    }
  }, [])

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

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

### Arc figure type definition

Source: https://klinecharts.com/en-US/guide/figure

Type definition for the arc figure. Specifies center coordinates, radius, start and end angles, and optional style properties.

```typescript
new ({
  attrs: {
    // The x-axis coordinate value of the center of the circle
    x: number
    // The y-axis coordinate value of the center of the circle
    y: number
    // radius
    r: number
    // start angle
    startAngle: number
    // end angle
    endAngle: number
  },
  styles: {
    // style, optional `solid`, `dashed`
    style?: 'solid' | 'dashed'
    // size
    size?: number
    // color
    color?: string
    // dotted line parameter
    dashedValue?: number[]
  }
}) => Figure
```

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

### Configure default layout with options.layout

Source: https://klinecharts.com/en-US/guide/v9-to-v10

Shows the new 10.x layout configuration object. It replaces the 9.x array-style pane layout and the beta-era basicParams/panes shape.

```javascript
init('chart', {
  layout: {
    barSpaceLimit: {
      min: 2,
      max: 40
    },
    pane: {
      height: 120,
      minHeight: 40,
      dragEnabled: true,
      order: 10,
      state: 'normal'
    },
    yAxis: {
      position: 'right',
      inside: false,
      scrollZoomEnabled: true
    }
  }
})
```

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

### Get overlays with filter in v10

Source: https://klinecharts.com/en-US/guide/v9-to-v10

Replaces getOverlayById(id) with getOverlays(filter) in v10. The filter object can include id, groupId, and paneId to select overlays.

```javascript
const overlays = chart.getOverlays({
  id: 'overlay_id',
  groupId: 'group_1',
  paneId: 'candle_pane'
})
```

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

### Rect figure type definition

Source: https://klinecharts.com/en-US/guide/figure

Type definition for the rect figure. Specifies starting point, width, height, and optional fill/stroke styles including border radius.

```typescript
new ({
  attrs: {
    // The x-axis coordinate value of the starting point
    x: number
    // The y-axis coordinate value of the starting point
    y: number
    // width
    width: number
    // high
    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
    // frame size
    borderSize?: number
    // border dotted line parameters
    borderDashedValue?: number[]
    // Border fillet value
    borderRadius?: number
  }
}) => Figure
```

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

### Get and draw a figure class

Source: https://klinecharts.com/en-US/guide/figure

Retrieves a figure class by name and draws an instance on a canvas context. Requires a canvas context and is used for custom indicators or overlays.

```javascript
const Figure = klinecharts.getFigureClass(name)
new Figure({ attrs, styles }).draw(ctx)
```

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

### Configure hot keys in chart initialization

Source: https://klinecharts.com/en-US/guide/hot-key

Shows how to enable or disable hot keys and exclude specific global hot keys when initializing a chart instance.

```javascript
const chart = init('chart', {
  hotkey: {
    enabled: true,
    exclude: ['zoomIn']
  }
})
```

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

### Register a new locale with klinecharts.registerLocale

Source: https://klinecharts.com/en-US/guide/i18n

Registers a new locale for the chart using the klinecharts.registerLocale API. This example adds traditional Chinese (zh-HK) with translations for time-related labels. After registration, the locale can be used via init(options) or setLocale(key).

```typescript
klinecharts.registerLocale('zh-HK', {
  time: '時間：',
  open: '開：',
  high: '高：',
  low: '低：',
  close: '收：',
  volume: '量：',
  second: '秒',
  minute: '分鐘',
  hour: '小時',
  day: '天',
  week: '週',
  month: '月',
  year: '年'
})
```

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

### Data flow pipeline

Source: https://klinecharts.com/en-US/guide/data-integration

Illustrates the fixed data flow pipeline: setSymbol, setPeriod, and setDataLoader must all be ready before getBars is triggered; the chart then calls subscribeBar automatically and merges real-time updates by timestamp.

```txt
setSymbol(symbol) + setPeriod(period) + setDataLoader(loader)
        │  The chart starts the first data load only after all three are ready
        ▼
getBars({ type: 'init', timestamp: null, ... })
        │  Fetch historical data and return it to the chart through callback(data, more)
        ▼
The chart renders the historical data and automatically calls subscribeBar({ symbol, period, callback })
        │  Afterwards, every time the real-time source receives a record
        ▼
subscribeBar's callback(data) ──► the chart merges it into the last bar by timestamp
```

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

### Svelte: Initialize KLineChart with data loader

Source: https://klinecharts.com/en-US/guide/quick-start

Svelte component that initializes a KLineChart instance with a data loader providing sample bars. The script is incomplete; it lacks the onDestroy cleanup and the closing script tag.

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

<script>
import { onMount, onDestroy } from 'svelte'

onMount(() => {
  const chart = init('chart')
  chart.setSymbol({ ticker: 'TestSymbol' })
  chart.setPeriod({ span: 1, type: 'day' })
  chart.setDataLoader({
    getBars: ({ callback}) => {
      callback([
        { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
        { timestamp: 1517932800000, open: 7310.1, high: 8499.9, low: 6810, close: 8165.4, volume: 148807 },
        { timestamp: 1518019200000, open: 8166.7, high: 8700.8, low: 7400, close: 8245.1, volume: 24467 },
        { timestamp: 1518105600000, open: 8244, high: 8494, low: 7760, close: 8364, volume: 29834 },
        { timestamp: 1518192000000, open: 8363.6, high: 9036.7, low: 8269.8, close: 8311.9, volume: 28203 },
        { timestamp: 1518278400000, open: 8301, high: 8569.4, low: 7820.2, close: 8426, volume: 59854 },
        { timestamp: 1518364800000, open: 8426, high: 8838, low: 8024, close: 8640, volume: 54457 },
        { timestamp: 1518451200000, open: 8640, high: 8976.8, low: 8360, close: 8500, volume: 51156 },
        { timestamp: 1518537600000, open: 8504.9, high: 9307.3, low: 8474.3, close: 9307.3, volume: 49118 },
        { timestamp: 1518624000000, open: 9307.3, high: 9897, low: 9182.2, close: 9774, volume: 48092 }
      ])
    }
  })
})
```

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

### SolidJS: Initialize KLineChart with data loader

Source: https://klinecharts.com/en-US/guide/quick-start

SolidJS component that initializes a KLineChart instance with a data loader providing sample bars, and disposes it on cleanup.

```jsx
import { onMount, onCleanup } from 'solid-js'
import { init, dispose } from 'klinecharts'

export default () => {
  onMount(() => {
    const chart = init('chart')
    chart.setSymbol({ ticker: 'TestSymbol' })
    chart.setPeriod({ span: 1, type: 'day' })
    chart.setDataLoader({
      getBars: ({ callback}) => {
        callback([
          { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
          { timestamp: 1517932800000, open: 7310.1, high: 8499.9, low: 6810, close: 8165.4, volume: 148807 },
          { timestamp: 1518019200000, open: 8166.7, high: 8700.8, low: 7400, close: 8245.1, volume: 24467 },
          { timestamp: 1518105600000, open: 8244, high: 8494, low: 7760, close: 8364, volume: 29834 },
          { timestamp: 1518192000000, open: 8363.6, high: 9036.7, low: 8269.8, close: 8311.9, volume: 28203 },
          { timestamp: 1518278400000, open: 8301, high: 8569.4, low: 7820.2, close: 8426, volume: 59854 },
          { timestamp: 1518364800000, open: 8426, high: 8838, low: 8024, close: 8640, volume: 54457 },
          { timestamp: 1518451200000, open: 8640, high: 8976.8, low: 8360, close: 8500, volume: 51156 },
          { timestamp: 1518537600000, open: 8504.9, high: 9307.3, low: 8474.3, close: 9307.3, volume: 49118 },
          { timestamp: 1518624000000, open: 9307.3, high: 9897, low: 9182.2, close: 9774, volume: 48092 }
        ])
      }
    })
  })

  onCleanup(() => {
    // 销毁图表
    dispose('chart')
  })

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

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

### Create indicator with createIndicator

Source: https://klinecharts.com/en-US/guide/indicator

Shows the two primary ways to add an indicator: creating it in a separate pane with a string name, or overlaying it on the candle pane by passing an object with name and paneId plus a true flag. The overlay approach works only for candle-compatible indicators such as MA, EMA, BOLL, SAR, SMA, and BBI.

```ts
// Create in a separate pane
chart.createIndicator('VOL')

// Overlay on candle pane
chart.createIndicator({ name: 'MA', paneId: 'candle_pane' }, true)
```

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

### Load KLineChart UMD from CDN

Source: https://klinecharts.com/en-US/guide/quick-start

Load the UMD build of KLineChart from a CDN. After loading, the global variable klinecharts is available.

```html
<script src="https://cdn.jsdelivr.net/npm/klinecharts/dist/umd/klinecharts.min.js"></script>
```

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

### Recommended minimal custom overlay template

Source: https://klinecharts.com/en-US/guide/overlay

Registers a custom overlay named 'customLine' with totalStep 3, default figures, weak magnet mode, and a createPointFigures callback that draws a line. Includes optional performEventPressedMove and performEventMoveForDrawing callbacks for constraining drag/draw behavior.

```typescript
registerOverlay({
  name: 'customLine',
  totalStep: 3,
  needDefaultPointFigure: true,
  needDefaultXAxisFigure: true,
  needDefaultYAxisFigure: true,
  mode: 'weak_magnet',
  modeSensitivity: 8,
  createPointFigures: ({ coordinates }) => {
    if (coordinates.length < 2) {
      return []
    }
    return [{
      type: 'line',
      attrs: { coordinates }
    }]
  },
  // Optional: constrain dragging or drawing behaviors
  performEventPressedMove: ({ points }) => {
    // Adjust points when needed
  },
  performEventMoveForDrawing: ({ points }) => {
    // Adjust points when needed
  }
})
```

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

### Create a time-sharing chart with setStyles

Source: https://klinecharts.com/en-US/guide/faq

Use this snippet to create a time-sharing chart by setting the candle style type to 'area'.

```javascript
chart.setStyles({
  candle: {
    type: 'area',
  },
});
```

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

### registerHotkey

Source: https://klinecharts.com/en-US/guide/hot-key

Registers a custom hot key globally for all chart instances.

```APIDOC
## registerHotkey

### Description
Registers a custom hot key globally. Once registered, the hot key can be used by all chart instances. The chart listens to keyboard events, but hot keys are ignored inside `input`, `textarea`, and `contenteditable` elements.

### Method
registerHotkey

### Parameters
- **hotkey** (HotkeyTemplate) - Required - The hot key template to register.

### HotkeyTemplate
- **name** (string) - Required - The name of the hot key.
- **keys** (string | string[]) - Required - The key or keys that trigger the hot key. Key strings are composed of modifiers and a key, such as `Shift+ArrowLeft`, `Ctrl+S`, `Meta+Z`, and `Mod+Z`. `Mod` means `Meta` on macOS and iOS, and `Ctrl` on other systems. Common aliases include `Command`/`Cmd`, `Control`, `Option`, `Plus`, `Minus`, `Esc`, `Del`, `Left`, `Right`, `Up`, and `Down`.
- **preventDefault** (boolean) - Optional - Whether to call `event.preventDefault()`. Defaults to `true`.
- **stopPropagation** (boolean) - Optional - Whether to call `event.stopPropagation()`.
- **check** ((params) => boolean) - Optional - A function that determines whether the action should run. When it returns `false`, `action` will not run.
- **action** ((params) => void) - Required - The function to execute when the hot key is triggered. The `params` object includes a `chart` property.
- **extendData** (unknown) - Optional - Additional data to associate with the hot key.

### Example
```javascript
import { registerHotkey } from 'klinecharts'

registerHotkey({
  name: 'scrollToRealTime',
  keys: 'R',
  action: ({ chart }) => {
    chart.scrollToRealTime()
  }
})
```

```javascript
registerHotkey({
  name: 'customZoomIn',
  keys: ['Shift+=', 'Shift+NumpadAdd'],
  action: ({ chart }) => {
    chart.zoomAtCoordinate(1.2)
  }
})
```
```

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

### Register a hot key with multiple key combinations

Source: https://klinecharts.com/en-US/guide/hot-key

Shows that the 'keys' field can be an array of key strings, allowing multiple key combinations to trigger the same action.

```javascript
registerHotkey({
  name: 'customZoomIn',
  keys: ['Shift+=', 'Shift+NumpadAdd'],
  action: ({ chart }) => {
    chart.zoomAtCoordinate(1.2)
  }
})
```

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

### List supported indicators with getSupportedIndicators

Source: https://klinecharts.com/en-US/guide/indicator

Imports getSupportedIndicators from klinecharts and logs the array of all supported indicators in the current version. Use this to inspect which indicators are available at runtime.

```ts
import { getSupportedIndicators } from 'klinecharts'

const indicators = getSupportedIndicators()
console.log(indicators)
```
Tokens:
Raw