# @visactor/vchart

> charts lib based @visactor/VGrammar

Latest version **2.2.0** (published 2026-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @visactor/vchart
pnpm add @visactor/vchart
yarn add @visactor/vchart
bun add @visactor/vchart
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2026-10-16 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 29.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1852 |
| Author | VisActor |
| Maintainers | liufangfang, visactorowner, xuanhun, zamhown, chensiji.0517, youngwinds, purpose233, ssfxz, lixuefei.1313, ray_sun, xiaoluohe, simaq, xile611, da730, zhouxinyu66888, zexian_chen |
| Keywords | charts, visualization, VChart, animation, storytelling, VisActor, graphics, interaction |

## Links

- npm: https://www.npmjs.com/package/@visactor/vchart
- Repository: https://github.com/VisActor/VChart
- Homepage: https://www.visactor.io/vchart
- Issues: https://github.com/VisActor/VChart/issues
- npm.io page: https://npm.io/package/@visactor/vchart

## Dependencies (10)

- [@visactor/vscale](https://npm.io/package/@visactor/vscale.md) ~1.0.28
- [@visactor/vutils](https://npm.io/package/@visactor/vutils.md) ~1.0.28
- [@visactor/vrender](https://npm.io/package/@visactor/vrender.md) 1.1.12
- [@visactor/vdataset](https://npm.io/package/@visactor/vdataset.md) ~1.0.28
- [@visactor/vlayouts](https://npm.io/package/@visactor/vlayouts.md) ~1.0.28
- [@visactor/vrender-core](https://npm.io/package/@visactor/vrender-core.md) 1.1.12
- [@visactor/vrender-kits](https://npm.io/package/@visactor/vrender-kits.md) 1.1.12
- [@visactor/vrender-animate](https://npm.io/package/@visactor/vrender-animate.md) 1.1.12
- [@visactor/vutils-extension](https://npm.io/package/@visactor/vutils-extension.md) 2.2.0
- [@visactor/vrender-components](https://npm.io/package/@visactor/vrender-components.md) 1.1.12

## Recent versions

- 2.2.0 (latest) — 2026-10-16
- 2.1.8-alpha.0 (alpha) — 2026-10-10
- 1.13.28 (hotfix) — 2026-07-29
- 1.13.5-vstory.3 (vstory) — 2025-01-27
- 1.10.6-beta.3 (beta) — 2024-08-27
- 2.1.7 — 2026-09-18
- 2.1.7-alpha.0 — 2026-09-11
- 2.1.6 — 2026-08-13
- 2.1.5-alpha.3 — 2026-08-12
- 2.1.5-alpha.2 — 2026-08-07
- 2.1.5-alpha.1 — 2026-08-07
- 2.1.6-alpha.1 — 2026-08-03
- 2.1.6-alpha.0 — 2026-08-03
- 2.1.5 — 2026-07-30
- 2.1.5-alpha.0 — 2026-07-21
- … 658 more at https://npm.io/package/@visactor/vchart/versions

## README

# VChart

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

## 🔨 Usage

### 📦 Installation

```bash
# npm
$ npm install @visactor/vchart

# yarn
$ yarn add @visactor/vchart
```

### 📊 A Chart Example

<img src="https://user-images.githubusercontent.com/135952300/246996854-95cf0db3-42a2-41f9-8f15-8b7bbec1794c.png" style="width: 500px">

```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 <div id="chart"></chart>
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
# the another way to start react-vchart development server
$ rush run -p @visactor/vchart -s start
# unit test
$ rush run -p @visactor/vchart -s test
```

## 🔗 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/faq/)
- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports

---
_Source: https://npm.io/package/@visactor/vchart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._