VisActor/VChart

Latest recorded source activity: October 20, 2026 at 08:38

SkillsMP catalog refreshed: November 9, 2026 at 14:22

skills collected: 2

GitHub stars: 1,855
GitHub forks: 222

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/VisActor/VChart.

Repository README

Repository README source: README.md

Read the source README

Expand full README

<div align="center"> <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/> </a> <a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/> </a> </div> <div align="center"> <h1>VChart</h1> </div> <div align="center"> VChart, more than just a cross-platform charting library, but also an expressive data storyteller. <p align="center"> <a href="https://www.visactor.io/vchart">Introduction</a> • <a href="https://www.visactor.io/vchart/example">Demo</a> • <a href="https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide">Tutorial</a> • <a href="https://www.visactor.io/vchart/option/barChart">API</a>• <a href="https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node">Cross-Platform</a> </p> ![](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg) ![](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg) [![npm Version](https://img.shields.io/npm/v/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request) ![](https://img.shields.io/badge/language-TypeScript-red.svg) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart/blob/main/LICENSE) </div> <div align="center"> English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md) </div> <div align="center"> （video） </div> ## 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. [`block-vchart`](./packages/block-vchart/): The VChart component encapsulated based on [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction) 6. [`wx-vchart`](./packages/wx-vchart/)：The VChart component encapsulated based on [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/) 7. [`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 <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 # start react-vchart development server $ rush react # start site development server $ rush docs ``` # 📖 Documents After installation & clone & update, run docs to preview VTable documents locally. ```bash # start vtable document server. execute in file path: ./ $ rush update $ rush build $ rush docs ``` # If you meet dependency problems ```bash $ rush purge $ rush update ``` ## 🔗 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 ## 💫 Ecosystem | Project | Description | | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | React interface for @VisActor/VChart | | [OpenInula-VChart](https://www.visactor.io/vchart/example-openinula) | OpenInula VChart Components | | [OMI](https://omi.cdn-go.cn/home/latest) | Web Components Framework | | [A vercel template built with vchart and Next.js](https://vercel.com/templates/next.js/visactor-nextjs-template) | A modern dashboard template built with vchart and Next.js, featuring a beautiful UI and rich data visualization components. | ## Star History <a href="https://gitdata.xuanhun520.com/#visactor/vchart&Date"> <picture > <img style="width: 800px; height: 533px;" alt="Star History Chart" src="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark" /> </picture> </a> ## 💖 Thanks <div> <a href="https://semi.design/#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi-dark.svg"/> </a> <a href="https://semi.design/#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi.svg"/> </a> </div> Thanks to [Semi](https://semi.design/) for providing the theme visualization customization solution. ## 🤝 Contribution [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request) Before submitting a PR, read [PR checks and merge process](./CONTRIBUTING.md#pr-checks-and-merge-process) for local testing, automated CR, unit and visual checks, manual BugServer Photo verification, and maintainer approval and merge. See the guide for the activation status and scope of the new workflow. 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! <a href="https://github.com/visactor/vchart/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vchart" /></a>

Loading the repository README…

Skills in this repository

classification pending

skill

occupation

description

updated

vchart-development-assistant

unclassified

使用 VChart 生成可查看的 HTML 或供宿主消费的完整 spec，修改和诊断图表配置，从截图还原样式，并支持 React-VChart 和图表交互。用于 VChart 图表生成、配置、排错和应用集成。

Source text: Chinese

2026-10-20

data-science-visualization

unclassified

从真实表格或已有统计与模型结果生成简洁的交互数据科学图表 HTML，按问题与数据条件选图，支持按需交互和对话改图。用于看数据和展示结果；完整分析报告或应用开发使用对应工作流。

Source text: Chinese

2026-10-19

Showing 2 of 2 collected skills.