### Run Documentation Locally

Source: https://github.com/klinecharts/klinechart/blob/main/README.md

Commands to install dependencies and start the local documentation server.

```bash
# Install the dependencies
npm install

# Start document service
npm run docs:dev
```

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

### Get Supported Hotkeys

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/getSupportedHotkeys.md

This example demonstrates how to call the getSupportedHotkeys() method to retrieve the list of supported hotkeys. No parameters are required.

```javascript
import { getSupportedHotkeys } from "klinecharts";

const hotkeys = getSupportedHotkeys();
console.log(hotkeys);
```

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

### Build Production UMD Bundle and Start Docs Site

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/local-development.md

Builds the production UMD bundle and then starts the local development server for the documentation site.

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

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

### Install klinecharts with bun

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/download.md

Use this command to install klinecharts using bun. Ensure you have Node.js and bun installed.

```bash
bun install klinecharts
```

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

### Install Project Dependencies

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/local-development.md

Installs all necessary project dependencies using pnpm in the root directory.

```bash
pnpm install
```

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

### Install klinecharts with npm

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/download.md

Use this command to install klinecharts using npm. Ensure you have Node.js and npm installed.

```bash
npm install klinecharts
```

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

### Get Hotkey Configuration

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/getHotkey.md

This example demonstrates how to retrieve the configuration for a specific hotkey using its name. Ensure the hotkey is registered before calling this method.

```javascript
import { getHotkey } from "klinecharts";

const hotkey = getHotkey("my_hotkey");

if (hotkey) {
  console.log("Hotkey found:", hotkey);
} else {
  console.log("Hotkey not found.");
}
```

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

### Build KLineChart from Source

Source: https://github.com/klinecharts/klinechart/blob/main/README.md

Commands to install dependencies and build the project files into the dist folder.

```bash
# Install the dependencies
npm install

# Build files
npm run build
```

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

### Install klinecharts with yarn

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/download.md

Use this command to install klinecharts using yarn. Ensure you have Node.js and yarn installed.

```bash
yarn add klinecharts
```

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

### Install klinecharts with pnpm

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/download.md

Use this command to install klinecharts using pnpm. Ensure you have Node.js and pnpm installed.

```bash
pnpm install klinecharts
```

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

### Rendering setFormatter examples

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/setFormatter.md

Vue components used to render the formatting examples in the documentation.

```html
<SetFormatterFormatDate/>
```

```html
<SetFormatterFormatBigNumber/>
```

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

### Register Hotkey Basic Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/registerHotkey.md

Demonstrates the basic registration of a hotkey. This example shows how to set up a simple key combination to trigger an action.

```javascript
import { registerHotkey } from "klinecharts";

registerHotkey({
  name: "myHotkey",
  keys: ["alt+k"],
  action: (params) => {
    console.log("Hotkey triggered!", params);
  }
});

// To unregister:
// unregisterHotkey("myHotkey");
```

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

### Initialize Styles Extension Example

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/registerStyles.md

This Vue component demonstrates how to initialize custom styles using the registerStyles API. It's typically used during the application's setup phase to apply a base set of styles.

```vue
<script setup>
import InitStylesExtension from '../../../@views/api/samples/init-styles-extension/index.vue'
</script>

<InitStylesExtension />
```

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

### Prepare Development Environment

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/local-development.md

Ensures the correct Node.js version is used and verifies the pnpm package manager installation.

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

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

### Basic Usage of setHotkey

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/setHotkey.md

Demonstrates the basic usage of the setHotkey method to configure hotkey settings. This example shows how to enable hotkeys and exclude specific global hotkey names.

```vue
<script setup>
import SetHotkey from '../../@views/api/samples/setHotkey/index.vue'
</script>

<SetHotkey/>
```

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

### Install Klinecharts with Bun

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/download.md

Use this command to add Klinecharts to your project when using Bun as your package manager.

```bash
bun add klinecharts
```

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

### Install KLineChart via Package Manager

Source: https://github.com/klinecharts/klinechart/blob/main/README.md

Use npm or yarn to add the library to your project dependencies.

```bash
npm install klinecharts --save
```

```bash
yarn add klinecharts
```

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

### Basic Y-Axis Registration Example

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/registerYAxis.md

This example demonstrates the basic usage of registering a y-axis with klinechart. Ensure the component is imported and used correctly.

```vue
<script setup>
import RegisterYAxisBasic from '../../@views/api/samples/registerYAxis/index.vue'
</script>

<RegisterYAxisBasic/>
```

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

### Start Built-in Debug Page

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/local-development.md

Launches the local debug page for quick validation of source code changes without building the distribution files.

