Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 7 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-12-23T18:18:26.000Z (7 days ago)
Last Synced: 2024-12-24T03:02:12.951Z (7 days ago)
Topics: candlestick, canvas, chart, exchange, finance, kline, klinechart, stock, stockchart, technical-indicators, time-line
Language: TypeScript
Homepage: https://klinecharts.com/
Size: 58.9 MB
Stars: 2,545
Watchers: 39
Forks: 641
Open Issues: 32
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        


  

    

  



KLineChart




English | 简体中文






💹📈 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:** [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.