Registry / web-framework / ag-charts-vue

ag-charts-vue

library9.3.2jsnpmunverified

AG Charts Vue is the official Vue component wrapper for AG Charts, a high-performance, feature-rich JavaScript charting library. It provides a declarative API to easily integrate various chart types like line, bar, and area charts into Vue applications. The library is known for its outstanding performance and zero third-party dependencies for the core `ag-charts-community` module. It is designed for enterprise-grade applications and offers extensive customization options. Currently, the library is in its 13.x major version, with a consistent release cadence that includes regular minor updates and occasional major version bumps introducing new features and breaking changes. A key differentiator is its framework-agnostic core, offering dedicated reactive wrappers for Vue, React, and Angular, alongside a plain JavaScript API with first-class TypeScript support.

web-framework data

npm install ag-charts-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AG-CHARTS-VUE

ag-charts-vue

web-frameworkjavascriptv9.3.2

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.

AgChartsVue

✓ import { AgChartsVue } from 'ag-charts-vue';

✗ const AgChartsVue = require('ag-charts-vue').AgChartsVue;

The primary component for rendering AG Charts in Vue. Always use named import.

AgChartOptions

✓ import { AgChartOptions } from 'ag-charts-community';

✗ import { AgChartOptions } from 'ag-charts-vue';

Chart configuration types are exposed directly from the core `ag-charts-community` package, not the Vue wrapper.

defineComponent

✓ import { defineComponent, ref } from 'vue';

Standard Vue 3 Composition API imports, commonly used with TypeScript.

Demonstrates a basic AG Charts column chart within a Vue 3 Composition API component, using TypeScript.

import { defineComponent, ref } from 'vue'; import { AgChartsVue } from 'ag-charts-vue'; import { AgChartOptions } from 'ag-charts-community'; export default defineComponent({ name: 'BasicChart', components: { AgChartsVue, }, setup() { const options = ref<AgChartOptions>({ title: { text: 'AG Charts Basic Example', }, subtitle: { text: 'Fruit & Vegetable Consumption (2020)', }, data: [ { item: 'Apples', value: 50 }, { item: 'Oranges', value: 70 }, { item: 'Bananas', value: 60 }, { item: 'Carrots', value: 80 }, { item: 'Broccoli', value: 40 }, ], series: [ { type: 'column', xKey: 'item', yKey: 'value', fill: 'lightseagreen', stroke: 'navy', }, ], axes: [ { type: 'category', position: 'bottom', title: { text: 'Item' }, }, { type: 'number', position: 'left', title: { text: 'Consumption (kg)' }, }, ], }); return { options, }; }, });

Debug

Known issues

breakingMajor version updates (e.g., from v9 to v10, v12 to v13) frequently introduce breaking changes, including API alterations and configuration schema updates. Always review the official changelog before upgrading major versions.

fix

Consult the AG Charts changelog for specific migration steps. Test thoroughly after any major version upgrade. Key breaking changes are often related to chart options structure or series types.

affects: >=10.0.0

gotchaThe `ag-charts-vue` and `ag-charts-community` packages are tightly coupled and must have matching major versions to ensure compatibility. Mismatching versions will lead to runtime errors or unexpected behavior.

fix

Ensure both `ag-charts-vue` and `ag-charts-community` are installed with the same major version (e.g., if `ag-charts-vue` is `^13.0.0`, `ag-charts-community` should also be `^13.0.0`). Use a package manager like npm or yarn to install compatible versions.

affects: >=1.0.0

gotchaThis package, particularly in older versions like 9.3.2, is designed for Vue 2. While later `13.x` versions of AG Charts may support Vue 3, using `ag-charts-vue@9.3.2` with Vue 3 will cause compatibility issues.

fix

For Vue 3 projects, ensure you are using a compatible version of `ag-charts-vue` (typically `13.0.0` or higher). If sticking with Vue 2, ensure your Vue version falls within the peer dependency range.

affects: <13.0.0

gotchaIf using TypeScript with class-based components in Vue 2, the `vue-property-decorator` peer dependency is often required. Forgetting to install it can lead to compilation errors.

fix

Install `vue-property-decorator` in your project if you are using it for component definition: `npm install vue-property-decorator` or `yarn add vue-property-decorator`.

affects: >=7.2.0 <13.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: AgChartsVue

The `AgChartsVue` component has not been correctly registered or imported in your Vue component's context.

fix

Ensure `AgChartsVue` is imported using `import { AgChartsVue } from 'ag-charts-vue';` and registered in your component's `components` option, or globally via `Vue.component('AgChartsVue', AgChartsVue);`.

Error: ag-charts-community version X.Y.Z is not compatible with ag-charts-vue version A.B.C

A version mismatch between the `ag-charts-vue` wrapper and its core `ag-charts-community` dependency.

fix

Align the major versions of both packages. For instance, if `ag-charts-vue` is `^13.0.0`, install `ag-charts-community@^13.0.0`. You can check the latest compatible versions on the AG Charts website or npm registry.

TypeError: Cannot read properties of undefined (reading 'call') at AgChartsVue.render

Often indicates a missing or improperly configured `options` prop for the `AgChartsVue` component, or an issue with data reactivity.

fix

Verify that the `options` prop passed to `<AgChartsVue>` is a valid, reactive object containing all necessary chart configuration, including `data` and `series`.

Cannot find module 'vue-property-decorator' or similar TypeScript compilation error related to decorators.

The `vue-property-decorator` package is a peer dependency often used with `ag-charts-vue` in TypeScript Vue 2 projects, but it might not be installed.

fix

Install the missing package: `npm install vue-property-decorator` or `yarn add vue-property-decorator`. If you are in a Vue 3 project, `vue-property-decorator` is not applicable, consider using the Composition API or a Vue 3 compatible class component library.

Upgrade

Version history

9.3.2latest on npm

Audit

Dependencies

vuerequiredRequired for the Vue component. Supports Vue 2.x versions as specified.

ag-charts-communityrequiredThe core charting library that 'ag-charts-vue' wraps. Must match the major version for compatibility.

vue-property-decoratoroptionalUsed for class-based component syntax and decorators, common in Vue 2 TypeScript setups.

Agent activity

54 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/ag-grid/ag-charts ↗

packagehttps://www.npmjs.com/package/ag-charts-vue ↗

homepagehttps://ag-grid.com/charts/ ↗