```bash
pnpm run debug
```

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

### Basic Resize Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/resize.md

This example demonstrates the basic usage of the resize functionality. The chart automatically listens to container size changes, but this method can be used for manual recalculations in special cases. Frequent calls may impact performance.

```javascript
import Resize from '../../../@views/api/samples/Resize/index.vue'
import Tip from '../../../@components/Tip.vue'

// ... component setup ...

<Resize/>
```

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

### Basic Usage of GetFigureClass

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/getFigureClass.md

Demonstrates the basic usage of the getFigureClass component. This example shows how to render the component to interact with the getFigureClass functionality.

```vue
<GetFigureClass />
```

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

### Get Hotkey Configuration

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getHotkey.md

This snippet demonstrates how to retrieve the hotkey configuration using the getHotkey() method. No parameters are required.

```javascript
import GetHotkey from '../../../@views/api/samples/getHotkey/index.vue'

```

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

### KLineChart CDN Integration

Source: https://github.com/klinecharts/klinechart/blob/main/skills/klinecharts/examples.md

Shows how to integrate KLineChart using a CDN. This example includes the necessary HTML structure and a script tag to initialize the chart and load initial data.

```html
<div id="chart" style="width:600px;height:600px"></div>
<script src="https://cdn.jsdelivr.net/npm/klinecharts/dist/umd/klinecharts.min.js"></script>
<script>
  const chart = klinecharts.init('chart')
  chart.setSymbol({ ticker: 'TEST', pricePrecision: 2, volumePrecision: 0 })
  chart.setPeriod({ span: 1, type: 'day' })
  chart.setDataLoader({ getBars: ({ callback }) => fetch('https://klinecharts.com/datas/kline.json').then(r => r.json()).then(callback) })
</script>
```

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

### Register a Basic Hotkey

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/registerHotkey.md

This example demonstrates how to register a simple hotkey to trigger a chart action. Ensure the component is imported and used within your Vue application.

```vue
<script setup>
import RegisterHotkey from '../../../@views/api/samples/registerHotkey/index.vue'
</script>

<RegisterHotkey/>
```

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

### Basic Override Indicator Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/overrideIndicator.md

Demonstrates the basic usage of overriding indicator properties. This example shows how to apply overrides without specifying a particular pane.

```javascript
import OverrideIndicatorBasic from '../../@views/api/samples/overrideIndicator-basic/index.vue'
import Tip from '../../@components/Tip.vue'

```

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

### Build Documentation

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/local-development.md

Run this command if you have made changes to the documentation.

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

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

### Create Overlay and Immediately Complete Creation

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/createOverlay.md

Illustrates how to create an overlay and have its creation process completed immediately, often used when points are pre-defined.

```javascript
import CreateOverlayPoints from '../../@views/api/samples/createOverlay-points/index.vue'
```

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

### Initialization and Lifecycle

Source: https://github.com/klinecharts/klinechart/blob/main/skills/klinecharts/SKILL.md

Demonstrates how to initialize the klinechart instance, set symbol and period, load data, and handle lifecycle events like mounting, unmounting, and resizing.

```APIDOC
## Initialization and Lifecycle

### Description
Initializes the klinechart instance, sets symbol and period, loads data, and handles lifecycle events.

### CDN Usage
`klinecharts.init(...)`
`klinecharts.dispose(...)`

### Framework Integration Pattern (React Example)
```tsx
import React, { useEffect, useRef } from 'react';
import { init, dispose } from 'klinecharts';

const MyChartComponent = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      const chart = init(containerRef.current);
      chart.setSymbol({ ticker: 'TEST', pricePrecision: 2, volumePrecision: 0 });
      chart.setPeriod({ span: 1, type: 'day' });
      chart.setDataLoader(loader); // Assuming 'loader' is defined elsewhere

      const ro = new ResizeObserver(() => chart.resize());
      ro.observe(containerRef.current);

      return () => {
        ro.disconnect();
        dispose(containerRef.current!)
      };
    }
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '400px' }}></div>;
};

export default MyChartComponent;
```

### Notes
- The container element must have explicit width and height.
- Call `init` on mount, `dispose` on unmount, and `chart.resize()` on size changes.
```

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

### Chart Initialization with Extended Styles

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/init.md

Demonstrates initializing a chart with custom, extended style configurations. This allows for fine-grained control over the chart's aesthetics.

```javascript
<script setup>
import InitStylesExtension from '../../../@views/api/samples/init-styles-extension/index.vue'
import Tip from '../../../@components/Tip.vue'
</script>

<template>
  <div class="chart-container" style="height: 400px;">
    <InitStylesExtension />
  </div>
  <Tip>
    Extend default styles or provide your own custom style configurations during chart initialization.
  </Tip>
</template>

<style scoped>
.chart-container {
  padding: 20px;
}
</style>
```

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

