React Data GridInstall Integrated Charts

This section shows how to install Integrated Charts using Modules or Packages.

Integrated Charts Module

To reduce bundle sizes in applications that do not require charts, AG Grid provides a dedicated charts AG Grid Module, free from third-party library dependencies. This approach is recommended for most applications.

The Integrated Enterprise Charts module, which includes AG Charts Enterprise, can be imported as follows:

// Import minimal modules required for charts
import { ModuleRegistry, ClientSideRowModelModule } from "ag-grid-community";
import { IntegratedChartsModule } from "ag-grid-enterprise";
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    IntegratedChartsModule.with(AgChartsEnterpriseModule)
]);

Integrated Charts Package

Applications that are not using ES6 Modules and are instead using the UMD bundled version of AG Grid Enterprise and AG Charts Enterprise can be setup as follows:

npm install --save ag-grid-enterprise ag-charts-enterprise

Then in your code you can import the charts module as shown below:

// import the AG Grid Enteprise package - this includes all enterprise features and performs all 
// required registration
import  "ag-grid-enterprise";
import  "ag-charts-enterprise";

// rest of your code 

Next Up

Continue to the next section to learn about User Created Charts.