KLineChart

https://klinecharts.com/guide/
Admin
KLineChart is a professional, lightweight financial charting library for web frontend that...
Tokens:10,707
Snippets:108
Trust Score:6.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install KLineChart with bun

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

Use bun to install KLineChart. This is a fast, all-in-one JavaScript runtime.

```bash
bun add klinecharts
```

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

### Install KLineChart with npm

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

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

```bash
npm install klinecharts
```

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

### Install KLineChart with yarn

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

Use yarn to install KLineChart. This is an alternative package manager for development and production.

```bash
yarn add klinecharts
```

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

### Install KLineChart with pnpm

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

Use pnpm to install KLineChart. This is another package manager option for development and production.

```bash
pnpm install klinecharts
```

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

### Data Field Mapping Example

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

Example of how to map custom backend data fields to the required KLineData structure.

```APIDOC
## Data Field Mapping Example

If your backend data fields differ from `KLineData`, you need to map them.

**Backend Data Example:**
```json
{
  "t": 1711425600,
  "o": "68000.1",
  "h": "68920.5",
  "l": "67500.2",
  "c": "68610.8",
  "v": "1234.56"
}
```

**Mapping Function:**
```typescript
function normalizeToKLineData(data: any): KLineData {
  return {
    timestamp: data.t * 1000, // Convert seconds to milliseconds
    open: Number(data.o),
    high: Number(data.h),
    low: Number(data.l),
    close: Number(data.c),
    volume: Number(data.v),
  };
}
```

If your API returns an array of data, it's recommended to apply this mapping function using `.map()` before passing it to the chart's callback.
```

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

### Data Field Mapping Example

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

Provides a function to map custom backend data fields to the `KLineData` structure. This is useful when your API response fields do not match the chart's expected format.

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

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

### Get Supported Indicators

Source: https://klinecharts.com/guide/indicator

If you are unsure about which indicators are supported in your current version, you can retrieve a list of all supported indicators using `getSupportedIndicators`.

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

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

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

### Register Custom Locale for Klinecharts

Source: https://klinecharts.com/guide/i18n

Use `klinecharts.registerLocale` to add a new language pack. This example registers Traditional Chinese for Hong Kong.

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

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

### GET klinecharts.getFigureClass

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

Retrieves the class definition for a specific built-in figure by name.

```APIDOC
## GET klinecharts.getFigureClass(name)

### Description
Retrieves the class constructor for a built-in figure type.

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the figure (e.g., 'arc', 'circle', 'line', 'polygon', 'rect', 'text', 'path').

### Request Example
```javascript
const Figure = klinecharts.getFigureClass('circle');
```
```

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

### 设置 Node.js 和包管理器

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

在开始本地开发前，请确保你的环境已正确配置 Node.js 和 pnpm。此命令用于切换 Node.js 版本并启用 Corepack。

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

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

### 构建文档站

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

如果同时修改了文档内容，建议在提交前执行此命令来构建文档站，确保其正确性。

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

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

### 安装项目依赖

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

在项目根目录执行此命令以安装所有必需的开发依赖。

```bash
pnpm install
```

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

### 构建 UMD 生产包和启动文档站

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

在启动文档站进行调试前，需要先构建 UMD 生产包。此命令组合了构建和启动文档站开发服务器的步骤。

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

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

### 启动内置调试页

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

使用此命令启动一个内置的调试页面，该页面直接引用 `src/index.ts`，无需预先构建 `dist` 目录。

```bash
pnpm run debug
```

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

### 运行基础代码检查和构建

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

在安装依赖后，运行这些命令来执行代码风格检查、TypeScript 类型检查和项目构建。

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

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

### Create a Simple Annotation Overlay

Source: https://klinecharts.com/guide/faq

Use the `createOverlay` API with the `simpleAnnotation` name to mark specific points on the chart, such as buy or sell points.

```javascript
createOverlay({ name: 'simpleAnnotation', ... })
```

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

### 配置 Vite 工程进行本地联调

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

在 Vite 项目中，通过配置 `vite.config.ts` 将 `klinecharts` 模块映射到本地源码路径，以便进行持续开发和真实场景验证。

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

