<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>

</div> <div align="center">

English | 简体中文 | 日本語

</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 and the component encapsulation based on visual rendering engine VRender. The core capabilities are as follows:

Cross-platform: Automatically adapt to desktop, H5, and multiple small program environments
Storytelling: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
Scenes: Deliver visual storytelling capabilities to end-users, unlock developer productivity

Repository Introduction

This repository includes the following packages:

vchart: The core code repository of VChart
react-vchart: The VChart component encapsulated based on React
taro-vchart: The VChart component encapsulated based on Taro
lark-vchart: The VChart component encapsulated based on Lark miniAPP
block-vchart: The VChart component encapsulated based on Lark Block
wx-vchart：The VChart component encapsulated based on Wx miniAPP
docs: VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.

🔨 Usage

📦 Installation

# npm
$ npm install @visactor/vchart

# yarn
$ yarn add @visactor/vchart

📊 A Chart Example

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

$ npm i --global @microsoft/rush

Then clone locally:

# 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.

# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs

If you meet dependency problems

$ rush purge
$ rush update

🔗 Related Links

💫 Ecosystem

| Project | Description | | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | React-VChart | React interface for @VisActor/VChart | | OpenInula-VChart | OpenInula VChart Components | | OMI | Web Components Framework | | A vercel template built with vchart and Next.js | A modern dashboard template built with vchart and Next.js, featuring a beautiful UI and rich data visualization components. |

Star History

💖 Thanks

Thanks to Semi for providing the theme visualization customization solution.

🤝 Contribution

If you would like to contribute, please read the Code of Conduct and our contributing guide first。

Small streams converge to make great rivers and seas!

VChart

Install / Use

README