KLineChart

💹📈 Lightweight k-line chart built with html5 canvas.

[![GitHub Workflow Status (with branch)](https://img.shields.io/github/actions/workflow/status/liihuu/KLineChart/build.yml?logo=github)](https://github.com/liihuu/KLineChart/actions/workflows/build.yml) [![Version](https://badgen.net/npm/v/klinecharts)](https://www.npmjs.com/package/klinecharts) [![Size](https://badgen.net/bundlephobia/minzip/klinecharts@latest)](https://bundlephobia.com/result?p=klinecharts@latest) [![npms.io (maintenance)](https://img.shields.io/npms-io/quality-score/klinecharts)](https://www.npmjs.com/package/klinecharts) [![Typescript](https://badgen.net/npm/types/klinecharts)](types/index.d.ts) [![LICENSE](https://badgen.net/github/license/liihuu/KLineChart)](LICENSE) [![Docs](https://badgen.net/badge/docs%20by/vitepress/bd34fe)](https://vitepress.dev/)

[![Issues](https://img.shields.io/static/v1?color=1f2328&logo=github&logoColor=fff&label&message=Github%20Issues)](https://github.com/liihuu/KLineChart/issues) [![Discussions](https://img.shields.io/static/v1?color=1f2328&logo=github&logoColor=fff&label&message=Github%20Discussions)](https://github.com/liihuu/KLineChart/discussions) [![Telegram](https://img.shields.io/static/v1?color=1296DB&logo=telegram&logoColor=fff&label&message=Telegram)](https://t.me/klinecharts) [![Wechat](https://img.shields.io/static/v1?color=1EBE1F&logo=wechat&logoColor=fff&label&message=Wechat)](https://klinecharts.com/en-US/guide/feedback.html)

## ✨ Features - 📦 **Out of the box:** Simple and fast integration, basically zero cost to get started. - 🚀 **Lightweight and smooth:** Zero dependencies, only 40k under gzip compression. - 💪 **Powerful functions:** Built-in multiple indicators and line drawing models. - 🎨 **Highly scalable:** With rich style configuration and API, the function can be extended as you like. - 📱 **Mobile:** Support mobile, one chart, handle multiple terminals. - 🛡 **Typescript development:** Provide complete type definition files. ## ⚡ Performance Similar to chart libraries for performance comparison. + **Test Scenario:** 50000 pieces of data, 5 pane indicators, average 10 runs + **Device:** macOS Ventura, Apple M2 Pro, 16G + **Browser:** Chrome 114.0.5735.106 + **Framework:** React@18.2.0 Comparison of time consumption from initialization to full rendering: | **klinecharts@9.4.0** | **night-vision@0.3.2** | **hqchart@1.1.12147** | | :---: | :---: | :---: | | 37ms | 36ms | 241ms | ## 📦 Install ### Using npm ```bash npm install klinecharts --save ``` ### Using yarn ```bash yarn add klinecharts ``` ### CDNs #### [unpkg](https://unpkg.com) ```html ``` #### [jsDelivr](https://cdn.jsdelivr.net) ```html ``` ## 📄 Docs ### Online [https://www.klinecharts.com](https://www.klinecharts.com) ### Locale Execute command in root directory. [Node.js](https://nodejs.org) is required. ```bash # Install the dependencies npm install # Start document service npm run docs:dev ``` After successful startup, open in the browser http://localhost:8888 . ## 🛠️ Build Execute command in root directory. [Node.js](https://nodejs.org) is required. ```bash # Install the dependencies npm install # Build files npm run build ``` The generated files are in the dist folder. ## 🔗 Links + [Online Preview](https://preview.klinecharts.com) + [KLineChart Pro](https://pro.klinecharts.com) + [Sample Code](https://github.com/liihuu/KLineChartSample) ## ©️ License KLineChart is available under the Apache License V2.