### Install KLineChart with npm

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

Use npm to install the KLineChart library. This is the recommended method for development.

```bash
npm install klinecharts
```

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

### Install Project Dependencies

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

Install all necessary project dependencies using pnpm. Run this command in the project's root directory.

```bash
# Run in project root
pnpm install
```

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

### Install KLineChart with pnpm

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

Install KLineChart using pnpm. This is an alternative package management option.

```bash
pnpm install klinecharts
```

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

### Install KLineChart with Bun

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

Add KLineChart to your project using the Bun package manager.

```bash
bun add klinecharts
```

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

### Check Node.js and pnpm Versions

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

Verify that Node.js and pnpm are installed and meet the project's version requirements.

```bash
node -v
pnpm -v
```

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

### Install KLineChart with Yarn

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

Use Yarn to add KLineChart to your project dependencies. This method is suitable for Yarn users.

```bash
yarn add klinecharts
```

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

### Getting and Instantiating a Figure

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

Demonstrates how to retrieve a figure class by name and instantiate it with attributes and styles for drawing on a canvas context.

```APIDOC
## Get Figure Class
```javascript
// Get the figure class
// name is the name of the figure, such as 'arc', 'circle', etc.
const Figure = klinecharts.getFigureClass(name)
```

## Instantiate and Draw Figure
```javascript
// instantiate and draw
// attrs attribute
// styles styles
// ctx canvas context
new Figure({ attrs, styles }).draw(ctx)
```
```

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

### KLineData Structure Example

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

Defines the required format for historical and real-time data. Ensure all fields are numeric types, with `timestamp` in milliseconds.

```typescript
{
  // Timestamp in milliseconds, required field
  timestamp: number
  // Open price, required field
  open: number
  // Close price, required field
  close: number
  // High price, required field
  high: number
  // Low price, required field
  low: number
  // Volume, optional field
  volume: number
  // Turnover, optional field. Required if you need to display 'EMV' and 'AVP'
  turnover: number
}
```

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

### Create a Time-Sharing Chart with Area Style

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

Use `setStyles` to configure the chart's appearance. This example sets the candle type to 'area' for a time-sharing chart.

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

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

### Get and Instantiate Figure Class

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

Obtain a Figure class by its name and then instantiate it with attributes and styles for drawing. Requires a canvas context to be present.

```javascript
// Get the figure class
// name is the name of the figure, such as 'arc', 'circle', etc.
const Figure = klinecharts.getFigureClass(name)
// instantiate and draw
// attrs attribute
// styles styles
// ctx canvas context
new Figure({ attrs, styles }).draw(ctx)
```

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

### Get Supported Indicators

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

Imports and logs all supported technical indicators available in the current version of klinecharts. This is useful for inspecting available indicators.

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

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

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

### Register a Custom Overlay

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

Register a custom overlay with a unique name. Configure drawing steps, magnet modes, and default figures. This is the starting point for creating custom overlays.

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

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

### Data Field Mapping Example

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

Normalizes backend data fields to the `KLineData` structure. Converts timestamp to milliseconds and string prices to numbers.

```typescript
function normalizeToKLineData(data: any) {
  return {
    timestamp: data.t * 1000,
    open: Number(data.o),
    high: Number(data.h),
    low: Number(data.l),
    close: Number(data.c),
    volume: Number(data.v),
  }
}
```

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

### Register a Custom Technical Indicator

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

Provides a minimal example of registering a custom technical indicator named 'CUSTOM_MID'. This involves defining its name, series type, calculation parameters, figures, and the calculation logic.

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

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

### Initialize Klinecharts with SolidJS

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

Integrates Klinecharts into a SolidJS component using `onMount` for initialization and `onCleanup` for disposal.

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

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

### Initialize Klinecharts and Load Data

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

This HTML snippet shows how to include the Klinecharts library and initialize a chart with sample data. It sets up the chart container, configures the symbol and period, and defines a data loader to fetch historical bars.

```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 Code Linting and Build

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

Execute these commands to ensure code quality and build the project. Run `pnpm run docs:build` if documentation changes were made, then restart `pnpm run docs:dev`.

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

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

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

### Initialize Klinecharts with Plain JavaScript

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

Basic initialization of Klinecharts in a web page. Ensure the 'klinecharts' library is imported.

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

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

// Dispose chart when component is destroyed
// dispose('chart')
```

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

### Initialize Klinecharts with Svelte

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

Integrates Klinecharts into a Svelte component using `onMount` for initialization and `onDestroy` for cleanup.

```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 },

```

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

### Command Quick Reference for KLineChart

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

A quick reference for common commands used in the KLineChart project, including linting, cleaning, building different bundles, and running the docs site.

