AG Charts is available for download from NPM & Yarn. Once installed, you just need to import the package.
Installation Copy Link
Install the ag-charts-vue3 package, which also installs ag-charts-community:
npm install ag-charts-vue3
yarn add ag-charts-vue3
To use AG Charts Enterprise features, install the ag-charts-enterprise package:
npm install ag-charts-enterprise
yarn add ag-charts-enterprise
You can test AG Charts Enterprise locally without a licence. To test in production, access support and remove the watermark & console warnings, request a trial licence.
Registering Modules Copy Link
Register the AllCommunityModule to access all Community features:
import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';
// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
Register the AllEnterpriseModule to access all Community and Enterprise features:
import { AllEnterpriseModule, ModuleRegistry } from 'ag-charts-enterprise';
// Register all Community and Enterprise features
ModuleRegistry.registerModules([AllEnterpriseModule]);
To minimize bundle size, only register the modules you want to use. See the Selecting Modules docs for more information.
Importing Copy Link
Import the AgCharts component from the ag-charts-vue3 package:
import { AgCharts } from 'ag-charts-vue3';
To use AG Charts Enterprise features, import the ag-charts-enterprise package:
import 'ag-charts-enterprise';
See the Installing Enterprise Licence Key docs for more information on how to install your Enterprise or Trial licence key.
Accessing AG Charts Copy Link
To use AG Charts in your Vue application, return the ag-charts component with your chart options:
<template>
<!-- The AG Charts component with chartsOptions as an attribute -->
<ag-charts :options="options"> </ag-charts>
</template>
<script>
setup() {
return {
ref<AgChartOptions>({/*...*/}),
};
},
</script>