It is not only a fully functional graph visualization library, but also an explorer of data relationships.
!!!###!!!title=React Lynx VChart——VisActor/VChart tutorial documents!!!###!!!!!!###!!!description=**[Scope] This guide covers the internal `@dp/lynx-vchart` package and its corresponding internal ReactLynx host at ByteDance. Based on public information reviewed on September 14, 2026, open-source native Lynx does not yet publicly provide the Canvas integration required here. Installing a chart package does not add this capability to the host. For updates, see the [official Lynx documentation](https://lynxjs.org/) and the [charting discussion](https://github.com/lynx-family/lynx/issues/6230#issuecomment-4729040590).**Lynx is ByteDance's open-source high-performance cross-platform framework, which quickly builds native views based on the web technology stack. Lynx was officially open-sourced on March 5, 2025. ReactLynx is the React syntax version of Lynx. VChart, based on ByteDance's internal version ReactLynx3.0, provides chart rendering capabilities.!!!###!!!
ReactLynx
[Scope] This guide covers the internal @dp/lynx-vchart package and its corresponding internal ReactLynx host at ByteDance. Based on public information reviewed on September 14, 2026, open-source native Lynx does not yet publicly provide the Canvas integration required here. Installing a chart package does not add this capability to the host. For updates, see the official Lynx documentation and the charting discussion.
Lynx is ByteDance's open-source high-performance cross-platform framework, which quickly builds native views based on the web technology stack. Lynx was officially open-sourced on March 5, 2025. ReactLynx is the React syntax version of Lynx. VChart, based on ByteDance's internal version ReactLynx3.0, provides chart rendering capabilities.
How to get Lynx-VChart
npm package
You can directly install the lynx-vchart dependency package (this package is an intranet package) in the ReactLynx project: @dp/lynx-vchart.
Unified chart tag
receives a complete spec as the chart definition, and its spec data structure is exactly the same as that of VChart, so developers can send any spec that is legal for VChart to Lynx-VChart for chart rendering.
onReady is a built-in callback event that is triggered when the chart is rendered or updated. Its input parameters represent the chart instance object and whether it is the first rendering.
For example, developers can register the callback events that need to be triggered on the chart instance during the first rendering to achieve chart interaction functions.
<VChartSimple />
The usage of this tag is similar to <VChart />. This tag supports the lazy loading feature of VChart. When using it, you need to configure an additional vchartConstructor field to pass in the VChart.
import { VChartSimple } from '@dp/lynx-vchart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';
export default function Demo() {
return (
<view>
<VChartSimple
// vchart核心包
vchartConstructor={VChartCore}
width="700rpx"
height="900rpx"
spec={spec}
/>
</view>
);
}
Since this tag is a lazy loading tag, you need to register the charts you will use in advance, like:
import { registerAreaChart } from '@visactor/vchart/esm/chart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';
VChartCore.useRegisters([registerAreaChart]);
If you use a custom theme in VChart, you can achieve it in two ways, one is to define the theme in spec, and the other is to register the theme through ThemeManager. Because in Lynx-VChart, there is no need to reference the VChart npm package. Therefore, Lynx-VChart exposes the VChart base class, named VChartCore, which is convenient for developers to register custom themes on the VChart base class through static methods.
Refer to VChart Theme for VChart theme configuration.
Note that for the case of using VChart on demand, it is recommended to directly call the VChart API to use the theme.
Event Interaction
The top-level chart component, whether it is the unified chart label (VChart) or the syntax chart label (BarChart, etc.), supports the scene tree event EventsProps thrown by the underlying rendering layer on its Props.