export default defineConfig({
  resolve: {
    alias: {
      klinecharts: resolve('/你的本地路径/KLineChart/src/index.ts')
    }
  }
})
```

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

### Implementing `subscribeBar` for Real-time Data

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

Details on implementing the `subscribeBar` function to receive and process real-time single data points.

```APIDOC
## `subscribeBar` - Subscribing to Real-time Single Data Updates

`subscribeBar` is called after the initial `getBars` call completes, allowing for real-time data updates.

### Function Signature
```typescript
subscribeBar: ({ symbol, period, callback }: DataLoaderSubscribeBarParams) => void;
```

### Parameters
- **`symbol`**: The trading pair.
- **`period`**: The time period.
- **`callback(data: KLineData)`**: A function to call when a new real-time data point is received. The data must be formatted as a single `KLineData` object.

### Real-time Data Merging Logic
When a real-time data point is received:
- If `data.timestamp` is greater than the last bar's timestamp: Append the new data as the last bar.
- If `data.timestamp` is the same as the last bar's timestamp: Overwrite the last bar with the new data.
- If `data.timestamp` is smaller than the last bar's timestamp: Ignore the data as it's considered old.

**Important:**
- Push only one data point at a time.
- Ensure `data.timestamp` is in milliseconds.
- The data pushed should represent the current period's bar.
```

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

### Instantiate and Draw a Figure

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

Use klinecharts.getFigureClass to retrieve a figure class, then instantiate it with attributes and styles to draw on the canvas context.

```javascript
// 获取基础图形实例
// name为基础图形名字，如，'arc', 'circle'等。
const Figure = klinecharts.getFigureClass(name)
// 实例化并绘制
// attrs 属性
// styles 样式
// ctx 画布上下文
new Figure({ attrs, styles }).draw(ctx)
```

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

### Implementing `unsubscribeBar`

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

Details on implementing the `unsubscribeBar` function to stop real-time data subscriptions when the chart is reset or disposed.

```APIDOC
## `unsubscribeBar` - Stopping Real-time Subscriptions

`unsubscribeBar` is triggered when the chart is reset (e.g., `setSymbol`, `setPeriod`, `resetData`) or disposed.

### Best Practice
1. Maintain a map or registry on your data loader side to store subscription handles or cleanup functions.
2. In `subscribeBar`, establish the subscription and store its corresponding cleanup function.
3. In `unsubscribeBar`, retrieve the cleanup function for the relevant subscription and stop the data push.
```

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

### Include KLineChart via CDN

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

Include KLineChart using a script tag from a CDN. This makes the library available globally as the `klinecharts` variable.

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

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

### Implementing `getBars` for Historical Data

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

Details on implementing the `getBars` function within `setDataLoader` to fetch historical data, including pagination and different data request types.

```APIDOC
## `getBars` - Fetching Historical Data (with Pagination)

The `getBars` function is responsible for fetching historical data when needed by the chart, including handling pagination.

### Function Signature
```typescript
getBars: ({
  type,          // Type of data request: 'init', 'forward', 'backward'
  timestamp,     // Timestamp for pagination (null for 'init')
  symbol,        // Trading pair
  period,        // Time period
  callback       // Callback function to return data
}: DataLoaderGetBarsParams) => void | Promise<void>;
```

### Parameters
- **`type`**: 
  - `init`: Initial data load or after switching symbol/period. `timestamp` is `null`.
  - `forward`: Load older data (triggered by scrolling left).
  - `backward`: Load newer data (triggered by scrolling right).
- **`timestamp`**: 
  - For `forward`: Typically the timestamp of the leftmost bar.
  - For `backward`: Typically the timestamp of the rightmost bar.
  - For `init`: `null`.
- **`callback(data: KLineData[], more: boolean | { forward?: boolean, backward?: boolean })`**: 
  - `data`: An array of `KLineData` objects.
  - `more`: Indicates if more data is available in the specified direction. Can be a boolean or an object `{ forward?: boolean, backward?: boolean }`.

### `more` Parameter Explanation
`more` indicates whether there's more data available in a direction, not the amount of data returned in the current call.
- `callback(bars, { forward: true })`: More older data is available.
- `callback(bars, { forward: false })`: No more older data.
- `callback(bars, false)`: If `forward` and `backward` availability is the same.

A common approach is to return `false` for a direction if the number of returned bars is less than the requested page size, or if the backend explicitly indicates no more data.