### subscribeBar Callback Example

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/data-integration.md

Example of the callback function for `subscribeBar`. It normalizes a real-time data record into `KLineData` format and returns it to the chart.

```typescript
callback(data: KLineData)
```

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

### Batch Create Overlays

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/createOverlay.md

Demonstrates how to efficiently create multiple overlays at once using the createOverlay method in a batch operation.

```javascript
import CreateOverlayBatch from '../../@views/api/samples/createOverlay-batch/index.vue'
```

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

### GET getSupportedOverlays()

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/getSupportedOverlays.md

Retrieves the list of supported overlays for the chart.

```APIDOC
## getSupportedOverlays()

### Description
Returns an array of strings representing the overlay types supported by the current chart instance.

### Parameters
This method does not accept any parameters.

### Returns
- **Array<string>** - A list of supported overlay identifiers.

### Usage Example
```javascript
const overlays = chart.getSupportedOverlays();
console.log(overlays);
```
```

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

### Get Chart Styles

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getStyles.md

Retrieves the current style configuration of the klinechart.

```APIDOC
## GET /klinecharts/klinechart/getStyles

### Description
Retrieves the chart style configuration.

### Method
GET

### Endpoint
/klinecharts/klinechart/getStyles

### Parameters
`getStyles` does not accept any parameters.

### Returns
`getStyles` returns the complete style configuration `Styles`.

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **styles** (Styles) - The complete style configuration.

#### Response Example
```json
{
  "styles": {
    "lineColor": "#FF0000",
    "textColor": "#000000"
  }
}
```
```

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

### Using Custom Indicators

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/createIndicator.md

Shows how to create a custom indicator by providing a detailed configuration object.

```javascript
import { createIndicator } from "klinecharts";

createIndicator({
  name: "customIndicator",
  shortName: "CI",
  calcParams: [30, 10],
  precision: 2,
  shouldOhlc: true,
  shouldFormatBigNumber: true,
  extendData: {},
  series: "normal",
  figures: [
    {
      key: "avg",
      type: "line",
      attrs: {
        style: {
          color: "#ff0000"
        }
      },
      styles: {
        color: "#ff0000"
      }
    }
  ],
  minValue: 0,
  maxValue: 100,
  styles: {
    line: {
      color: "#ff0000"
    }
  },
  shouldUpdate: true,
  calc: (data, { calcParams: [shortPeriod, longPeriod] }) => {
    return data.map((d, i) => {
      const close = d.close;
      let avg = 0;
      if (i > 0) {
        avg = (close * shortPeriod + (data[i - 1].avg || 0) * (shortPeriod - 1)) / shortPeriod;
      }
      return {
        avg
      };
    });
  },
  regenerateFigures: (data) => {
    return data.map((d) => {
      return {
        key: "avg",
        type: "line",
        value: d.avg
      };
    });
  },
  createTooltipDataSource: (data) => {
    return [
      { name: "avg", value: data.avg.toFixed(2) }
    ];
  },
  draw: (ctx, point, data) => {
    return true;
  },
  onDataStateChange: (state) => {
    console.log(state);
  }
});

```

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

### GET /getDataList

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getDataList.md

Retrieves the current data array from the KLineChart instance.

```APIDOC
## getDataList()

### Description
Retrieves the current data of the chart.

### Returns
- **KLineData[]** - An array containing the current chart data.
```

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

### GET getSupportedFigures()

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/getSupportedFigures.md

Retrieves the list of supported basic figures for the chart.

```APIDOC
## getSupportedFigures()

### Description
Retrieves a list of all basic graphical shapes currently supported by the KLineChart library.

### Parameters
None.

### Returns
- **Array** (string[]) - An array of strings representing the names of the supported figures.

### Usage Example
```javascript
const figures = chart.getSupportedFigures();
console.log(figures);
```
```

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

### GET getSize

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getSize.md

Retrieves the size information for a specified chart pane or position.

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

### Description
Retrieves the size of the chart or a specific pane within the chart.

### Parameters
- **paneId** (string) - Optional - The unique identifier of the pane.
- **position** (string) - Optional - The position within the chart, supports 'root', 'main', and 'yAxis'.

