{"id":12797,"library":"ag-charts-vue","title":"AG Charts Vue","description":"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.","status":"active","version":"9.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-charts","tags":["javascript","chart","data","charts","graph","vue","vuejs","typescript"],"install":[{"cmd":"npm install ag-charts-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ag-charts-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-charts-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the Vue component. Supports Vue 2.x versions as specified.","package":"vue","optional":false},{"reason":"The core charting library that 'ag-charts-vue' wraps. Must match the major version for compatibility.","package":"ag-charts-community","optional":false},{"reason":"Used for class-based component syntax and decorators, common in Vue 2 TypeScript setups.","package":"vue-property-decorator","optional":true}],"imports":[{"note":"The primary component for rendering AG Charts in Vue. Always use named import.","wrong":"const AgChartsVue = require('ag-charts-vue').AgChartsVue;","symbol":"AgChartsVue","correct":"import { AgChartsVue } from 'ag-charts-vue';"},{"note":"Chart configuration types are exposed directly from the core `ag-charts-community` package, not the Vue wrapper.","wrong":"import { AgChartOptions } from 'ag-charts-vue';","symbol":"AgChartOptions","correct":"import { AgChartOptions } from 'ag-charts-community';"},{"note":"Standard Vue 3 Composition API imports, commonly used with TypeScript.","symbol":"defineComponent","correct":"import { defineComponent, ref } from 'vue';"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport { AgChartsVue } from 'ag-charts-vue';\nimport { AgChartOptions } from 'ag-charts-community';\n\nexport default defineComponent({\n  name: 'BasicChart',\n  components: {\n    AgChartsVue,\n  },\n  setup() {\n    const options = ref<AgChartOptions>({\n      title: {\n        text: 'AG Charts Basic Example',\n      },\n      subtitle: {\n        text: 'Fruit & Vegetable Consumption (2020)',\n      },\n      data: [\n        { item: 'Apples', value: 50 },\n        { item: 'Oranges', value: 70 },\n        { item: 'Bananas', value: 60 },\n        { item: 'Carrots', value: 80 },\n        { item: 'Broccoli', value: 40 },\n      ],\n      series: [\n        {\n          type: 'column',\n          xKey: 'item',\n          yKey: 'value',\n          fill: 'lightseagreen',\n          stroke: 'navy',\n        },\n      ],\n      axes: [\n        {\n          type: 'category',\n          position: 'bottom',\n          title: { text: 'Item' },\n        },\n        {\n          type: 'number',\n          position: 'left',\n          title: { text: 'Consumption (kg)' },\n        },\n      ],\n    });\n\n    return {\n      options,\n    };\n  },\n});\n","lang":"typescript","description":"Demonstrates a basic AG Charts column chart within a Vue 3 Composition API component, using TypeScript."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=10.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<13.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=7.2.0 <13.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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);`.","cause":"The `AgChartsVue` component has not been correctly registered or imported in your Vue component's context.","error":"[Vue warn]: Failed to resolve component: AgChartsVue"},{"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.","cause":"A version mismatch between the `ag-charts-vue` wrapper and its core `ag-charts-community` dependency.","error":"Error: ag-charts-community version X.Y.Z is not compatible with ag-charts-vue version A.B.C"},{"fix":"Verify that the `options` prop passed to `<AgChartsVue>` is a valid, reactive object containing all necessary chart configuration, including `data` and `series`.","cause":"Often indicates a missing or improperly configured `options` prop for the `AgChartsVue` component, or an issue with data reactivity.","error":"TypeError: Cannot read properties of undefined (reading 'call') at AgChartsVue.render"},{"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.","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.","error":"Cannot find module 'vue-property-decorator' or similar TypeScript compilation error related to decorators."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null}