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?: {
      basicParams?: {
        barSpaceLimitMin?: number
        barSpaceLimitMax?: number
        yAxisPosition?: 'left' | 'right'
        yAxisInside?: boolean
        paneMinHeight?: number
        paneHeight?: number
      }
      panes?: Array<{
        type: 'candle' | 'indicator' | 'xAxis'
        content?: Array<string | IndicatorCreate | {
          indicator: string | IndicatorCreate
          yAxis?: Omit<YAxisOverride, 'paneId'>
        }>
        options?: {
          id?: string
          height?: number
          minHeight?: number
          dragEnabled?: boolean
          order?: number
          state?: 'normal' | 'maximize' | 'minimize'
        }
      }>
    }
    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' }
  }
) => Chart

Parameters

• ds Container, which can be a DOM element or an element id.
• options Optional configuration item.
  • layout Custom layout configuration.
    • basicParams Basic layout parameters.
      • barSpaceLimitMin Minimum bar space.
      • barSpaceLimitMax Maximum bar space.
      • yAxisPosition Default y-axis position, supports left and right.
      • yAxisInside Whether the default y-axis is inside the pane.
      • paneMinHeight Default pane min height.
      • paneHeight Default pane height.
    • panes Custom pane list.
      • type Pane type, supports candle , indicator and xAxis .
      • content Pane content, only supports indicators. Each item can be an indicator name, an indicator config, or { indicator, yAxis }.
        • indicator Indicator name or indicator config.
        • yAxis Y-axis configuration bound to this indicator. paneId is not required.
      • 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 .
  • 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.

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

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