Registry / data / viser-vue

viser-vue

JSON →
library2.4.8jsnpmunverified

viser-vue is a Vue.js component library designed for declarative data visualization, acting as a Vue-native wrapper for charts powered by the AntV G2 charting engine. It provides a set of components such as `<v-chart>`, `<v-tooltip>`, and various specific chart types (e.g., `<v-smooth-line>`) that allow developers to build interactive data visualizations directly within Vue templates. The package also integrates with `@antv/data-set` for robust data transformation capabilities. The current stable version is 2.4.8, last published approximately six years ago, indicating it is primarily designed for Vue 2 applications and is likely in a maintenance-only mode. Its key differentiator is providing a familiar Vue component API over the powerful G2 visualization grammar, abstracting away lower-level charting details for Vue developers. Due to its age, direct compatibility with Vue 3 is not expected.

dataweb-framework
npm install viser-vue
github ↗package ↗
INSTALL
IMPORT
SIG · VISER-VUE
V
viser-vue
datajavascriptv2.4.8
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ViserVue components
✓ import Vue from 'vue'; import ViserVue from 'viser-vue'; Vue.use(ViserVue);
✗ import { VChart, VTooltip } from 'viser-vue';
While individual components can be used in templates, for global registration and ease of use, register ViserVue as a Vue plugin. Direct named imports of components for local registration might require specific build configurations not covered by default.
DataSet
✓ import DataSet from '@antv/data-set';
✗ const DataSet = require('@antv/data-set');
The original README used CommonJS `require`, but modern Vue/TypeScript setups should use ES Modules `import`. Both are typically supported if your build tooling handles CJS interoperability.
Specific Chart Components
✓ // Used directly in template after global plugin registration. // <v-chart :data="data">...</v-chart>
viser-vue components like <v-chart>, <v-tooltip>, <v-axis>, and <v-smooth-line> are typically made globally available by installing the ViserVue plugin (Vue.use(ViserVue)). They are not usually imported individually for local component registration in Vue 2 setups without additional configuration.

This quickstart demonstrates how to create a multi-line smooth chart using `viser-vue` components. It imports `viser-vue` as a Vue plugin, uses `@antv/data-set` to transform raw data into a suitable format, and then binds this processed data to a `<v-chart>` component, defining axes, tooltips, and a smooth line series with different colors per city. This example is designed for Vue 2 applications.

<!-- MyChart.vue --> <template> <div> <v-chart :force-fit="true" :height="height" :data="data" :scale="scale"> <v-tooltip /> <v-axis /> <v-smooth-line position="month*temperature" color="city" :size="2" /> </v-chart> </div> </template> <script lang="ts"> import Vue from 'vue'; import ViserVue from 'viser-vue'; import DataSet from '@antv/data-set'; Vue.use(ViserVue); // Globally register ViserVue components const sourceData = [ { month: 'Jan', Tokyo: 7.0, London: 3.9 }, { month: 'Feb', Tokyo: 6.9, London: 4.2 }, { month: 'Mar', Tokyo: 9.5, London: 5.7 }, { month: 'Apr', Tokyo: 14.5, London: 8.5 }, { month: 'May', Tokyo: 18.4, London: 11.9 }, { month: 'Jun', Tokyo: 21.5, London: 15.2 }, { month: 'Jul', Tokyo: 25.2, London: 17.0 }, { month: 'Aug', Tokyo: 26.5, London: 16.6 }, { month: 'Sep', Tokyo: 23.3, London: 14.2 }, { month: 'Oct', Tokyo: 18.3, London: 10.3 }, { month: 'Nov', Tokyo: 13.9, London: 6.6 }, { month: 'Dec', Tokyo: 9.6, London: 4.8 } ]; const dv = new DataSet.View().source(sourceData); dv.transform({ type: 'fold', fields: ['Tokyo', 'London'], key: 'city', value: 'temperature' }); const data = dv.rows; const scale = [{ dataKey: 'percent', min: 0, formatter: '.2%' }]; export default Vue.extend({ data() { return { data, scale, height: 400 }; } }); </script> <style scoped> /* Your styles here */ </style>
Debug
Known issues
breakingviser-vue (v2.x) is designed for Vue 2 and is not compatible with Vue 3 due to breaking changes in Vue's reactivity system and component API. Attempting to use it directly in a Vue 3 project will result in runtime errors related to component registration, props, and lifecycle hooks.
fix
For Vue 3 projects, consider using a Vue 3-native charting library or a migration build (@vue/compat) as an intermediary step, though full compatibility for older libraries like viser-vue is not guaranteed. The recommended path is to find a Vue 3 alternative or rewrite using modern AntV G2 directly.
affects: >=3.0.0 of Vue
deprecatedThe package has not seen an update in approximately six years. While it may still function with older Vue 2 projects, it is considered unmaintained and unlikely to receive bug fixes, security updates, or new features.
fix
Assess the risk for new projects. For existing projects, consider migrating to more actively maintained Vue 2 or Vue 3 compatible charting libraries for long-term support and security.
affects: >=2.4.8
gotchaThe documentation and examples may primarily use CommonJS `require` syntax for dependencies like `@antv/data-set`. In modern projects using ES Modules (`import`), ensure your build tooling correctly handles CJS interoperability or update import statements.
fix
Prefer `import DataSet from '@antv/data-set';` over `const DataSet = require('@antv/data-set');` in TypeScript or ES Module contexts. Ensure your `tsconfig.json` and build configuration (e.g., Webpack, Vite) are set up for proper module resolution.
affects: All versions
Errors
Common errors & fixes
Error: Failed to mount component: template or render function not defined.
This error typically occurs in Vue 3 applications when trying to use a Vue 2 component library like `viser-vue` without the `@vue/compat` migration build, or if the component registration fails due to Vue version incompatibility.
fix
Ensure you are running a Vue 2 project (`vue@^2.x.x`). If you must use it in a Vue 3 project, investigate `@vue/compat` for a migration path, but be aware that full compatibility is not guaranteed. Make sure `Vue.use(ViserVue);` is called before your root Vue instance is created.
Cannot find module '@antv/data-set' or its corresponding type declarations.
The `@antv/data-set` package, used for data transformation, is a direct dependency that needs to be installed separately, and this error indicates it's missing.
fix
Install the dependency: `npm install --save @antv/data-set` or `yarn add @antv/data-set`.
Upgrade
Version history
2.4.8latest on npm
Audit
Dependencies
vuerequiredPeer dependency, required for Vue component rendering. Primarily supports Vue 2.
@antv/data-setrequiredRequired for data transformation, especially for complex chart data preparation.
Agent activity
25 hits · last 30 days
node
20
OpenAI (training)
1
Resources
githubhttps://github.com/viserjs/viser-vue ↗
packagehttps://www.npmjs.com/package/viser-vue ↗
viser-vue — npm install viser-vue · libregistry