### Returns
- **Bounding** (object) - Returns a Bounding object containing size information (width, height) or null if not found.
```

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

### Basic usage of overlayOverlay

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/overrideOverlay.md

Demonstrates the standard implementation of the overlayOverlay method.

```vue
<OverrideOverlayBasic/>
```

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

### Batch Create Overlays

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/createOverlay.md

Demonstrates the batch creation of overlays, likely for scenarios requiring multiple similar overlays. Ensure the `CreateOverlayBatch` component is imported.

```vue
<script setup>
import CreateOverlayBatch from '../../../@views/api/samples/createOverlay-batch/index.vue'
</script>

<template>
  <CreateOverlayBatch/>
</template>
```

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

### GET /klinecharts/klinechart/indicators

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getIndicators.md

Retrieves indicator information based on specified filter conditions.

```APIDOC
## GET /klinecharts/klinechart/indicators

### Description
Retrieves indicator information. This endpoint allows fetching details about indicators, optionally filtered by their ID, name, or the pane they belong to.

### Method
GET

### Endpoint
/klinecharts/klinechart/indicators

### Parameters
#### Query Parameters
- **filter** (object) - Optional - Filter conditions for the indicators.
  - **id** (string) - Optional - The unique identifier of the indicator.
  - **name** (string) - Optional - The name of the indicator.
  - **paneId** (string) - Optional - The identifier of the pane the indicator is associated with.

### Response
#### Success Response (200)
- **indicators** (Indicator[]) - An array of indicator objects.

#### Response Example
```json
{
  "indicators": [
    {
      "id": "ma",
      "name": "Moving Average",
      "paneId": "chart"
    }
  ]
}
```
```

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

### GET getBarSpace()

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/getBarSpace.md

Retrieves the spatial information object for a single candlestick bar.

```APIDOC
## getBarSpace()

### Description
Retrieves the spatial information for a single candlestick bar within the chart.

### Parameters
- None

### Returns
- **BarSpace** (Object) - An object containing the space information for a single candlestick bar.
```

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

### GET /overlays

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/api/references/instance/getOverlays.md

Retrieves a list of overlays based on optional filter criteria.

```APIDOC
## GET /overlays

### Description
Retrieves a list of overlays. The results can be filtered by providing an optional filter object containing specific identifiers.

### Method
GET

### Parameters
#### Query Parameters
- **id** (string) - Optional - The unique identifier of the overlay.
- **name** (string) - Optional - The name of the overlay.
- **groupId** (string) - Optional - The group identifier associated with the overlay.
- **paneId** (string) - Optional - The pane identifier where the overlay is rendered.

### Response
#### Success Response (200)
- **overlays** (Array) - A list of Overlay objects matching the provided criteria.
```

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

### init(ds, options?)

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/init.md

Initializes a chart instance. It requires a container element or its ID and accepts an optional configuration object for customization.

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

### Description
Initializes a chart instance. It requires a container element or its ID and accepts an optional configuration object for customization.

### Parameters
- `ds` (HTMLElement | string): The container element or its ID where the chart will be rendered.
- `options` (object, optional): Configuration options for the chart.
  - `layout` (object): Custom layout configuration.
    - `basicParams` (object): Basic layout parameters.
      - `barSpaceLimitMin` (number): Minimum bar space.
      - `barSpaceLimitMax` (number): Maximum bar space.
      - `yAxisPosition` (string): Default y-axis position ('left' or 'right').
      - `yAxisInside` (boolean): Whether the default y-axis is inside the pane.
      - `paneMinHeight` (number): Default minimum pane height.
      - `paneHeight` (number): Default pane height.
    - `panes` (array): List of custom panes.
      - `type` (string): Pane type ('candle', 'indicator', 'xAxis').
      - `content` (object | string): Pane content, typically indicators or configurations.
        - `indicator` (object | string): Indicator name or configuration.
        - `yAxis` (object): Indicator's y-axis configuration.
      - `options` (object): Pane specific options.
        - `id` (string): Pane ID.
        - `height` (number): Pane height.
        - `minHeight` (number): Minimum pane height.
        - `dragEnabled` (boolean): Whether height can be dragged.
        - `order` (number): Pane order.
        - `state` (string): Pane state ('normal', 'maximize', 'minimize').
  - `locale` (string): Language setting (e.g., 'zh-CN', 'en-US').
  - `timezone` (string): Timezone name (e.g., 'Asia/Shanghai').
  - `styles` (object | string): Custom styles or registered style names.
  - `formatter` (object): Formatting functions.
    - `formatDate` (function): Function to format dates.
    - `formatBigNumber` (function): Function to format large numbers.
    - `formatExtendText` (function): Function to format extended text.
  - `thousandsSeparator` (object): Thousands separator configuration.
    - `sign` (string): Separator sign.
    - `format` (function): Custom format function.
  - `decimalFold` (object): Decimal zero folding configuration.
    - `threshold` (number): Folding threshold.
    - `format` (function): Custom format function.
  - `zoomAnchor` (string | object): Zoom anchor position ('last_bar', 'cursor', or { main, xAxis }).
  - `hotkey` (object): Hotkey configuration.
    - `enabled` (boolean): Whether hotkeys are enabled.
    - `exclude` (array): List of excluded global hotkey names.

### Returns
- `Chart`: An instance of the Chart object.
```

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

