---
title: "Module Registry"
framework: react
version: "14.1.0"
---

# Module Registry

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

## Overview

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](#selecting-modules) 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](#bundles) to include all Community / Enterprise modules.

## Registering AG Charts Modules

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

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.

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

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

### Importing Modules

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

```js
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.

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

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

### Registering Modules

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

#### Minimal Line Chart Registration

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Registered Line Chart",
    },
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "revenue",
        yName: "Revenue",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Quarter",
        },
      },
      y: {
        type: "number",
        title: {
          text: "Revenue (USD Millions)",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Minimal Line Chart Registration](https://www.ag-grid.com/charts/reactFunctionalTs/module-registry/examples/minimal-line-registration)

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

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

> **Note**
>
> `ModuleRegistry.registerModules` is idempotent: registering the same module again is ignored unless a newer version is detected.

## Bundles

- 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:

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

ModuleRegistry.registerModules([AllEnterpriseModule]);
```

## Selecting Modules

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

[Select modules interactively](https://www.ag-grid.com/charts/react/module-registry/#selecting-modules) to generate the registration code, or work from the full module list below.

| Feature | Module | Enterprise |
| --- | --- | --- |
| [Category Axis](https://www.ag-grid.com/charts/react/axes-types/#category-axis) | `CategoryAxisModule` |  |
| [Grouped Category Axis](https://www.ag-grid.com/charts/react/axes-types/#grouped-category-axis) | `GroupedCategoryAxisModule` |  |
| [Number Axis](https://www.ag-grid.com/charts/react/axes-types/#number-axis) | `NumberAxisModule` |  |
| [Log Axis](https://www.ag-grid.com/charts/react/axes-types/#log-axis) | `LogAxisModule` |  |
| [Time Axis](https://www.ag-grid.com/charts/react/axes-time/) | `TimeAxisModule` |  |
| [Unit Time Axis](https://www.ag-grid.com/charts/react/axes-time/#unit-time-axis) | `UnitTimeAxisModule` |  |
| [Ordinal Time Axis](https://www.ag-grid.com/charts/react/axes-time/) | `OrdinalTimeAxisModule` | Enterprise |
| [Angle Category Axis](https://www.ag-grid.com/charts/react/radar-line-series/#customisation) | `AngleCategoryAxisModule` | Enterprise |
| [Angle Number Axis](https://www.ag-grid.com/charts/react/radar-line-series/#customisation) | `AngleNumberAxisModule` | Enterprise |
| [Radius Category Axis](https://www.ag-grid.com/charts/react/radar-line-series/#customisation) | `RadiusCategoryAxisModule` | Enterprise |
| [Radius Number Axis](https://www.ag-grid.com/charts/react/radar-line-series/#customisation) | `RadiusNumberAxisModule` | Enterprise |
| [Bar Series](https://www.ag-grid.com/charts/react/bar-series/) | `BarSeriesModule` |  |
| [Line Series](https://www.ag-grid.com/charts/react/line-series/) | `LineSeriesModule` |  |
| [Area Series](https://www.ag-grid.com/charts/react/area-series/) | `AreaSeriesModule` |  |
| [Scatter Series](https://www.ag-grid.com/charts/react/scatter-series/) | `ScatterSeriesModule` |  |
| [Bubble Series](https://www.ag-grid.com/charts/react/bubble-series/) | `BubbleSeriesModule` |  |
| [Pie Series](https://www.ag-grid.com/charts/react/pie-series/) | `PieSeriesModule` |  |
| [Donut Series](https://www.ag-grid.com/charts/react/donut-series/) | `DonutSeriesModule` |  |
| [Box Plot Series](https://www.ag-grid.com/charts/react/box-plot-series/) | `BoxPlotSeriesModule` | Enterprise |
| [Candlestick Series](https://www.ag-grid.com/charts/react/candlestick-series/) | `CandlestickSeriesModule` | Enterprise |
| [OHLC Series](https://www.ag-grid.com/charts/react/ohlc-series/) | `OhlcSeriesModule` | Enterprise |
| [Heatmap Series](https://www.ag-grid.com/charts/react/heatmap-series/) | `HeatmapSeriesModule` | Enterprise |
| [Histogram Series](https://www.ag-grid.com/charts/react/histogram-series/) | `HistogramSeriesModule` | Enterprise |
| [Nightingale Series](https://www.ag-grid.com/charts/react/nightingale-series/) | `NightingaleSeriesModule` | Enterprise |
| [Radar Area Series](https://www.ag-grid.com/charts/react/radar-area-series/) | `RadarAreaSeriesModule` | Enterprise |
| [Radar Line Series](https://www.ag-grid.com/charts/react/radar-line-series/) | `RadarLineSeriesModule` | Enterprise |
| [Radial Bar Series](https://www.ag-grid.com/charts/react/radial-bar-series/) | `RadialBarSeriesModule` | Enterprise |
| [Radial Column Series](https://www.ag-grid.com/charts/react/radial-column-series/) | `RadialColumnSeriesModule` | Enterprise |
| [Range Area Series](https://www.ag-grid.com/charts/react/range-area-series/) | `RangeAreaSeriesModule` | Enterprise |
| [Range Bar Series](https://www.ag-grid.com/charts/react/range-bar-series/) | `RangeBarSeriesModule` | Enterprise |
| [Waterfall Series](https://www.ag-grid.com/charts/react/waterfall-series/) | `WaterfallSeriesModule` | Enterprise |
| [Sunburst Series](https://www.ag-grid.com/charts/react/sunburst-series/) | `SunburstSeriesModule` | Enterprise |
| [Treemap Series](https://www.ag-grid.com/charts/react/treemap-series/) | `TreemapSeriesModule` | Enterprise |
| [Sankey Series](https://www.ag-grid.com/charts/react/sankey-series/) | `SankeySeriesModule` | Enterprise |
| [Chord Series](https://www.ag-grid.com/charts/react/chord-series/) | `ChordSeriesModule` | Enterprise |
| [Funnel Series](https://www.ag-grid.com/charts/react/funnel-series/) | `FunnelSeriesModule` | Enterprise |
| [Cone Funnel Series](https://www.ag-grid.com/charts/react/cone-funnel-series/) | `ConeFunnelSeriesModule` | Enterprise |
| [Pyramid Series](https://www.ag-grid.com/charts/react/pyramid-series/) | `PyramidSeriesModule` | Enterprise |
| [Financial Charts](https://www.ag-grid.com/charts/react/financial-charts/) | `FinancialChartModule` | Enterprise |
| [Org Chart](https://www.ag-grid.com/charts/react/org-chart/) | `OrganizationSeriesModule` | Enterprise |
| [Map Shape Series](https://www.ag-grid.com/charts/react/map-shapes/) | `MapShapeSeriesModule` | Enterprise |
| [Map Shape Background](https://www.ag-grid.com/charts/react/map-shapes/) | `MapShapeBackgroundSeriesModule` | Enterprise |
| [Map Line Series](https://www.ag-grid.com/charts/react/map-lines/) | `MapLineSeriesModule` | Enterprise |
| [Map Line Background](https://www.ag-grid.com/charts/react/map-lines/#background-lines) | `MapLineBackgroundSeriesModule` | Enterprise |
| [Map Marker Series](https://www.ag-grid.com/charts/react/map-markers/) | `MapMarkerSeriesModule` | Enterprise |
| [Radial Gauge](https://www.ag-grid.com/charts/react/radial-gauge/) | `RadialGaugeModule` | Enterprise |
| [Linear Gauge](https://www.ag-grid.com/charts/react/linear-gauge/) | `LinearGaugeModule` | Enterprise |
| [Cross Lines](https://www.ag-grid.com/charts/react/axes-cross-lines/) | `CrossLinesModule` |  |
| [Legend](https://www.ag-grid.com/charts/react/legend/) | `LegendModule` |  |
| [Annotations](https://www.ag-grid.com/charts/react/annotations/) | `AnnotationsModule` | Enterprise |
| [Error Bars](https://www.ag-grid.com/charts/react/error-bars/) | `ErrorBarsModule` | Enterprise |
| [Gradient Legend](https://www.ag-grid.com/charts/react/heatmap-series/#gradient-legend) | `GradientLegendModule` | Enterprise |
| [Polar Cross Lines](https://www.ag-grid.com/charts/react/axes-cross-lines/#polar-axes-cross-lines) | `PolarCrossLinesModule` | Enterprise |
| [Localisation](https://www.ag-grid.com/charts/react/localisation/) | `LocaleModule` |  |
| [Animation](https://www.ag-grid.com/charts/react/animation/) | `AnimationModule` | Enterprise |
| [Band Highlight](https://www.ag-grid.com/charts/react/axes-crosshairs/#band-highlight) | `BandHighlightModule` | Enterprise |
| [Context Menu](https://www.ag-grid.com/charts/react/context-menu/) | `ContextMenuModule` | Enterprise |
| [Crosshair](https://www.ag-grid.com/charts/react/axes-crosshairs/) | `CrosshairModule` | Enterprise |
| [Data Selection](https://www.ag-grid.com/charts/react/selection/) | `SelectionModule` | Enterprise |
| [Flash On Update](https://www.ag-grid.com/charts/react/flash-on-update/) | `FlashOnUpdateModule` | Enterprise |
| [Navigator](https://www.ag-grid.com/charts/react/navigator/) | `NavigatorModule` | Enterprise |
| [Range Controls](https://www.ag-grid.com/charts/react/range-controls/) | `RangesModule` | Enterprise |
| [Scrollbar](https://www.ag-grid.com/charts/react/scrollbar/) | `ScrollbarModule` | Enterprise |
| [Synchronization](https://www.ag-grid.com/charts/react/sync/) | `SyncModule` | Enterprise |
| [Zoom](https://www.ag-grid.com/charts/react/zoom/) | `ZoomModule` | Enterprise |