JavaScript Data GridIntegrated ChartsEnterprise
This section introduces the grid's integrated charting functionality, which allows users to chart directly inside the grid and supports applications that want to create pre-defined charts.
The charting functionality is deeply integrated with the grid. This integration gives users a seamless charting experience while keeping the coding required by developers to a minimum.
We are not aware of any other Datagrid that provides such integration. Other companies may provide a grid library and / or a charting library, but it's up to the developer to tie the two together.
The following sections cover the alternative ways grid data can be charted using Integrated Charts:
- User Created Charts: A user creates a chart using the grid's UI by selecting a range of cells or entering pivot mode and then creating a chart via the context menu.
- Application Created Charts: The application requests the grid to create a chart through the grid's charting API.
To minimise bundle sizes for applications that do not require charting, charts are contained in a separate AG Grid Module, and has been built from the ground up with zero dependencies on any third party libraries.
The Charts module can be imported as follows:
// Import minimal modules required for charts
import { ModuleRegistry } from "@ag-grid-community/core";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import { GridChartsModule } from "@ag-grid-enterprise/charts";
ModuleRegistry.registerModules([ClientSideRowModelModule, GridChartsModule]);If you are not using ES6 Modules and are instead using the bundled version of AG Grid Enterprise, note that ag-grid-enterprise.js already contains the charting module.
Continue to the next section to learn about the: User Created Charts.