VChart
VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
Introduction •
Demo •
Tutorial •
API•
Cross-Platform
[](https://www.npmjs.com/package/@visactor/vchart)
[](https://www.npmjs.com/package/@visactor/vchart)
[](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)
 [](https://github.com/visactor/vchart/blob/main/LICENSE)
English| [简体中文](./README.zh-CN.md)
（video）
## Introduction
VChart is a charting component library in VisActor visualization system. It wraps the charting logic based on visual grammar library [VGrammar](https://github.com/VisActor/VGrammar) and the component encapsulation based on visual rendering engine [VRender](https://github.com/VisActor/VRender). The core capabilities are as follows:
1. **Cross-platform**: Automatically adapt to desktop, H5, and multiple small program environments
2. **Storytelling**: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
3. **Scenes**: Deliver visual storytelling capabilities to end-users, unlock developer productivity
### Repository Introduction
This repository includes the following packages:
1. [`vchart`](./packages/vchart/): The core code repository of VChart
2. [`react-vchart`](./packages/react-vchart/): The VChart component encapsulated based on [React](https://react.dev/)
3. [`taro-vchart`](./packages/taro-vchart/): The VChart component encapsulated based on [Taro](https://docs.taro.zone/docs/)
4. [`lark-vchart`](./packages/lark-vchart/): The VChart component encapsulated based on [Lark miniAPP](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment)
5. [`tt-vchart`](./packages/lark-vchart/): The VChart component encapsulated based on [TikTok miniAPP](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/overview/)
6. [`block-vchart`](./packages/block-vchart/): The VChart component encapsulated based on [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction)
7. [`wx-vchart`](./packages/wx-vchart/)：The VChart component encapsulated based on [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/)
8. [`docs`](./docs/): VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.
## 🔨 Usage
### 📦 Installation
```bash
# npm
$ npm install @visactor/vchart
# yarn
$ yarn add @visactor/vchart
```
### 📊 A Chart Example
```typescript
import VChart from '@visactor/vchart';
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
crosshair: {
xField: { visible: true }
}
};
// 'chart' is the id of your dom container, such as
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
```
## ⌨️ Development
First of all, please install [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)
```bash
$ npm i --global @microsoft/rush
```
Then clone locally:
```bash
# clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
# install dependencies
$ rush update
# start vchart development server
$ rush start
# start react-vchart development server
$ rush react
# start site development server
$ rush docs
```
## 📖 Documents
After installation & clone & update, run docs to preview documents locally.
```bash
# start vchart document server
$ rush docs
```
## 🔗 Related Links
- [Homepage](https://www.visactor.io/vchart)
- [VCharts Gallery](https://www.visactor.io/vchart/example)
- [VChart Tutorials](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [VChart Options](https://www.visactor.io/vchart/option/)
- [VChart API](https://www.visactor.io/vchart/api/API/vchart)
- [VGrammar](https://www.visactor.io/vgrammar)
- [VRender](https://www.visactor.io/vrender)
- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)
- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports
## 💫 Ecosystem
| Project | Description |
| ------------------------------------------------------------------------------------- | ------------------------------------ |
| [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | React interface for @VisActor/VChart |
## 🤝 Contribution [](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)
If you would like to contribute, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and our [contributing guide](./CONTRIBUTING.md) first。
Small streams converge to make great rivers and seas!
