Quick Start

Semi Vcharts DSM is a chart design system management tool (Design System Management) provided by Semi Design, which supports global and element-level chart customization and keeps synchronization between Figma and front-end code.

Update: 5/20/2025, 9:02:24 PM

Introduction to VChart and Vcharts DSM

VChart is the core chart component library of ByteDance's open source visualization solution VisActor.
Semi Vcharts DSM is a chart design system management tool (Design System Management) provided by Semi Design, which supports global and element-level chart customization and keeps synchronization between Figma and front-end code.

Vcharts is encapsulated based on the visualization grammar library VGrammar and the rendering engine VRender. While meeting the data presentation, it also supports animation arrangement for narrative scenes, rich interactive capabilities and customized chart styles. The simple and easy-to-use configuration greatly reduces the user's learning cost.

DSM link: https://semi.design/dsm (ByteDance users please replace the domain name with the intranet domain name)
VChart GitHub link: https://github.com/VisActor/VChart
VChart official website link: https://visactor.io/vchart

Install and use VChart

In a React project, you can use the following command to install react-vchart:

# Install using npm
npm install @visactor/react-vchart
# Install using yarn
yarn add @visactor/react-vchart

For more detailed instructions on drawing charts, please see: https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react

Customize the theme

Visit Semi DSM, select "Data Visualization" in the upper left corner, and click the Create Design System button in the upper right corner

For more detailed usage documents on configuring themes, please refer to [Create a Theme]

Use the theme in Figma

Install the Figma plugin to select a theme and draw a chart with the theme on the design

Use the theme in R&D projects

Install the theme package

Assuming your theme package is named @ies/semi-vchart-theme-test, the theme package is created by the designer in DSM After configuring the theme, please ask the designer for the theme package name.

npm install @ies/semi-vchart-theme-test
# or
yarn add @ies/semi-vchart-theme-test

Introduce the theme in the theme package in the project

// vchart light color
import vchartLight from "@ies/semi-vchart-theme-test/light.json"
// vchart dark color
import vchartDark from "@ies/semi-vchart-theme-test/dark.json"
// echart light color
import echartLight from "@ies/semi-vchart-theme-test/lightEcharts.json"
// echart dark color
import echartLight from "@ies/semi-vchart-theme-test/darkEcharts.json"

Register the theme

import VChart from '@visactor/vchart';

VChart.ThemeManager.registerTheme("myLightTheme", vchartLight);

// apply a theme
VChart.ThemeManager.setCurrentTheme('myLightTheme');

For other questions, please refer to Vcharts theme consumption document

For Echarts theme usage, please refer to Echarts document