VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

Introduction • demo • Tutorial • API• Cross-Platform

English| 简体中文

（video）

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:

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

Repo Intro

This repository includes the following packages:

1. vchart: Charting components
2. react-vchart: React-based VChart

Usage

Installation

npm package

// npm
npm install @visactor/vchart

// yarn
yarn add @visactor/vchart

Quick Start

const spec = {
  type: 'common',
  data: {
    values: [
      {
        time: '2:00',
        value: 8,
        type: 'TikTok'
      },
      {
        time: '4:00',
        value: 9,
        type: 'TikTok'
      },
      {
        time: '6:00',
        value: 11,
        type: 'TikTok'
      },
      {
        time: '8:00',
        value: 14,
        type: 'TikTok'
      },
      {
        time: '10:00',
        value: 16,
        type: 'TikTok'
      },
      {
        time: '12:00',
        value: 17,
        type: 'TikTok'
      },
      {
        time: '14:00',
        value: 17,
        type: 'TikTok'
      },
      {
        time: '16:00',
        value: 16,
        type: 'TikTok'
      },
      {
        time: '18:00',
        value: 15,
        type: 'TikTok'
      },

      {
        time: '2:00',
        value: 7,
        type: 'Bilibili'
      },
      {
        time: '4:00',
        value: 8,
        type: 'Bilibili'
      },
      {
        time: '6:00',
        value: 9,
        type: 'Bilibili'
      },
      {
        time: '8:00',
        value: 10,
        type: 'Bilibili'
      },
      {
        time: '10:00',
        value: 9,
        type: 'Bilibili'
      },
      {
        time: '12:00',
        value: 12,
        type: 'Bilibili'
      },
      {
        time: '14:00',
        value: 14,
        type: 'Bilibili'
      },
      {
        time: '16:00',
        value: 12,
        type: 'Bilibili'
      },
      {
        time: '18:00',
        value: 14,
        type: 'Bilibili'
      }
    ]
  },
  color: ['#6690F2', '#70D6A3'],
  series: [
    {
      type: 'bar',
      xField: 'time',
      yField: 'value',
      stack: true,
      seriesField: 'type'
    }
  ],
  legends: {
    visible: true,
    orient: 'right'
  },
  axes: [
    {
      orient: 'bottom',
      type: 'band'
    },
    {
      orient: 'left',
      type: 'linear'
    }
  ]
};

/**
 * Chart container dom id: CONTAINER_ID
 * VChart 类: VChart
 *
 */
const vChart = new VChart(spec, { dom: CONTAINER_ID });
await vChart.renderAsync();

More demos and detailed tutorials

Related Links

• Official website

• Theme Configuration

• React-VChart

• Cross-platform

Ecosystem

Project	Description
React Component Library	A React chart component library based on VisActor/VChart
AI-generated Components	AI-generated chart component.

Contribution

If you would like to contribute, please read the Code of Conduct 和 Guide first。

Small streams converge to make great rivers and seas!

License

MIT License