init(ds, options?)

init used to initialize a chart.

Tip: 

When calling, you need to wait until the container is ready.

Reference

(
  ds: string | HTMLElement,
  options?: {
    layout?: Array<{
      type: 'candle' | 'indicator' | 'xAxis'
      content?: Array<Indicator | string>
      options?: {
        id?: string
        height?: number
        minHeight?: number
        dragEnabled?: boolean
        order?: number
        state?: 'normal' | 'maximize' | 'minimize'
        axis?: {
          name?: string
          reverse?: boolean
          inside?: boolean
          position?: 'left' | 'right'
          scrollZoomEnabled?: boolean
          gap?: {
            top?: number
            bottom?: number
          }
          createRange?: (params: object) => ({
            from: number
            to: number
            range: number
            realFrom: number
            realTo: number
            realRange: number
            displayFrom: number
            displayTo: number
            displayRange: number
          })
          createTicks?: (params: object) => Array<{
            coord: number
            value: number | string
            text: string
          }>
        }
      }
    }>
    locale?: string
    styles?: string | Styles
    timezone?: string
    formatter?: {
      formatDate?: (params: {
        dateTimeFormat: Intl.DateTimeFormat
        timestamp: number
        template: string
        type: 'tooltip' | 'crosshair' | 'xAxis'
      }) => string
      formatBigNumber?: (value: string | number) => string
    }
    thousandsSeparator?: {
      sign?: string
      format: (value: number | string) => string
    }
    decimalFold?: {
      threshold?: number
      format?: (value: number | string) => string
    }
  }
) => Chart

Parameters

• ds Container, which can be a DOM element or an element id.
• options Optional configuration item.
  • layout Custom layout, an array.
    • type Pane type, supports candle , indicator and xAxis .
    • content Pane content, only supports indicators.
    • options Pane configuration.
      • id Pane id.
      • height Height.
      • minHeight Min height.
      • dragEnabled Whether the height can be adjusted by dragging.
      • order Order.
      • state State, supports normal , maximize and minimize .
      • axis Axis configuration.
        • name The name of the axis.
        • reverse Whether to reverse.
        • inside Whether it is inside.
        • position Position, supports left and right.
        • scrollZoomEnabled Whether to allow scrolling and zooming.
        • gap Top and bottom margin configuration.
          • top Top margin.
          • bottom Bottom margin.
        • createRange Create an axis value range callback method.
        • createTicks Create ticks information callback method.
  • locale Locale, with built-in support for zh-CN and en-US .
  • timezone Timezone name, such as Asia/Shanghai . If not set, the local time zone will be automatically obtained. For a list of time zone names, please refer to the Timezone List .
  • styles It can be a style name registered by klinecharts.registerStyles or Styles . For details about Styles , see Styles. Incremental values ​​are supported.
  • formatter Some format APIs.
    • formatDate Formats a date.
    • formatBigNumber Format big numbers, such as 1000 is converted to 1k, 1000000 is converted to 1M, etc.
  • thousandsSeparator Thousand separator configuration.
    • sign Sign.
    • format Custom formatting method.
  • decimalFold Decimal 0 folds the configuration.
    • threshold Fold threshold.
    • format Custom formatting method.

Returns

init returns an object Chart。

Usage

Basic usage

Custom Layout

Built-in locales

Custom extension locale

Set the timezone

Built-in style templates

Custom style templates

Style override

Custom time display

Custom big decimal display

Do not display thousands separators

Custom the display of thousands separators

Decimal 0 is not folded

Decimal 0 fold custom display