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?: {
      barSpaceLimit?: {
        min?: number
        max?: number
      }
      pane?: {
        height?: number
        minHeight?: number
        dragEnabled?: boolean
        order?: number
        state?: 'normal' | 'maximize' | 'minimize'
      }
      yAxis?: {
        reverse?: boolean
        inside?: boolean
        needWidget?: boolean
        position?: 'left' | 'right'
        scrollZoomEnabled?: boolean
        gap?: {
          top?: number
          bottom?: number
        }
      }
    }
    locale?: string
    styles?: string | DeepPartial<Styles>
    timezone?: string
    formatter?: {
      formatDate?: (params: {
        dateTimeFormat: Intl.DateTimeFormat
        timestamp: number
        template: string
        type: 'tooltip' | 'crosshair' | 'xAxis'
      }) => string
      formatBigNumber?: (value: string | number) => string
      formatExtendText?: (params: {
        type: 'last_price'
        data: KLineData
        index: number
      }) => string
    }
    thousandsSeparator?: {
      sign?: string
      format: (value: number | string) => string
    }
    decimalFold?: {
      threshold?: number
      format?: (value: number | string) => string
    }
    zoomAnchor?: 'cursor' | 'last_bar' | { main?: 'cursor' | 'last_bar', xAxis?: 'cursor' | 'last_bar' }
    hotkey?: {
      enabled?: boolean
      exclude?: string[]
    }
  }
) => Chart

Parameters

• ds Container, which can be a DOM element or an element id.
• options Optional configuration item.
  • layout Custom layout configuration.
    • barSpaceLimit Bar space limit.
      • min Minimum bar space.
      • max Maximum bar space.
    • pane Default pane configuration.
      • height Height.
      • minHeight Min height.
      • dragEnabled Whether the height can be adjusted by dragging.
      • order Order.
      • state State, supports normal , maximize and minimize .
    • yAxis Default y-axis configuration.
      • reverse Whether to reverse.
      • inside Whether it is inside.
      • needWidget Whether to create an axis widget.
      • position Position, supports left and right.
      • scrollZoomEnabled Whether to allow scrolling and zooming on the Y-axis.
      • gap Top and bottom margin configuration.
        • top Top margin.
        • bottom Bottom margin.
  • 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.
    • formatExtendText Format extended text.
  • thousandsSeparator Thousand separator configuration.
    • sign Sign.
    • format Custom formatting method.
  • decimalFold Decimal 0 folds the configuration.
    • threshold Fold threshold.
    • format Custom formatting method.
  • zoomAnchor Zoom anchor position. It can be last_bar , cursor , or an object { main, xAxis } for main chart and x-axis separately.
  • hotkey Hot key configuration.
    • enabled Whether hot keys are enabled.
    • exclude Global hot key names to exclude.

Returns

init returns an object Chart。

Usage

Basic usage

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

Set the zoom anchor position when zooming the chart to 'last_bar'