2023-01-14 16:40:55 +08:00
< div align = "center" >
< a href = "https://klinecharts.com" >
2024-10-28 03:16:30 +08:00
< img src = "https://klinecharts.com/images/logo.svg?hash=89987fs7789" height = "150" / >
2022-03-06 20:52:53 +08:00
< / a >
2023-01-14 16:40:55 +08:00
< / div >
< h1 align = "center" > KLineChart< / h1 >
2023-07-15 01:38:09 +08:00
< div align = "center" >
English | < a href = "https://github.com/liihuu/KLineChart/blob/main/README.zh-CN.md" > 简体中文< / a >
< / div >
2023-07-15 01:45:13 +08:00
< br / >
2023-07-15 01:38:09 +08:00
2023-07-15 01:45:13 +08:00
< p align = "center" > 💹📈 Lightweight k-line chart built with html5 canvas.< / p >
2021-03-02 19:28:35 +08:00
< div align = "center" >
2023-03-23 22:08:47 +08:00
[](https://github.com/liihuu/KLineChart/actions/workflows/build.yml)
2021-01-09 18:27:30 +08:00
[](https://www.npmjs.com/package/klinecharts)
[](https://bundlephobia.com/result?p=klinecharts@latest)
2023-03-23 22:08:47 +08:00
[](https://www.npmjs.com/package/klinecharts)
2021-01-09 18:27:30 +08:00
[](types/index.d.ts)
[](LICENSE)
2024-05-04 01:12:05 +08:00
[](https://vitepress.dev/)
2023-04-21 02:44:00 +08:00
2023-05-05 01:29:54 +08:00
< / div >
< div align = "center" >
2024-05-04 01:29:23 +08:00
[](https://github.com/liihuu/KLineChart/issues)
[](https://github.com/liihuu/KLineChart/discussions)
2024-05-04 01:18:55 +08:00
[](https://t.me/klinecharts)
2023-05-05 01:29:54 +08:00
[](https://klinecharts.com/en-US/guide/feedback.html)
2024-05-04 01:29:23 +08:00
<!-- [](https://discord.gg/7YjHYgvvvZ) -->
2023-11-03 03:26:36 +08:00
<!-- [](https://twitter.com/klinecharts) -->
2023-07-14 02:16:46 +08:00
2019-12-16 19:33:33 +08:00
2021-03-02 19:28:35 +08:00
< / div >
2023-05-18 16:46:37 +08:00
< img style = "margin-bottom:6px" src = "https://cdn.nlark.com/yuque/0/2023/png/8403091/1684399506365-assets/web-upload/044fe897-168c-4fbb-a485-87a8ef61c04a.png" / >
2019-12-16 19:33:33 +08:00
2023-05-05 01:29:54 +08:00
2023-04-15 23:42:40 +08:00
## ✨ Features
2023-06-13 04:51:20 +08:00
- 📦 **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 |
2023-03-14 02:13:21 +08:00
2021-03-02 19:28:35 +08:00
## 📦 Install
2020-05-24 00:54:21 +08:00
### Using npm
2019-12-16 19:33:33 +08:00
```bash
2020-04-24 10:58:40 +08:00
npm install klinecharts --save
2019-12-16 19:33:33 +08:00
```
2021-01-08 19:15:04 +08:00
### Using yarn
```bash
yarn add klinecharts
```
### CDNs
#### [unpkg](https://unpkg.com)
2023-04-06 22:05:25 +08:00
```html
< script type = "text/javascript" src = "https://unpkg.com/klinecharts/dist/klinecharts.min.js" > < / script >
```
2019-12-16 19:33:33 +08:00
2021-01-08 19:15:04 +08:00
#### [jsDelivr](https://cdn.jsdelivr.net)
2023-04-06 22:05:25 +08:00
```html
< script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/klinecharts/dist/klinecharts.min.js" > < / script >
```
2021-01-08 19:15:04 +08:00
2021-03-02 19:28:35 +08:00
## 📄 Docs
2023-09-19 00:49:07 +08:00
### 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 .
2019-12-16 19:33:33 +08:00
2021-03-02 19:28:35 +08:00
## 🛠️ Build
2020-04-24 02:04:34 +08:00
Execute command in root directory. [Node.js ](https://nodejs.org ) is required.
2019-12-16 19:33:33 +08:00
```bash
2023-09-19 00:49:07 +08:00
# Install the dependencies
2020-04-24 02:04:34 +08:00
npm install
2019-12-16 19:33:33 +08:00
2023-09-19 00:49:07 +08:00
# Build files
2020-04-24 02:04:34 +08:00
npm run build
2019-12-16 19:33:33 +08:00
```
2020-04-24 02:04:34 +08:00
The generated files are in the dist folder.
2019-12-16 19:33:33 +08:00
2021-03-02 19:28:35 +08:00
## 🔗 Links
2023-04-06 22:05:25 +08:00
+ [Online Preview ](https://preview.klinecharts.com )
+ [KLineChart Pro ](https://pro.klinecharts.com )
+ [Sample Code ](https://github.com/liihuu/KLineChartSample )
2020-03-26 20:56:14 +08:00
2021-03-02 19:28:35 +08:00
## ©️ License
2020-04-25 01:37:01 +08:00
KLineChart is available under the Apache License V2.
