Vue ChartsModule Registry

Reduce bundle size by importing only the AG Chart modules required by your application, with treeshaking support.

Overview Copy Link

AG Chart Modules allow you to reduce the bundle size of your application by only including the modules you want to use. Use the Module Selector tool below to select the modules you want to use and generate the correct module registration code.

Alternatively, if you are not concerned about bundle size and you want access to every feature in Community / Enterprise, use Bundles to include all Community / Enterprise modules.

Registering AG Charts Modules Copy Link

Every module must be registered with the global ModuleRegistry before calling any AG Charts APIs such as AgCharts.create.

Add your registration call near the bootstrap of your application so it runs exactly once.

Importing the Module Registry Copy Link

The Module Registry can be imported from either ag-charts-enterprise or ag-charts-community, but the registry class itself is shared and only one import is required.

// For Enterprise users:
import { AgCharts, ModuleRegistry } from 'ag-charts-enterprise';

// For Community users:
import { AgCharts, ModuleRegistry } from 'ag-charts-community';

Importing Modules Copy Link

For Enterprise users, all modules (including Community ones) are exported by ag-charts-enterprise, allowing you to import everything from a single package.

import {
    AllCommunityModule,
    AnimationModule,
    HeatmapSeriesModule,
    ModuleRegistry,
} from 'ag-charts-enterprise';

ModuleRegistry.registerModules([AllCommunityModule, HeatmapSeriesModule, AnimationModule]);

Mixing imports from ag-charts-community is also supported if required.

import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';
import { AnimationModule, HeatmapSeriesModule } from 'ag-charts-enterprise';

ModuleRegistry.registerModules([AllCommunityModule, HeatmapSeriesModule, AnimationModule]);

Registering Modules Copy Link

The example below registers the minimum set of Community modules required for a cartesian line chart:

import { AgCharts, ModuleRegistry } from 'ag-charts-community';
import { CategoryAxisModule, LineSeriesModule, NumberAxisModule } from 'ag-charts-community';

ModuleRegistry.registerModules([LineSeriesModule, NumberAxisModule, CategoryAxisModule]);

Bundles Copy Link

• The AllCommunityModule bundle contains all of the modules available in AG Charts Community.
• The AllEnterpriseModule bundle contains all of the modules available in both Community and Enterprise.

Registering a bundle is identical to manual registration:

import { AllEnterpriseModule, ModuleRegistry } from 'ag-charts-enterprise';

ModuleRegistry.registerModules([AllEnterpriseModule]);

Selecting Modules Copy Link

To work out which modules are required, select the features of the chart that you are using below and copy the generated registration snippet.