### GET /indicators

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/api/references/instance/getIndicators.md

Retrieves a list of indicators, optionally filtered by specific attributes.

```APIDOC
## GET /indicators

### Description
Retrieves a list of indicators based on optional filter criteria.

### Method
GET

### Parameters
#### Query Parameters
- **id** (string) - Optional - The unique identifier of the indicator.
- **name** (string) - Optional - The name of the indicator.
- **paneId** (string) - Optional - The identifier of the pane associated with the indicator.

### Response
#### Success Response (200)
- **indicators** (Array) - A list of indicator objects.
```

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

### Set Symbol Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/setSymbol.md

Example of how to implement the setSymbol method using a Vue component.

```vue
<script setup>
import SetSymbol from '../../../@views/api/samples/setSymbol/index.vue'
</script>

### Basic {#basic}
<SetSymbol/>
```

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

### Create K-line Chart with Mock Data

Source: https://github.com/klinecharts/klinechart/blob/main/skills/klinecharts/prompts.md

Use this prompt to generate a basic K-line chart using static mock data. The container ID is specified as 'chart'.

```text
Create a K-line chart with klinecharts v10 in my project. Container id is chart; use static mock data first.
```

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

### Initialize Chart with Styles

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/styles.md

Use the `init` method to initialize the chart with custom styles. This is useful for setting up the chart's appearance upon creation.

```javascript
const chart = klinecharts.init('klinechart-container', {
  styles: {
    // ... custom styles
  }
});
```

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

### getHotkey()

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getHotkey.md

`getHotkey` gets the hot key configuration. It does not accept any parameters and returns the `Hotkey` object.

```APIDOC
## getHotkey()

### Description
Gets the hot key configuration.

### Method
`getHotkey`

### Parameters
`getHotkey` does not accept any parameters.

### Returns
`getHotkey` returns `Hotkey` .
```

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

### getDataList() - Get Chart Data

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/getDataList.md

Retrieves the current data for the klinechart. This method does not accept any parameters.

```APIDOC
## GET /klinecharts/klinechart/getDataList

### Description
Retrieves the current data for the klinechart.

### Method
GET

### Endpoint
/klinecharts/klinechart/getDataList

### Parameters
`getDataList` does not accept any parameters.

### Response
#### Success Response (200)
- **data** (KLineData[]) - An array of KLineData objects representing the chart data.

#### Response Example
```json
[
  {
    "timestamp": 1678886400000,
    "open": 100.50,
    "close": 102.75,
    "high": 103.50,
    "low": 100.25,
    "volume": 15000
  }
]
```
```

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

### Initialize KLineChart with Static Data

Source: https://github.com/klinecharts/klinechart/blob/main/skills/klinecharts/examples.md

Demonstrates initializing KLineChart and setting up a static data loader to fetch historical bar data from a JSON file. Ensure the chart container ID and data fetching logic are correctly implemented.

```typescript
import { init, dispose } from 'klinecharts'

const chart = init('chart')
chart.setSymbol({ ticker: 'TEST', pricePrecision: 2, volumePrecision: 0 })
chart.setPeriod({ span: 1, type: 'day' })
chart.setDataLoader({
  getBars: ({ callback }) => {
    fetch('https://klinecharts.com/datas/kline.json')
      .then(res => res.json())
      .then(dataList => callback(dataList))
  }
})
```

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

### Get Hotkey Configuration

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/getHotkey.md

Retrieves the hotkey configuration object from the klinechart instance. This method does not accept any parameters.

```javascript
instance.getHotkey()
```

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

### Basic Custom Overlay

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/registerOverlay.md

Demonstrates the basic registration and usage of a custom overlay. This is useful for simple custom visualizations.

```vue
<script setup>
import CustomOverlayBasic from '../../../@views/api/samples/custom-overlay-basic/index.vue'
</script>

<template>
  <CustomOverlayBasic/>
</template>
```

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

### GET /export

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/api/references/instance/getConvertPictureUrl.md

Exports the current chart view as an image string based on provided configuration parameters.

