React 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 before a chart can use it, either globally via ModuleRegistry or per chart when that chart is created. These approaches can be mixed — register some modules globally and others per chart.

For simplicity, register modules globally before creating any charts.

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 Globally Copy Link

Add the ModuleRegistry.registerModules call near the bootstrap of your application — this is the simplest approach, though registering additional modules later is also supported (see the idempotent note above).

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

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

ModuleRegistry.registerModules([
  CategoryAxisModule,
  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 />);

export function getData() {
  return [
    { quarter: "Q1 2023", revenue: 21.4 },
    { quarter: "Q2 2023", revenue: 22.1 },
    { quarter: "Q3 2023", revenue: 23.9 },
    { quarter: "Q4 2023", revenue: 25.2 },
    { quarter: "Q1 2024", revenue: 24.6 },
    { quarter: "Q2 2024", revenue: 26.3 },
  ];
}

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

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

Registering per Chart Copy Link

Modules can also be registered for a single chart instance. This is useful when different charts on a page use different features, or when an application prefers not to rely on a global registry.

Pass the modules through the modules prop:

<AgCharts options={options} modules={[LineSeriesModule, NumberAxisModule, CategoryAxisModule]} />;

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

ModuleRegistry.registerModules([CategoryAxisModule, NumberAxisModule]);

const LineChart = () => {
  const [lineOptions, setLineOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Line Series Module",
    },
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "revenue",
        yName: "Revenue",
      },
    ],
    axes: {
      x: {
        type: "category",
      },
      y: {
        type: "number",
      },
    },
  });

  return (
    <AgCharts
      options={lineOptions}
      modules={[LineSeriesModule]}
      style={{ flex: "1" }}
    />
  );
};

const BarChart = () => {
  const [barOptions, setBarOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Bar Series Module",
    },
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "revenue",
        yName: "Revenue",
      },
    ],
    axes: {
      x: {
        type: "category",
      },
      y: {
        type: "number",
      },
    },
  });

  return (
    <AgCharts
      options={barOptions}
      modules={[BarSeriesModule]}
      style={{ flex: "1" }}
    />
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <div style={{ display: "flex", gap: "8px", height: "100%" }}>
    <LineChart />
    <BarChart />
  </div>,
);

export function getData() {
  return [
    { quarter: "Q1 2023", revenue: 21.4 },
    { quarter: "Q2 2023", revenue: 22.1 },
    { quarter: "Q3 2023", revenue: 23.9 },
    { quarter: "Q4 2023", revenue: 25.2 },
    { quarter: "Q1 2024", revenue: 24.6 },
    { quarter: "Q2 2024", revenue: 26.3 },
  ];
}

In this example:

• The CategoryAxisModule and NumberAxisModule are registered globally, so they are available to both charts.
• The LineSeriesModule and BarSeriesModule are registered per chart, so each chart only has the series it needs.
• Per-chart modules stay registered for the lifetime of that chart, including across update calls, and are not visible to other charts.
• The modules are read once, when the chart is created. Changing them afterwards, including through a framework property, has no effect on an existing chart.

Checking Registered Modules Copy Link

Use chart.isModuleRegistered to check whether a module is available to a chart, whether it was registered globally or passed to the chart.

const chart = AgCharts.create(options);

const isRegistered = chart.isModuleRegistered('LineSeriesModule');

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.