https://github.com/klinecharts/KLineChart
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.（可高度自定义的轻量级k线图，无第三方依赖，支持移动端）
https://github.com/klinecharts/KLineChart
candlestick canvas chart exchange finance kline klinechart stock stockchart technical-indicators time-line
Last synced: 3 days ago
JSON representation
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.（可高度自定义的轻量级k线图，无第三方依赖，支持移动端）
- Host: GitHub
- URL: https://github.com/klinecharts/KLineChart
- Owner: klinecharts
- License: apache-2.0
- Created: 2019-05-19T09:04:23.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-04-13T16:55:52.000Z (8 days ago)
- Last Synced: 2025-04-16T10:39:33.475Z (5 days ago)
- Topics: candlestick, canvas, chart, exchange, finance, kline, klinechart, stock, stockchart, technical-indicators, time-line
- Language: TypeScript
- Homepage: https://klinecharts.com/
- Size: 68.2 MB
- Stars: 2,785
- Watchers: 42
- Forks: 688
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-crypto-trading-bots - KLineChart - Lightweight k-line chart that can be highly customized. (Charting libraries)
README
KLineChart
💹📈 Lightweight k-line chart built with html5 canvas.
[](https://github.com/liihuu/KLineChart/actions/workflows/build.yml)
[](https://www.npmjs.com/package/klinecharts)
[](https://bundlephobia.com/result?p=klinecharts@latest)
[](https://www.npmjs.com/package/klinecharts)
[](types/index.d.ts)
[](LICENSE)
[](https://vitepress.dev/)[](https://github.com/liihuu/KLineChart/issues)
[](https://github.com/liihuu/KLineChart/discussions)
[](https://t.me/klinecharts)
[](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.0Comparison 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
+ [KLineChart Preview](https://preview.klinecharts.com): A more complete example.
+ [KLineChart Pro](https://pro.klinecharts.com): Financial chart built out of the box based on KLineChart.
+ [openctp](https://github.com/openctp/openctp): Trading simulation environment for the Chinese market.## ©️ License
KLineChart is available under the Apache License V2.