```bash
pnpm run code-lint: lint source code.
pnpm run clean: clean `dist`.
pnpm run build-esm: build ESM bundle.
pnpm run build-cjs: build CommonJS bundle.
pnpm run build-umd:dev: build UMD dev bundle.
pnpm run build-umd:prod: build UMD prod bundle.
pnpm run build-umd: build both UMD dev/prod bundles.
pnpm run build-core: build ESM + CJS + UMD.
pnpm run build-dts: generate `d.ts`.
pnpm run build: full build (clean + core + dts).
pnpm run docs:dev: run docs site locally.
pnpm run docs:build: build docs site.
```

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

### Configure Default Full Styles

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

Set up the complete default styling for Klinecharts. This includes detailed configurations for grid lines, candle appearance (solid, stroke, OHLC, area), and price markers.

```javascript
const styles = {
  grid: {
    show: true,
    horizontal: {
      show: true,
      size: 1,
      color: '#EDEDED',
      style: 'dashed',
      dashedValue: [2, 2]
    },
    vertical: {
      show: true,
      size: 1,
      color: '#EDEDED',
      style: 'dashed',
      dashedValue: [2, 2]
    }
  },
  candle: {
    // 'candle_solid' | 'candle_stroke' | 'candle_up_stroke' | 'candle_down_stroke' | 'ohlc' | 'area'
    type: 'candle_solid',
    bar: {
      // 'current_open' | 'previous_close'
      compareRule: 'current_open',
      upColor: '#2DC08E',
      downColor: '#F92855',
      noChangeColor: '#888888',
      upBorderColor: '#2DC08E',
      downBorderColor: '#F92855',
      noChangeBorderColor: '#888888',
      upWickColor: '#2DC08E',
      downWickColor: '#F92855',
      noChangeWickColor: '#888888'
    },
    area: {
      lineSize: 2,
      lineColor: '#2196F3',
      smooth: false,
      value: 'close',
      backgroundColor: [{
        offset: 0,
        color: 'rgba(33, 150, 243, 0.01)'
      }, {
        offset: 1,
        color: 'rgba(33, 150, 243, 0.2)'
      }],
      point: {
        show: true,
        color: blue,
        radius: 4,
        rippleColor: getAlphaBlue(0.3),
        rippleRadius: 8,
        animation: true,
        animationDuration: 1000
      }
    },
    priceMark: {
      show: true,
      high: {
        show: true,
        color: '#D9D9D9',
        textMargin: 5,
        textSize: 10,
        textFamily: 'Helvetica Neue',
        textWeight: 'normal'
      },
      low: {
        show: true,
        color: '#D9D9D9',
        textMargin: 5,
        textSize: 10,
        textFamily: 'Helvetica Neue',
        textWeight: 'normal'
      },
      last: {
        show: true,
        // 'current_open' | 'previous_close'
        compareRule: 'current_open',
        upColor: '#2DC08E',
        downColor: '#F92855',
        noChangeColor: '#888888',
        line: {
          show: true,
          // 'solid' | 'dashed'
          style: 'dashed',
          dashedValue: [4, 4],
          size: 1
        },
        text: {
          show: true,
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          size: 12,
          paddingLeft: 4,
          paddingTop: 4,
          paddingRight: 4,
          paddingBottom: 4,
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderSize: 0,
          borderColor: 'transparent',
          borderDashedValue: [2, 2],
          color: '#FFFFFF',
          family: 'Helvetica Neue',
          weight: 'normal',
          borderRadius: 2
        }
        // e.g.
        // [{
        //   show: true,
        //   style: 'fill', // 'fill' | 'stroke' | 'stroke_fill'
        //   position: 'above_price', // 'above_price' | 'below_price'
        //   updateInterval: 0,
        //   size: 12,
        //   paddingLeft: 4,
        //   paddingTop: 4,
        //   paddingRight: 4,
        //   paddingBottom: 4,
        //   borderStyle: 'solid', // 'solid' | 'dashed'
        //   borderSize: 0,
        //   borderColor: 'transparent',
        //   borderDashedValue: [2, 2],
        //   color: '#FFFFFF',
        //   family: 'Helvetica Neue',
        //   weight: 'normal',
        //   borderRadius: 2
        // }]
        extendTexts: []
      }
    },
    tooltip: {
      offsetLeft: 4,
      offsetTop: 6,
      offsetRight: 4,
      offsetBottom: 6,
      // 'always' | 'follow_cross' | 'none'
      showRule: 'always',
      // 'standard' | 'rect'
      showType: 'standard',
      rect: {
        // 'fixed' | 'pointer'
        position: 'fixed',
        paddingLeft: 4,
        paddingRight: 4,
        paddingTop: 4,
        paddingBottom: 4,
        offsetLeft: 4,
        offsetTop: 4,
        offsetRight: 4,
        offsetBottom: 4,
        borderRadius: 4,
        borderSize: 1,
        borderColor: '#f2f3f5',
        color: '#FEFEFE'
      },
      title: {
        show: true,
        size: 14,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: Color.GREY,
        marginLeft: 8,
        marginTop: 4,
        marginRight: 8,
        marginBottom: 4,
        template: '{ticker} · {period}'
      },
      legend: {
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: '#76808F',
        marginLeft: 8,
        marginTop: 4,
        marginRight: 8,
        marginBottom: 4,
        defaultValue: 'n/a',
        // e.g.
        // [{ title: 'time', value: '{time}' }, { title: 'close', value: '{close}' }]
        // [{ title: { text: 'time', color: '#fff' }, value: { text: '{time}', color: '#fff' } }, { title: 'close', value: '{close}' }]
        template: [
          { title: 'time', value: '{time}' },
          { title: 'open', value: '{open}' },
          { title: 'high', value: '{high}' },
          { title: 'low', value: '{low}' },
          { title: 'close', value: '{close}' },
        ]
      }
    }
  }
}
```

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