```APIDOC
## GET /export

### Description
Exports the KLineChart as an image string.

### Parameters
#### Request Body
- **includeOverlay** (boolean) - Optional - Whether to include overlays in the exported image.
- **type** ('png' | 'jpeg' | 'bmp') - Optional - The format of the exported image.
- **backgroundColor** (string) - Optional - The background color for the exported image.

### Response
#### Success Response (200)
- **string** - The exported image data as a string.
```

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

### Setting Pane Basic Options

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/createIndicator.md

Shows how to configure basic pane options when creating an indicator.

```javascript
import CreateIndicatorPaneOptionsBasic from '../../../@views/api/samples/createIndicator-paneOptions-basic/index.vue'
```

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

### Initialize KLineCharts in SolidJS

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/create-chart/solid.md

Uses onMount to initialize the chart and set initial data, and onCleanup to dispose of the chart instance when the component is unmounted.

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

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

### Chart Initialization with Date Formatting

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/init.md

Shows how to initialize a chart with a custom date formatter. This allows you to control how dates are displayed on the chart's axes.

```javascript
<script setup>
import InitFormatDate from '../../../@views/api/samples/init-formateDate/index.vue'
import Tip from '../../../@components/Tip.vue'
</script>

<template>
  <div class="chart-container" style="height: 400px;">
    <InitFormatDate />
  </div>
  <Tip>
    Customize date display on the chart by providing a custom formatting function during initialization.
  </Tip>
</template>

<style scoped>
.chart-container {
  padding: 20px;
}
</style>
```

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

### Retrieve thousands separator configuration

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getThousandsSeparator.md

Use this method to get the current thousands separator settings for the chart instance.

```vue
<script setup>
import GetThousandsSeparator from '../../../@views/api/samples/getThousandsSeparator/index.vue'
</script>

<GetThousandsSeparator/>
```

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

### Get Current Chart Locale

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/getLocale.md

Use this method to retrieve the current language setting of the chart. It does not require any parameters.

```javascript
import GetLocale from '../../@views/api/samples/getLocale/index.vue'

// Usage within a Vue component
// <GetLocale/>
```

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

### Get Supported Indicators

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/indicator.md

Import and use `getSupportedIndicators` to retrieve a list of all technical indicators available in the current klinecharts version.

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

const indicators = getSupportedIndicators()
console.log(indicators)
```

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

### Basic createOverlay Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/createOverlay.md

Demonstrates the fundamental usage of `createOverlay` to add a standard overlay to the chart. Ensure the necessary Vue component is imported.

```vue
<script setup>
import CreateOverlayBasic from '../../../@views/api/samples/createOverlay-basic/index.vue'
</script>

<template>
  <CreateOverlayBasic/>
</template>
```

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

### Initialize Klinechart in Svelte

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/create-chart/svelte.md

Use onMount to initialize the chart and set initial configurations like symbol and period. Ensure dispose is called in onDestroy to clean up resources.

```svelte
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 }
      ])
    }
  })
})

onDestroy(() => {
  dispose('chart')
})

```

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

### Chart Initialization

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/api/references/chart/init.md

Initializes a new chart instance with specified data source and configuration options.

```APIDOC
## init

### Description
Initializes a chart instance. This function takes a data source (either a string selector for an HTML element or an HTMLElement itself) and an optional configuration object to customize the chart's appearance and behavior.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **ds** (string | HTMLElement) - Required - The target DOM element or a selector for it where the chart will be rendered.
- **options** (object) - Optional - Configuration object for the chart.
  - **layout** (object) - Optional - Defines the chart's layout and panes.
    - **basicParams** (object) - Optional - Basic layout parameters.
      - **barSpaceLimitMin** (number) - Optional - Minimum limit for bar space.
      - **barSpaceLimitMax** (number) - Optional - Maximum limit for bar space.
      - **yAxisPosition** ('left' | 'right') - Optional - Position of the Y-axis.
      - **yAxisInside** (boolean) - Optional - Whether the Y-axis is inside the chart.
      - **paneMinHeight** (number) - Optional - Minimum height for a pane.
      - **paneHeight** (number) - Optional - Default height for a pane.
    - **panes** (Array<object>) - Optional - Defines individual panes within the chart.
      - **type** ('candle' | 'indicator' | 'xAxis') - Required - Type of the pane.
      - **content** (Array<string | IndicatorCreate | object>) - Optional - Content to display in the pane (e.g., indicators).
      - **options** (object) - Optional - Options specific to the pane.
        - **id** (string) - Optional - Unique identifier for the pane.
        - **height** (number) - Optional - Height of the pane.
        - **minHeight** (number) - Optional - Minimum height of the pane.
        - **dragEnabled** (boolean) - Optional - Whether pane height can be dragged.
        - **order** (number) - Optional - Order of the pane.
        - **state** ('normal' | 'maximize' | 'minimize') - Optional - State of the pane.
  - **locale** (string) - Optional - Locale string for internationalization.
  - **styles** (string | DeepPartial<Styles>) - Optional - Custom styles for the chart.
  - **timezone** (string) - Optional - Timezone for the chart.
  - **formatter** (object) - Optional - Custom formatters for data display.
    - **formatDate** (function) - Optional - Formatter for dates.
    - **formatBigNumber** (function) - Optional - Formatter for large numbers.
    - **formatExtendText** (function) - Optional - Formatter for extended text (e.g., last price).
  - **thousandsSeparator** (object) - Optional - Configuration for thousands separator.
    - **sign** (string) - Optional - The thousands separator sign.
    - **format** (function) - Optional - Custom format function for thousands separation.
  - **decimalFold** (object) - Optional - Configuration for decimal folding.
    - **threshold** (number) - Optional - Threshold for decimal folding.
    - **format** (function) - Optional - Custom format function for decimal folding.
  - **zoomAnchor** ('cursor' | 'last_bar' | object) - Optional - Defines the anchor point for zooming.
  - **hotkey** (object) - Optional - Configuration for keyboard shortcuts.
    - **enabled** (boolean) - Optional - Whether hotkeys are enabled.
    - **exclude** (Array<string>) - Optional - List of elements to exclude from hotkey listeners.

