VChart: A Multi‑Platform, High‑Performance Chart Library for Data Storytelling

VChart is an open‑source multi‑terminal chart library from ByteDance, built on the visualization grammar VGrammar and the rendering engine VRender, offering a flexible platform for creating vivid data stories.

Quick start : install via npm with npm install @visactor/vchart (or yarn add @visactor/vchart ) or include the pre‑built bundle from a CDN using <script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script> .

Importing and rendering : after installation, import the library with import VChart from '@visactor/vchart'; (or use the global VChart.default when loaded via CDN). Create a DOM container with explicit width and height, define a chart specification (data, type, xField, yField), instantiate the chart with new VChart(spec, { dom: 'chart' }) , and finally call vchart.renderAsync(); to draw the chart.

Rich chart types : VChart covers common statistical charts (bar, line, pie, area, scatter, etc.) and provides 3D variants such as pie3d, scatter3d, bar3d, line3d, and area3d, each with live demo links.

Narrative templates : for typical storytelling scenarios, VChart offers ready‑made template charts that can be generated with minimal configuration, enabling rapid creation of narrative visualizations.

High‑performance rendering : the library includes large‑data mode and progressive rendering controls. Example configuration shows how to enable large data handling with properties like large: true , largeThreshold: 500 , progressiveStep: 100 , and progressiveThreshold: 1000 .

Animation system : VChart defines entrance, update, exit, and idle animations, as well as element‑level and global morphing animations. Built‑in effects include fade‑in/out, scaling, move‑in/out, rotation, and complex morphing between chart types (one‑to‑one, one‑to‑many, many‑to‑one).

Interaction components : the library ships with a comprehensive component suite—tooltips (customizable via handlers), legends (discrete, continuous, color), crosshairs for Cartesian and polar coordinates, dataZoom, labels, markers, and more—allowing developers to enrich data exploration and user interaction.

Multi‑platform support : VChart automatically adapts to desktop browsers, H5, and various mini‑program environments (Feishu, ByteDance, WeChat) by specifying a mode parameter when creating the chart instance.

Layout strategies : three layout modes are available—placeholder layout (automatic component placement), grid layout (explicit col , row , colSpan , rowSpan definitions), and custom layout via the useLayout API, enabling full control over component and series positioning.

Theming : developers can register global themes and switch them at runtime, or define scene‑specific themes that control color palettes, series styles, and component appearances, facilitating consistent visual identity across applications.

Application scenarios : VChart is used in business intelligence dashboards, large‑screen displays, office suites, and video production, demonstrating its versatility for both analytical and storytelling contexts.

Conclusion : VChart aligns with VisActor’s vision of narrative and intelligent visualization, inviting the community to contribute, use, and provide feedback as the project continues to evolve.