### Data Merging Logic
- `type: 'init'`: Replaces existing data with the new array.
- `type: 'forward'`: Prepends new data to the beginning of the array.
- `type: 'backward'`: Appends new data to the end of the array.

### Implementation Suggestions
- Ensure data is sorted before returning.
- Avoid returning duplicate timestamps.
- Handle API errors gracefully.
- If multiple requests are in progress, prioritize the latest one for the current symbol/period.
```

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

### POST Figure.draw

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

Instantiates and renders a figure onto the canvas context.

```APIDOC
## POST Figure.draw

### Description
Instantiates a figure with specific attributes and styles, then draws it onto the provided canvas context.

### Request Body
- **attrs** (object) - Required - The geometric attributes of the figure.
- **styles** (object) - Optional - The visual styling properties.
- **ctx** (CanvasRenderingContext2D) - Required - The canvas context to draw on.

### Request Example
```javascript
new Figure({ attrs, styles }).draw(ctx);
```
```

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

### Implement Data Loader with REST and WebSocket

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

Configures the chart data loader to fetch historical bars via REST and subscribe to real-time updates using WebSockets.

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

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

### getBars Callback Signature

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

Illustrates the parameters for the `callback` function within `getBars`. It expects an array of `KLineData` and a `more` flag to indicate if further data is available.

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

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

### Data Integration Core Functions

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

The core of data integration relies on three main functions: setSymbol, setPeriod, and setDataLoader. setDataLoader itself takes three functions: getBars for historical data, subscribeBar for real-time updates, and unsubscribeBar for stopping subscriptions.

```APIDOC
## Core Data Integration Functions

### `setSymbol(symbol: string)`
Sets the trading pair for the chart.

### `setPeriod(period: string)`
Sets the time period for the chart.

### `setDataLoader(dataLoader: DataLoader)`
Sets the data loader object, which contains functions for fetching historical and real-time data.

#### `DataLoader` Object Structure
```typescript
interface DataLoader {
  getBars: (params: DataLoaderGetBarsParams) => void | Promise<void>;
  subscribeBar: (params: DataLoaderSubscribeBarParams) => void;
  unsubscribeBar: (params: DataLoaderUnsubscribeBarParams) => void;
}
```
```

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

### Set Symbol with Price and Volume Precision

Source: https://klinecharts.com/guide/faq

When setting a trading pair, specify `pricePrecision` and `volumePrecision` to ensure accurate display of candle data. This is crucial for preventing issues where candle data appears as a single line.

```javascript
setSymbol({ ticker: 'TestSymbol', pricePrecision: 6, volumePrecision: 6 })
```

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

### Create Built-in Indicators

Source: https://klinecharts.com/guide/indicator

Use `chart.createIndicator` to add built-in technical indicators. You can create them in a separate window or stack them onto the candle chart pane.

```typescript
// Create an independent window indicator
chart.createIndicator('VOL')
```

```typescript
// Stack the indicator onto the candle chart window
chart.createIndicator('MA', { pane: { id: 'candle_pane' }, isStack: true })
```

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

### Switch Locale in Klinecharts

Source: https://klinecharts.com/guide/i18n

After registering a locale, use the `init` API with the `locale` option or the `setLocale` method to switch the chart's language.

```javascript
klinecharts.init(options)
klinecharts.setLocale(key)
```

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

### Set Candle Chart to Area Style

Source: https://klinecharts.com/guide/faq

Use the `setStyles` method to change the candle chart to an area style. This is useful for visualizing price trends differently.

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

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

### SubscribeBar Callback Signature

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

Shows the signature for the `callback` function within `subscribeBar`. It receives a single `KLineData` object representing the latest data point.

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

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

### POST klinecharts.registerFigure

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

Registers a custom figure globally for use within the chart.

```APIDOC
## POST klinecharts.registerFigure

### Description
Registers a custom figure definition globally, allowing it to be used in the same manner as built-in figures.

### Request Body
- **figure** (object) - Required - The custom figure definition object.