### Request Example
```javascript
// Example usage:
const chart = init(document.getElementById('chart-container'), {
  layout: {
    panes: [
      { type: 'candle' },
      { type: 'indicator', content: ['MACD'] }
    ]
  },
  locale: 'en-US',
  styles: 'dark'
});
```

### Response
#### Success Response (Chart Instance)
- **Chart** - Returns the initialized chart instance, allowing further interaction.

#### Response Example
```javascript
// chart instance returned
// const chart = init(...)
```
```

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

### Get Indicators Basic Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getIndicators.md

Demonstrates how to use the getIndicators method to retrieve indicator information. Ensure the component is imported and rendered.

```javascript
import GetIndicators from '../../../@views/api/samples/getIndicators/index.vue'
```

```vue
<GetIndicators/>
```

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

### Initialize Klinecharts with Layout

Source: https://github.com/klinecharts/klinechart/blob/main/skills/klinecharts/SKILL.md

Use the `init` function to set up the chart container with specific pane types, locale, timezone, and styles.

```typescript
init(container, {
  layout: {
    panes: [
      { type: 'candle' },
      { type: 'indicator', content: ['MA', 'VOL'] }
    ]
  },
  locale: 'zh-CN',
  timezone: 'Asia/Shanghai',
  styles: 'dark'
})
```

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

### Get Supported Indicators List

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/getSupportedIndicators.md

Call getSupportedIndicators() to retrieve an array of strings, where each string is the name of a supported indicator. No parameters are required.

```javascript
import { Klinecharts} from 'klinecharts'
klinecharts.getSupportedIndicators()
```

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

### Register Custom Indicator

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/guide/indicator.md

Define and register a custom indicator named 'CUSTOM_MID' using `registerIndicator`. This example calculates a simple moving average.

```typescript
import { registerIndicator } from 'klinecharts'

registerIndicator({
  name: 'CUSTOM_MID',
  shortName: 'MID',
  series: 'price',
  calcParams: [14],
  figures: [
    { key: 'mid', title: 'MID: ', type: 'line' }
  ],
  calc: (dataList, indicator) => {
    const [period] = indicator.calcParams
    return dataList.map((k, i) => {
      if (i < period - 1) {
        return { mid: null }
      }
      const start = i - period + 1
      const slice = dataList.slice(start, i + 1)
      const sum = slice.reduce((acc, item) => acc + item.close, 0)
      return { mid: sum / period }
    })
  }
})
```

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

### Chart Initialization with Timezone Configuration

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/init.md

Explains how to initialize a chart while specifying a particular timezone. This ensures accurate date and time displays for your data.

```javascript
<script setup>
import InitTimezone from '../../../@views/api/samples/init-timezone/index.vue'
import Tip from '../../../@components/Tip.vue'
</script>

<template>
  <div class="chart-container" style="height: 400px;">
    <InitTimezone />
  </div>
  <Tip>
    Configure the chart's timezone during initialization to ensure correct time-based data representation.
  </Tip>
</template>

<style scoped>
.chart-container {
  padding: 20px;
}
</style>
```

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

### Basic Usage of setPaneOptions

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/setPaneOptions.md

Demonstrates the basic usage of the setPaneOptions method to configure a window. This snippet shows how to set general window properties.

```javascript
import { Klinecharts} from 'klinecharts'
klinecharts.extend({ 
  // ...
})

