KLineChart Pro

To use your own data source, you must implement a class that satisfies the datafeed interface. Your implementation must provide the following four methods:

1. searchSymbols(search?: string): Performs a fuzzy search for symbols. Returns a Promise<SymbolInfo[]>. Triggered when the search box is used.
2. getHistoryKLineData(symbol: SymbolInfo, period: Period, from: number, to: number): Fetches historical k-line data. Returns a Promise<KLineData[]>. Triggered when the symbol or period changes.
3. subscribe(symbol: SymbolInfo, period: Period, callback: DatafeedSubscribeCallback): Subscribes to real-time data (via WebSocket or HTTP polling). Uses the provided callback to notify the chart of new data.
4. unsubscribe(symbol: SymbolInfo, period: Period): Cancels the real-time data subscription.

class CustomDatafeed {
  /**
   * Fuzzy search symbols
   * Triggered when the search box is entered
   * Returns an array of symbol information
   */
  searchSymbols (search?: string): Promise<SymbolInfo[]> {
    // Remote pull of symbol data based on fuzzy fields
  }

  /**
   * Pull historical k-line data
   * Triggered when the symbol and period change
   * 
   * Returns the symbol k-line data array
   */
  getHistoryKLineData (symbol: SymbolInfo, period: Period, from: number, to: number): Promise<KLineData[]> {
    // Complete data request
  }

  /**
   * Subscribe to real-time data of the symbol in a certain period
   * Triggered when the symbol and period change
   * 
   * Notify chart to receive data through callback
   */
  subscribe (symbol: SymbolInfo, period: Period, callback: DatafeedSubscribeCallback): void {
    // Complete ws subscription or http polling
  }

  /**
   * Unsubscribe to real-time data of the symbol in a certain period
   * Triggered when the symbol and period change
   * 
   */ 
  unsubscribe (symbol: SymbolInfo, period: Period): void {
    // Complete ws subscription cancellation or http polling cancellation
  }
}

To use KLineChart Pro without a package manager, include the UMD script and the CSS link in your HTML. The global namespace for the library will be klinechartspro.

<!-- Import js -->
<script src="https://cdn.jsdelivr.net/@klinecharts/pro/dist/klinecharts-pro.umd.js"></script>

<!-- Import css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/@klinecharts/pro/dist/klinecharts-pro.css"/>

<script>
  // Create Instance
  const chart = new klinechartspro.KLineChartPro({
    container: document.getElementById('container'),
    // Default symbol info
    symbol: {
      exchange: 'XNYS',
      market: 'stocks',
      name: 'Alibaba Group Holding Limited American Depositary Shares, each represents eight Ordinary Shares',
      shortName: 'BABA',
      ticker: 'BABA',
      priceCurrency: 'usd',
      type: 'ADRC',
    },
    // Default period
    period: { multiplier: 15, timespan: 'minute', text: '15m' },
    // The default data access is used here. If the default data is also used in actual use, you need to go to the https://polygon.io/ apply for API key
    datafeed: new klinechartspro.DefaultDatafeed(`${polygonIoApiKey}`)
  })
</script>

When using the CDN approach, include the UMD script and the CSS link in your HTML. Access the classes through the global klinechartspro namespace.

<!-- 引入js -->
<script src="https://cdn.jsdelivr.net/@klinecharts/pro/dist/klinecharts-pro.umd.js"></script>

<!-- 引入css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/@klinecharts/pro/dist/klinecharts-pro.css"/>
<script>
  // 创建实例
  const chart = new klinechartspro.KLineChartPro({
    container: document.getElementById('container'),
    // 初始化标的信息
    symbol: {
      exchange: 'XNYS',
      market: 'stocks',
      name: 'Alibaba Group Holding Limited American Depositary Shares, each represents eight Ordinary Shares',
      shortName: 'BABA',
      ticker: 'BABA',
      priceCurrency: 'usd',
      type: 'ADRC',
    },
    // 初始化周期
    period: { multiplier: 15, timespan: 'minute', text: '15m' },
    // 这里使用默认的数据接入，如果实际使用中也使用默认数据，需要去 https://polygon.io/ 申请 API key
    datafeed: new klinechartspro.DefaultDatafeed(`${polygonIoApiKey}`)
  })
</script>