### Configure DataLoader for History and Real-time Data

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

Implement `setDataLoader` to fetch historical bars using `getBars` and manage real-time data subscriptions with `subscribeBar` and `unsubscribeBar`. Ensure `getBars` correctly calls the callback with data and pagination info. `subscribeBar` should establish a WebSocket connection and store a cleanup function.

```javascript
chart.setDataLoader({
  async getBars({ type, timestamp, symbol, period, callback }) {
    const response = await api.getKlineList({
      symbol: symbol.ticker,
      period: `${period.span}${period.type}`,
      endTime: timestamp ?? Date.now(),
      limit: 500,
      direction: type,
    })

    const bars = response.list
      .map(normalizeToKLineData)
      .sort((a, b) => a.timestamp - b.timestamp)

    callback(bars, {
      forward: response.hasMoreBefore,
      backward: response.hasMoreAfter,
    })
  },

  subscribeBar({ symbol, period, callback }) {
    const key = makeKey(symbol, period)
    const ws = createWsConnection(symbol.ticker, period)

    ws.onmessage = (message) => {
      const bar = normalizeToKLineData(JSON.parse(message.data))
      callback(bar)
    }

    stopMap.set(key, () => ws.close())
  },

  unsubscribeBar({ symbol, period }) {
    const key = makeKey(symbol, period)
    stopMap.get(key)?.()
    stopMap.delete(key)
  },
})
```

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

### Initialize Klinecharts in Angular

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

Implement AfterViewInit and OnDestroy lifecycle hooks for chart initialization and cleanup. Set the symbol, period, and provide data using a custom data loader.

```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.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 }
```

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

### Initialize Klinecharts with Preact

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

Integrates Klinecharts into a Preact component using `useEffect` for initialization and cleanup.

```jsx
import { useEffect } from 'preact/hooks'
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 }}/>
}
```

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

### Initialize Klinecharts in Vue

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

Utilize onMounted and onUnmounted hooks for chart initialization and disposal. Configure the chart with symbol and period, and provide data via a custom data loader.

```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>

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

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

### Initialize Klinecharts in React

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

Use the useEffect hook to initialize the chart on component mount and dispose of it on unmount. Configure the chart with a symbol and period, and provide data using a custom data loader.

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

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

### Run Baseline Code Checks

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

Execute code linting and build processes to ensure code quality and check for build errors.

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

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

### Configure Vite Alias for Local Development

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

Configure Vite to alias the 'klinecharts' import to your local source code path for real-time debugging within your application project.

```typescript
import { defineConfig } from 'vite'
import { resolve } from 'node:path'

export default defineConfig({
  resolve: {
    alias: {
      klinecharts: resolve('/your-local-path/KLineChart/src/index.ts')
    }
  }
})
```

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

### Rebuild UMD Bundle for Docs Site

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

After making changes to the core source code, rebuild the UMD bundle to ensure the docs site reflects the latest changes.

```bash
# After each core code change
pnpm run build-umd:prod

# Start docs site
pnpm run docs:dev
```

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

### Configure Indicator Line Styles

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

Define the style, smoothness, size, dashed value, and color for multiple indicator lines. Supports solid or dashed lines.

```javascript
lines: [
      {
        // 'solid' | 'dashed'
        style: 'solid',
        smooth: false,
        size: 1,
        dashedValue: [2, 2],
        color: '#FF9600'
      }, {
        style: 'solid',
        smooth: false,
        size: 1,
        dashedValue: [2, 2],
        color: '#935EBD'
      }, {
        style: 'solid',
        smooth: false,
        size: 1,
        dashedValue: [2, 2],
        color: '#2196F3'
      }, {
        style: 'solid',
        smooth: false,
        size: 1,
        dashedValue: [2, 2],
        color: '#E11D74'
      }, {
        style: 'solid',
        smooth: false,
        size: 1,
        dashedValue: [2, 2],
        color: '#01C5C4'
      }
    ],