const chart = klinecharts.init('klinecharts-container')

chart.setPaneOptions({
  height: 200,
  minHeight: 50
})

```

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

### Basic Chart Initialization

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/init.md

Initializes a chart with default settings. Ensure the container is ready before calling.

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

const chart = init('kline-container')
// or
// const chart = init(document.getElementById('kline-container'))
```

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

### Import GetFigureClass Component

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/chart/getFigureClass.md

Import the GetFigureClass component for basic usage examples. This component is typically used to demonstrate the functionality of the getFigureClass API.

```javascript
import GetFigureClass from '../../@views/api/samples/getFigureClass/index.vue'
```

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

### Basic Usage of setPaneOptions

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/setPaneOptions.md

Demonstrates the basic application of setting pane options. This snippet shows how to configure a pane with specific height and drag enabled properties.

```javascript
import { createChart } from 'klinecharts';

const chart = createChart('klinechart-container');

chart.applyNewTheme();

chart.createPane({
  id: 'myPane',
  height: 200,
  dragEnabled: true,
});

chart.setPaneOptions({
  id: 'myPane',
  height: 300,
  dragEnabled: false,
});
```

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

### Get Visible Range Information

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getVisibleRange.md

Use this method to retrieve the current visible range of the chart. It returns an object containing range details.

```javascript
const visibleRange = klineChart.getVisibleRange()
```

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

### Get Current Symbol Info - Vue

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/getSymbol.md

Use this component to display the current trading symbol information. It utilizes the getSymbol() method internally.

```vue
<script setup>
import GetSymbol from '../../../@views/api/samples/getSymbol/index.vue'
</script>

<GetSymbol/>
```

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

### Initialize KLineChart in Solid

Source: https://github.com/klinecharts/klinechart/blob/main/docs/@views/quick-start/create-chart/index.md

Use the onMount lifecycle hook to initialize the chart after the component is mounted to the DOM.

```javascript
import { onMount } from 'solid-js';
import { init } from 'klinecharts';

export default function Chart() {
  let chartRef;
  onMount(() => {
    init(chartRef);
  });
  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}
```

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

### Basic createOverlay Usage

Source: https://github.com/klinecharts/klinechart/blob/main/docs/api/instance/createOverlay.md

Demonstrates the basic usage of the createOverlay method to add a simple overlay to the chart. This is the most common way to add predefined overlays.

```javascript
import CreateOverlayBasic from '../../@views/api/samples/createOverlay-basic/index.vue'
```

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

### Get Y-coordinate from Slope-Intercept

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/utils.md

Calculates the y-coordinate of a point on a line using its slope-intercept form (y = kx + b) and the target point's x-coordinate.

```typescript
(
      kb: Array<number>,
      targetCoordinate: {
         x: number
         y: number
      }
   ) => number
```

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

### Custom Indicator Creation

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/instance/createIndicator.md

Shows how to create a custom indicator by providing a detailed configuration object.

```javascript
import CreateIndicatorExtension from '../../../@views/api/samples/custom-indicator-basic/index.vue'
```

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

### Get Y-coordinate on a Line

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/utils.md

Determines the y-coordinate of a point on a line, given two other points defining the line and the target point's x-coordinate.

```typescript
(
     coordinate1: {
         x: number
         y: number
      },
      coordinate2: {
         x: number
         y: number
      },
      targetCoordinate: {
         x: number
         y: number
      }
   ) => number
```

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

### Get Supported Hotkeys

Source: https://github.com/klinecharts/klinechart/blob/main/docs/en-US/api/chart/getSupportedHotkeys.md

Use the getSupportedHotkeys method to retrieve an array of strings, where each string represents a supported hotkey. This method does not require any parameters.

```javascript
import React from 'react'
import { Klinecharts} from 'klinecharts'

export default class GetSupportedHotkeys extends React.Component {
  componentDidMount () {
    this.kLineChart = klinecharts.init(this.chartContainer)
    this.kLineChart.applyNewTheme({
      grid: {
        show: false
      }
    })
    this.kLineChart.createPolygon({
      points: [
        { value: 100 },
        { value: 80 },
        { value: 90 },
        { value: 70 },
        { value: 85 }
      ]
    })
    console.log(this.kLineChart.getSupportedHotkeys())
  }

  componentWillUnmount () {
    this.kLineChart.destroy()
  }

  render () {
    return (
      <div
        ref={ref => this.chartContainer = ref}
        style={{ width: '100%', height: '400px' }}
      />
    )
  }
}
```