kline chart

Usage no npm install needed!

<script type="module">
  import vanyiKline from 'https://cdn.skypack.dev/@vanyi/kline';



npm version License

@vanyi/kline demo

English | 简体中文


npm i @vanyi/kline


  1. Browser: <link rel="stylesheet" href="path/to/kline.min.css"> <script src="path/to/kline.min.js"></script>

    Module: import VyKline from '@vanyi/kline'; import '@vanyi/kline/lib/kline.min.css;'

  2. After dom is loaded, run VyKline.bootstrap(options),option: Object;

  3. options:

    • container Chart mount point type: HTMLElement;
    • deedfeeds Data feedback object type: Object,See below for detailed configuration;
    • defaultInterval Default time granularity type: String,See below for detailed configuration;
    • interval Time granularity collection type: Array,defaultInterval's collection;
    • theme theme type: String, Optional light | dark, default:light;
    • customChart Custom chart configuration type: Object,See below for detailed configuration;
    • customLoadingEl Custom loading node type: HTMLElement, Optional,The style needs to be set to absolute positioning, width and height 100%;
    • chartType Chart type type: String, Optional KLINE | EMPTY_KLINE,default KLINE;
    • showIntervalToolbar Whether to display the time granularity bar type: Boolean Optional,default true;
    • lang Language type: String, Optional zhCN | enUS, default zhCN;
    • onTimeIntervalChanged This event is triggered when the time granularity is switched,The parameter is time granularity type: Function,Optional.

Detailed Configuration

  1. deedfeeds Data feedback object,enter data for the chart.


    • setHistoryData({ interval, setHistoryData, subscribeData }) Set historical data

      intervalCurrent time granularity
      setHistoryData Callback,Parameters are historical data Array,Standard data objects are as follows:

            time: null, // 1590314400000
            open: null,
            high: null,
            low: null,
            close: null,
            volume: null // Trading volume

      getRealTimeData Callback,Parameters are standard data objects,Same as above.

    • intervalChanged({ interval, setHistoryData, subscribeData }) Triggered when time granularity is switched,Note: Here you should unsubscribe before getting historical data

      intervalCurrent time granularity
      setHistoryData Callback,Parameters are historical data Array
      subscribeData Callback,The parameter is the current data object Object

  2. defaultInterval Default time granularity,format: 'm1','h1', 'd1', 'w1', 'M1' Corresponding to minute, hour, day, week, month

  3. customChart Chart custom configuration object:

         default_rise_color: '#53b987', // rise
         default_fall_color: '#eb4d5c', // fall
         init_offset_x: 100, // Initial chart offset
         volume_height: 100, // Trading volume height
         interval_tool_bar: '30px', // Time granularity bar default height

Instance Method

  1. switchChartType Switch chart type,paramType: String Optional value:KLINE | EMPTY_KLINE
  2. switchTheme Switch theme,paramType: String Optional value:light | dark
  3. switchLang Switch language,paramType: String Optional value:zhCN | enUS


Mainstream browser


Copyright (c) 2020 Vanyi0924

Preview Address





The chart is completely driven by data, and only focuses on the introduction of data, so as long as you access the data that meets the standards.The example uses the websocket way,Thankshuobifor the data interface provided.


This is a project developed and maintained by virtue of personal interests, hobbies and sense of responsibility,If it can bring you a little help,please star to let more people know it,Thank you!Community support is my motivation.(づ ̄3 ̄)づ╭❤~


  • x,y axis optimization
  • internationalization
  • custom theme(If you need customization urgently, you can modify or add it in /src/config/theme)