```

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

### Configure Tooltip Display Rules

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

Set the display rules for tooltips, including offsets, show rule ('always', 'follow_cross', 'none'), and show type ('standard', 'rect').

```javascript
tooltip: {
      offsetLeft: 4,
      offsetTop: 6,
      offsetRight: 4,
      offsetBottom: 6,
      // 'always' | 'follow_cross' | 'none'
      showRule: 'always',
      // 'standard' | 'rect'
      showType: 'standard',
      title: {
        show: true,
        showName: true,
        showParams: true,
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: '#76808F',
        marginLeft: 8,
        marginTop: 4,
        marginRight: 8,
        marginBottom: 4
      },
      legend: {
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: '#76808F',
        marginLeft: 8,
        marginTop: 4,
        marginRight: 8,
        marginBottom: 4,
        defaultValue: 'n/a'
      },
      // e.g.
      // [{
      //    id: 'icon_id',
      //    position: 'left', // 'left' | 'middle' | 'right'
      //    marginLeft: 8,
      //    marginTop: 6,
      //    marginRight: 0,
      //    marginBottom: 0,
      //    paddingLeft: 1,
      //    paddingTop: 1,
      //    paddingRight: 1,
      //    paddingBottom: 1,
      //    size: 12,
      //    color: '#76808F',
      //    activeColor: '#76808F',
      //    backgroundColor: 'rgba(33, 150, 243, 0.2)',
      //    activeBackgroundColor: 'rgba(33, 150, 243, 0.4)',
      //    type: 'path', // 'path', 'icon_font'
      //    content: {
      //      style: 'stroke', // 'stroke', 'fill'

```

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

### Default Full Configuration for Klinecharts

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

This snippet shows the default full configuration object for Klinecharts. It includes settings for features, x-axis, y-axis, separators, crosshairs, and overlays. Use this as a base for custom configurations.

```javascript
{
  //      path: 'M6.81029,6.02908L11.7878,1.02746C12.0193,0.79483,12.0193,0.445881,11.7878,0.213247C11.5563,-0.019386,11.209,-0.019386,10.9775,0.213247L6,5.21486L1.02251,0.174475C0.790997,-0.0581583,0.44373,-0.0581583,0.212219,0.174475C-0.0192925,0.407108,-0.0192925,0.756058,0.212219,0.988691L5.18971,6.02908L0.173633,11.0307C-0.0578778,11.2633,-0.0578778,11.6123,0.173633,11.8449C0.289389,11.9612,0.44373,12,0.598071,12C0.752411,12,0.906752,11.9612,1.02251,11.8449L6,6.8433L10.9775,11.8449C11.0932,11.9612,11.2476,12,11.4019,12C11.5563,12,11.7106,11.9612,11.8264,11.8449C12.0579,11.6123,12.0579,11.2633,11.8264,11.0307L6.81029,6.02908Z',
  //      lineWidth: 1,
  //    }
  // }]
  features: []
}

```

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

### Create and Overlay Technical Indicators

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

Demonstrates how to create a technical indicator in a separate pane or overlay it on the candle pane. Use 'chart.createIndicator' for this purpose.

```typescript
chart.createIndicator('VOL')

chart.createIndicator('MA', true, { id: 'candle_pane' })
```

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

### Overlay Line Configuration for Klinecharts

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

Configures the style for lines in overlays within Klinecharts. Options include line style (solid/dashed), smoothness, color, size, and dashed value.

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

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

### Include KLineChart via CDN

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

Include the KLineChart library directly in your HTML using a CDN link. This makes the klinecharts global variable available.

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

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

### getBars More Parameter Object

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

How to use an object for the `more` parameter to control forward and backward pagination separately.

```typescript
callback(bars, { forward: true })
```

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

### getBars Callback Parameters

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

Details on the `callback` parameters for `getBars`, including the data array and pagination information.

```typescript
callback(data, more)
```

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

### X-Axis Configuration for Klinecharts

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

Configures the appearance and behavior of the X-axis in Klinecharts. Includes settings for visibility, size, axis line, tick text, and tick lines.

```javascript
{
  show: true,
  size: 'auto',
  axisLine: {
    show: true,
    color: '#888888',
    size: 1
  },
  tickText: {
    show: true,
    color: '#D9D9D9',
    family: 'Helvetica Neue',
    weight: 'normal',
    size: 12,
    marginStart: 4,
    marginEnd: 4
  },
  tickLine: {
    show: true,
    size: 1,
    length: 3,
    color: '#888888'
  }
}
```