### Request Example
```javascript
klinecharts.registerFigure(customFigure);
```
```

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

### DataLoader Interface Definition

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

Defines the signature for the `getBars` function within the `setDataLoader` configuration. This function is responsible for fetching historical data, including pagination.

```typescript
getBars: ({
  type,
  timestamp,
  symbol,
  period,
  callback
}: DataLoaderGetBarsParams) => void | Promise<void>
```

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

### KLineData Structure

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

The structure required for historical and real-time data points that the chart accepts. All necessary fields must be numbers.

```APIDOC
## KLineData Data Structure

This is the required format for data points used by the chart.

```typescript
interface KLineData {
  // Timestamp in milliseconds, required
  timestamp: number;
  // Opening price, required
  open: number;
  // Closing price, required
  close: number;
  // Highest price, required
  high: number;
  // Lowest price, required
  low: number;
  // Volume, optional
  volume?: number;
  // Turnover, optional (required for EMV and AVP indicators)
  turnover?: number;
}
```

**Important Notes:**
- `timestamp` must be a millisecond-level timestamp.
- `timestamp`, `open`, `close`, `high`, `low`, `volume`, `turnover` must be of type number.
```

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

### Define Path Figure

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

Configuration structure for the path shape using SVG path commands.

```typescript
new ({
  attrs: {
    // path 左上角偏移 x（应用到绝对命令坐标）
    x: number
    // path 左上角偏移 y（应用到绝对命令坐标）
    y: number
    // 命中区域宽度（用于事件检测）
    width: number
    // 命中区域高度（用于事件检测）
    height: number
    // SVG path 字符串，支持 M/L/H/V/C/S/Q/T/A/Z 及小写相对命令
    path: string
  },
  styles: {
    // 样式，可选项 `stroke`、`fill`
    style?: 'stroke' | 'fill'
    // 颜色
    color?: string
    // 线宽（style=stroke 时生效）
    lineWidth?: number
  }
}) => Figure
```

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

### Register a Custom Technical Indicator

Source: https://klinecharts.com/guide/indicator

Register a custom technical indicator by providing a configuration object to `registerIndicator`. This allows you to use your custom indicator like any built-in one.

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

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

### DataLoader SubscribeBar Interface

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

Defines the signature for the `subscribeBar` function within `setDataLoader`. This function is used to establish real-time data subscriptions after historical data is loaded.

```typescript
subscribeBar: ({
  symbol,
  period,
  callback
}: DataLoaderSubscribeBarParams) => void
```

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

### KLineData Structure Definition

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

Defines the required structure for historical and real-time data points. Ensure all numeric fields are of type `number` and `timestamp` is in milliseconds.

```typescript
{
  // 时间戳，毫秒级别，必要字段
  timestamp: number
  // 开盘价，必要字段
  open: number
  // 收盘价，必要字段
  close: number
  // 最高价，必要字段
  high: number
  // 最低价，必要字段
  low: number
  // 成交量，非必须字段
  volume: number
  // 成交额，非必须字段，如果需要展示技术指标 'EMV' 和 'AVP'，则需要为该字段填充数据
  turnover: number
}
```

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

### Define Polygon Figure

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

Configuration structure for the polygon shape.

```typescript
new ({
  attrs: {
    // 坐标集合
    coordinates: Array<{
      x: number
      y: number
    }>
  },
  styles: {
    // 样式，可选项`fill`，`stroke`，`stroke_fill`
    style?: 'fill' | 'stroke' | 'stroke_fill'
    // 颜色
    color?: string
    // 边框样式
    borderStyle?: 'solid' | 'dashed'
    // 边框颜色
    borderColor?: string
    // 边框尺寸
    borderSize?: number
    // 边框虚线参数
    borderDashedValue?: number[]
  }
}) => Figure
```

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

### Define Line Figure

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

Configuration structure for the line shape.

```typescript
new ({
  attrs: {
    // 坐标集合
    coordinates: Array<{
      x: number
      y: number
    }>
  },
  styles: {
    // 样式，可选项`solid`，`dashed`
    style?: 'solid' | 'dashed'
    // 平滑曲线，true 表示默认平滑；number 范围建议 0 ~ 1
    smooth?: boolean | number
    // 尺寸
    size?: number
    // 颜色
    color?: string
    // 虚线参数
    dashedValue?: number[]
  }
}) => Figure
```

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

### Define Text Figure

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

Configuration structure for the text shape.

```typescript
new ({
  attrs: {
    // 起始点x轴坐标值
    x: number
    // 起始点y轴坐标值
    y: number
    // 文字内容
    text: string
    // 指定宽
    width?: number
    // 指定高
    height?: number
    // 对齐方式
    align?: CanvasTextAlign
    // 基准
    baseline?: CanvasTextBaseline
  },
  styles: {
    // 样式，可选项`fill`，`stroke`，`stroke_fill`
    style?: 'fill' | 'stroke' | 'stroke_fill'
    // 颜色
    color?: string
    // 尺寸
    size?: number
    // 字体
    family?: string
    // 粗细
    weight?: string | number
    // 左内边距
    paddingLeft?: number
    // 右内边距
    paddingRight?: number
    // 上内边距
    paddingTop?: number
    // 下内边距
    paddingBottom?: number
    // 边框样式
    borderStyle?: 'solid' | 'dashed'
    // 边框颜色
    borderColor?: string
    // 边框尺寸
    borderSize?: number
    // 边框虚线参数
    borderDashedValue?: number[]
    // 边框圆角值
    borderRadius?: number
    // 背景色
    backgroundColor?: string | CanvasGradient
  }
}) => Figure
```

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

### Define Circle Figure

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

Configuration structure for the circle shape.

```typescript
new ({
  attrs: {
    // 圆心x轴坐标值
    x: number
    // 圆心y轴坐标值
    y: number
    // 半径
    r: number
  },
  styles: {
    // 样式，可选项`fill`，`stroke`，`stroke_fill`
    style?: 'fill' | 'stroke' | 'stroke_fill'
    // 颜色
    color?: string
    // 边框样式
    borderStyle?: 'solid' | 'dashed'
    // 边框颜色
    borderColor?: string
    // 边框尺寸
    borderSize?: number
    // 边框虚线参数
    borderDashedValue?: number[]
  }
}) => Figure
```

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

### Register Custom Diamond Figure in Klinecharts

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

Register a custom 'diamond' figure by providing its drawing logic and event checking function. This figure can then be used like built-in figures.

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

registerFigure({
  name: 'diamond',
  draw: (ctx, attrs, styles) => {
    const { x, y, width, height } = attrs
    const { color = '#1677ff' } = styles
    ctx.beginPath()
    ctx.moveTo(x, y - height / 2)
    ctx.lineTo(x + width / 2, y)
    ctx.lineTo(x, y + height / 2)
    ctx.lineTo(x - width / 2, y)
    ctx.closePath()
    ctx.fillStyle = color
    ctx.fill()
  },
  checkEventOn: (coordinate, attrs) => {
    const { x, y } = coordinate
    const { width, height } = attrs
    // 简单矩形命中（你也可以改成更精确的菱形命中）
    return (
      x >= attrs.x - width / 2 &&
      x <= attrs.x + width / 2 &&
      y >= attrs.y - height / 2 &&
      y <= attrs.y + height / 2
    )
  }
})
```

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

