charts lib based @visactor/VGrammar
npm install @visactor/vchartVChart 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
``bashnpm
$ npm install @visactor/vchart
$3

`typescript
import VChart from '@visactor/vchart';const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
crosshair: {
xField: { visible: true }
}
};
// 'chart' is the id of your dom container, such as
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
`⌨️ Development
First of all, please install @microsoft/rush
`bash
$ npm i --global @microsoft/rush
`Then clone locally:
`bash
clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
install dependencies
$ rush update
start vchart development server
$ rush start
the another way to start react-vchart development server
$ rush run -p @visactor/vchart -s start
unit test
$ rush run -p @visactor/vchart -s test
``🔗 Related Links
- Homepage
- VCharts Gallery
- VChart Tutorials
- VChart Options
- VChart API
- VGrammar
- VRender
- FAQ
- CodeSandbox Template for bug reports