React ChartsModule Registry

AG Charts ships as a set of modules so you can pick only the chart types, axes and features your application needs. Every module must be registered with the global ModuleRegistry before calling any AG Charts APIs such as AgCharts.create.

Importing the Module Registry Copy Link

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

Enterprise projects can import the same registry from ag-charts-enterprise, but the registry class itself is shared; you only need one import.

Register modules once Copy Link

Add your registration call near the bootstrap of your application so it runs exactly once. The example below registers the minimum set of community modules required for a cartesian line chart:

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

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

AgCharts.create({
    container: document.getElementById('myChart'),
    data,
    series: [{ type: 'line', xKey: 'quarter', yKey: 'revenue' }],
});

Run the example below to see the registration pattern in action.

Mixing community and enterprise modules Copy Link

Enterprise builds register community modules the same way, then add the premium modules they require:

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

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

Module bundles Copy Link

Use the provided bundles when you want all modules of a given edition:

• AllCommunityModules – every community chart, axis, preset and plugin.
• AllEnterpriseModules – enterprise-only modules.
• AllCommunityAndEnterpriseModules – convenience bundle that merges both sets.

Registering a bundle is identical to manual registration:

import { AllCommunityModules, ModuleRegistry } from 'ag-charts-community';

ModuleRegistry.registerModules(AllCommunityModules);

Framework wrappers Copy Link

React, Angular and Vue wrappers do not register modules automatically. Import the registry from the relevant package and register modules before mounting framework components. For example, in React:

import { ModuleRegistry, AllCommunityModules } from 'ag-charts-community';
import { AgCharts } from 'ag-charts-react';

ModuleRegistry.registerModules(AllCommunityModules);

export function RevenueChart(props) {
    return <AgCharts options={props.options} />;
}

Using AG Charts from a CDN Copy Link

When using the UMD bundles the agCharts global exposes the registry and modules, and all bundled modules register automatically as soon as the script loads:

<script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/umd/ag-charts-community.js"></script>
<script>
    const { AgCharts } = agCharts;

    AgCharts.create({
        container: document.getElementById('myChart'),
        data,
        series: [{ type: 'bar', xKey: 'category', yKey: 'value' }],
    });
</script>

Enterprise scripts expose the same agCharts global, so you continue to access APIs via agCharts.AgCharts (or the destructured AgCharts import shown above).