Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 14 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T16:53:36.000Z (about 2 months ago)
- Last Synced: 2024-10-11T06:31:36.488Z (about 1 month ago)
- Topics: candlestick, canvas, chart, exchange, finance, kline, klinechart, stock, stockchart, technical-indicators, time-line
- Language: TypeScript
- Homepage: https://klinecharts.com/
- Size: 51.2 MB
- Stars: 2,361
- Watchers: 38
- Forks: 593
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
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:** [email protected]
Comparison of time consumption from initialization to full rendering:
| **[email protected]** | **[email protected]** | **[email protected]** |
| :---: | :---: | :---: |
| 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.