AG Charts Vue

9.3.2 verified Sun Apr 19 auth: no javascript

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.

Common errors

error [Vue warn]: Failed to resolve component: AgChartsVue ↓

cause 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 Error: ag-charts-community version X.Y.Z is not compatible with ag-charts-vue version A.B.C ↓

cause 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.

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

cause 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.

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

cause 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.

Warnings

breaking Major 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.

gotcha The `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.

gotcha This 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.

gotcha If 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`.

Install

npm install ag-charts-vue

yarn add ag-charts-vue

pnpm add ag-charts-vue

Imports

AgChartsVue

wrong

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

correct

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

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

AgChartOptions
wrong
```
import { AgChartOptions } from 'ag-charts-vue';
```
correct
```
import { AgChartOptions } from 'ag-charts-community';
```
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.

Quickstart

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,
    };
  },
});