Vue ChartsInstallation

Learn how to add AG Charts to your application.

Overview

Adding AG Charts to your application is simple and follows standard Node.js conventions for modular Javascript.

Adding to Your Bundled Project

This is the recommended approach for modern application development. We expect most users will be using a tool such as rollup, webpack, esbuild, vite or the many other options to bundle their application.

Install NPM Package

npm install ag-charts-vue3

# Install AG Charts Enterprise edition (optional).
npm install ag-charts-enterprise

yarn add ag-charts-vue3

# Install AG Charts Enterprise edition (optional).
yarn add ag-charts-enterprise

Use the Charts API

You can then use the Charts API to create and update chart instances:

import { AgCharts } from 'ag-charts-vue3';

const MyChart = {
    template: `<ag-charts :options="options"></ag-charts>`,
    components: { 'ag-charts': AgCharts },
    /* ... */
};

Enabling Enterprise Features

Enterprise Charts features are enabled by loading the ag-charts-enterprise module and setting your license key before using the Charts API.

import { AgCharts } from 'ag-charts-enterprise';

AgCharts.setLicenseKey('your license key');

const agCharts = require('ag-charts-enterprise');

agCharts.AgCharts.setLicenseKey('your license key');

Without a Bundled Project

We don't support pre-built bundles for Vue - see the JavaScript documentation for more information.