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:

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

Repo Intro

This repository includes the following packages:

vchart: Charting components
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();

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

5.2 KiB Raw Blame History Unescape Escape