### Define Rect Figure

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

Configuration structure for the rectangle shape.

```typescript
new ({
  attrs: {
    // 起始点x轴坐标值
    x: number
    // 起始点y轴坐标值
    y: number
    // 宽度
    width: number
    // 高度
    height: number
  },
  styles: {
    // 样式，可选项`fill`，`stroke`，`stroke_fill`
    style?: 'fill' | 'stroke' | 'stroke_fill'
    // 颜色
    color?: string
    // 边框样式
    borderStyle?: 'solid' | 'dashed',
    // 边框颜色
    borderColor?: string
    // 边框尺寸
    borderSize?: number
    // 边框虚线参数
    borderDashedValue?: number[]
    // 边框圆角值
    borderRadius?: number
  }
}) => Figure
```

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

### Define Arc Figure

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

Configuration structure for the arc shape.

```typescript
new ({
  attrs: {
    // 圆心x轴坐标值
    x: number
    // 圆心y轴坐标值
    y: number
    // 半径
    r: number
    // 开始角度
    startAngle: number
    // 结束角度
    endAngle: number
  },
  styles: {
    // 样式，可选项`solid`，`dashed`
    style?: 'solid' | 'dashed'
    // 尺寸
    size?: number
    // 颜色
    color?: string
    // 虚线参数
    dashedValue?: number[]
  }
}) => Figure
```
Tokens:
Raw