Integrated Charts

Enterprise Feature: Integrated Charts requires ag-grid-enterprise, ag-charts-enterprise (or ag-charts-community), and a valid license key.

Integrated Charts allows you to create interactive, customizable charts directly from your grid data using AG Charts, seamlessly integrating charting capabilities with your data grid.

Installation

Install Packages

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

Import and Register Modules

import { ModuleRegistry } from 'ag-grid-community';
import { IntegratedChartsModule } from 'ag-grid-enterprise';
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

// Register charts module with AG Charts
ModuleRegistry.registerModules([
  IntegratedChartsModule.with(AgChartsEnterpriseModule)
]);

Set License Keys

import { LicenseManager } from 'ag-grid-enterprise';

LicenseManager.setLicenseKey('YOUR_AG_GRID_LICENSE_KEY');
// AG Charts license is automatically managed

The IntegratedChartsModule.with() method integrates AG Charts with AG Grid. Source: /packages/ag-grid-enterprise/src/charts/integratedChartsModule.ts:111-158

Basic Chart Creation

Enable charts and create them from selected ranges:

import { GridOptions } from 'ag-grid-community';

const gridOptions: GridOptions = {
  columnDefs: [
    { field: 'country' },
    { field: 'gold', chartDataType: 'series' },
    { field: 'silver', chartDataType: 'series' },
    { field: 'bronze', chartDataType: 'series' }
  ],
  rowData: olympicData,
  
  // Enable charts
  enableCharts: true,
  enableRangeSelection: true,
  
  // Chart toolbar
  popupParent: document.body
};

Chart API

Programmatically create and manage charts using the Grid API:

Create Range Chart

Create a chart from a cell range:

import { GridApi, CreateRangeChartParams } from 'ag-grid-community';

const api: GridApi = gridRef.current.api;

// Create a column chart
const chartRef = api.createRangeChart({
  chartType: 'groupedColumn',
  cellRange: {
    rowStartIndex: 0,
    rowEndIndex: 10,
    columns: ['country', 'gold', 'silver', 'bronze']
  },
  chartThemeName: 'ag-default',
  chartContainer: document.querySelector('#myChartContainer'),
  suppressChartRanges: false,
  aggFunc: 'sum'
});

Source: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:39-41

Create Pivot Chart

Create a chart from pivot data:

import { CreatePivotChartParams } from 'ag-grid-community';

const chartRef = api.createPivotChart({
  chartType: 'pie',
  chartThemeName: 'ag-vivid',
  chartContainer: document.querySelector('#pivotChart')
});

Source: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:43-45

Create Cross-Filter Chart

Create a chart with cross-filtering enabled:

import { CreateCrossFilterChartParams } from 'ag-grid-community';

const chartRef = api.createCrossFilterChart({
  chartType: 'groupedBar',
  cellRange: {
    columns: ['country', 'gold']
  },
  suppressChartRanges: true
});

Cross-filtering allows clicking chart elements to filter grid data. Source: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:47-52

Chart Management

// Get all chart models
const chartModels = api.getChartModels();
if (chartModels) {
  chartModels.forEach(model => {
    console.log('Chart ID:', model.chartId);
    console.log('Chart Type:', model.chartType);
  });
}

// Get specific chart reference
const chartRef = api.getChartRef('chartId');
if (chartRef) {
  console.log('Chart instance:', chartRef.chart);
  console.log('Chart container:', chartRef.chartElement);
}

// Update existing chart
api.updateChart({
  chartId: 'chartId',
  chartType: 'line',  // Change chart type
  chartThemeName: 'ag-vivid-dark'
});

// Destroy chart
api.restoreChart(chartModel, containerElement);

Sources:

getChartModels: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:15-17
getChartRef: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:19-21
updateChart: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:54-56

Available Chart Types

AG Grid supports numerous chart types through AG Charts integration:

Cartesian Charts

Column Charts

Grouped Column
Stacked Column
100% Stacked Column

Bar Charts

Grouped Bar
Stacked Bar
100% Stacked Bar

Line Charts

Line
Stacked Line
100% Stacked Line

Area Charts

Area
Stacked Area
100% Stacked Area

Scatter Charts

Scatter
Bubble

Specialized

Histogram
Waterfall
Heatmap

Statistical Charts (Enterprise)

Range Bar
Range Area
Box Plot

Hierarchical Charts (Enterprise)

Treemap
Sunburst

Polar Charts (Enterprise)

Pie
Donut
Radar Line
Radar Area
Radial Column
Radial Bar
Nightingale

Chart Configuration

Chart Themes

AG Grid provides several built-in chart themes:

const gridOptions: GridOptions = {
  enableCharts: true,
  chartThemes: [
    'ag-default',
    'ag-default-dark',
    'ag-vivid',
    'ag-vivid-dark',
    'ag-material',
    'ag-material-dark'
  ],
  chartThemeOverrides: {
    common: {
      title: {
        enabled: true,
        fontSize: 20,
        fontFamily: 'Arial, sans-serif'
      },
      legend: {
        enabled: true,
        position: 'bottom'
      }
    },
    column: {
      series: {
        strokeWidth: 2,
        fillOpacity: 0.8
      }
    }
  }
};

Custom Chart Settings

const chartRef = api.createRangeChart({
  chartType: 'groupedColumn',
  cellRange: {
    columns: ['country', 'gold', 'silver']
  },
  chartThemeName: 'ag-vivid',
  chartThemeOverrides: {
    common: {
      padding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      },
      background: {
        fill: '#ffffff'
      },
      title: {
        enabled: true,
        text: 'Medal Count by Country',
        fontSize: 18
      },
      subtitle: {
        enabled: true,
        text: 'Olympic Games Results'
      }
    },
    column: {
      series: {
        label: {
          enabled: true,
          fontSize: 12
        },
        tooltip: {
          enabled: true
        }
      }
    }
  }
});

Chart Tool Panel

Enable the chart tool panel for interactive customization:

const gridOptions: GridOptions = {
  enableCharts: true,
  
  // Chart tool panel configuration
  chartToolPanelsDef: {
    defaultToolPanel: 'settings',
    panels: [
      'settings',  // Chart settings
      'data',      // Data configuration
      'format'     // Formatting options
    ]
  }
};

// Programmatically open chart tool panel
api.openChartToolPanel({
  chartId: 'chartId',
  panel: 'settings'
});

// Close chart tool panel
api.closeChartToolPanel({
  chartId: 'chartId'
});

Sources:

openChartToolPanel: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:31-33
closeChartToolPanel: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:35-37

Chart Download

Download charts as images:

// Download chart as PNG
api.downloadChart({
  chartId: 'chartId',
  fileName: 'my-chart.png',
  fileFormat: 'png'  // 'png' or 'jpg'
});

// Get chart as data URL
const dataUrl = api.getChartImageDataURL({
  chartId: 'chartId',
  fileFormat: 'png'
});

if (dataUrl) {
  // Use the data URL (e.g., display in img tag)
  const img = document.createElement('img');
  img.src = dataUrl;
  document.body.appendChild(img);
}

Sources:

downloadChart: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:27-29
getChartImageDataURL: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:23-25

Customize the chart context menu:

const gridOptions: GridOptions = {
  enableCharts: true,
  
  // Customize chart menu items
  getChartToolbarItems: (params) => {
    return [
      'chartDownload',
      'chartData',
      'chartFormat',
      'chartLink',
      'chartUnlink',
      'chartSettings'
    ];
  }
};

Cross-Filtering

Enable interactive filtering between charts and grid:

const gridOptions: GridOptions = {
  enableCharts: true,
  enableRangeSelection: true,
  
  onGridReady: (params) => {
    // Create chart with cross-filtering
    params.api.createCrossFilterChart({
      chartType: 'groupedColumn',
      cellRange: {
        columns: ['country', 'gold']
      },
      suppressChartRanges: false
    });
  },
  
  // Cross-filter event handling
  onRangeSelectionChanged: (event) => {
    console.log('Range selection changed:', event);
  }
};

Cross-filtering is managed by ChartCrossFilterService. Source: /packages/ag-grid-enterprise/src/charts/integratedChartsModule.ts:149

Advanced Features

Chart Linking

Link charts to grid ranges for automatic updates:

const chartRef = api.createRangeChart({
  chartType: 'line',
  cellRange: {
    columns: ['date', 'value']
  },
  suppressChartRanges: false,  // Show chart ranges in grid
  unlinkChart: false           // Keep chart linked to data
});

// Unlink chart programmatically
if (chartRef) {
  chartRef.chartProxy.unlinkChart();
}

Chart State Persistence

Save and restore chart state:

// Get chart model to save
const chartModels = api.getChartModels();
const serializedCharts = JSON.stringify(chartModels);
localStorage.setItem('charts', serializedCharts);

// Restore charts
const savedCharts = JSON.parse(localStorage.getItem('charts'));
savedCharts?.forEach(chartModel => {
  api.restoreChart(chartModel);
});

Source: /packages/ag-grid-enterprise/src/charts/chartsApi.ts:58-64

Custom Chart Containers

Render charts in custom containers:

const chartRef = api.createRangeChart({
  chartType: 'pie',
  cellRange: {
    columns: ['country', 'gold']
  },
  chartContainer: document.querySelector('#customContainer'),
  suppressChartRanges: true
});

Chart with Pivot Data

Combine pivot mode with charts:

const gridOptions: GridOptions = {
  pivotMode: true,
  enableCharts: true,
  
  columnDefs: [
    { field: 'country', rowGroup: true },
    { field: 'year', pivot: true },
    { field: 'gold', aggFunc: 'sum' }
  ],
  
  onGridReady: (params) => {
    // Create chart from pivoted data
    params.api.createPivotChart({
      chartType: 'groupedColumn'
    });
  }
};

Performance Tips

Limit Data Points

Filter data before charting to reduce the number of points rendered

Use Aggregation

Aggregate data when working with large datasets

Suppress Chart Ranges

Set suppressChartRanges: true to hide chart range highlights

Custom Containers

Render charts in separate containers to improve grid performance

Troubleshooting

Charts Not Appearing

Check Module Registration

Ensure IntegratedChartsModule.with() is called:

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

Enable Charts

Set enableCharts: true in grid options

Enable Range Selection

Set enableRangeSelection: true for manual chart creation

Verify License

Check that valid license keys are set for both AG Grid and AG Charts

Ensure popup parent is set:

const gridOptions: GridOptions = {
  popupParent: document.body  // Required for chart menus
};

Next Steps

AG Charts Docs

Explore full AG Charts documentation for advanced customization

Pivot Mode

Create pivot charts from aggregated data

Range Selection

Learn about range selection for chart creation

Excel Export

Export charts to Excel files

Get Started

Framework Integration

Core Concepts

Features

Enterprise Features

Customization

Themes

​Installation

​Basic Chart Creation

​Chart API

​Create Range Chart

​Create Pivot Chart

​Create Cross-Filter Chart

​Chart Management

​Available Chart Types

​Cartesian Charts

Column Charts

Bar Charts

Line Charts

Area Charts

Scatter Charts

Specialized

​Statistical Charts (Enterprise)

​Hierarchical Charts (Enterprise)

​Polar Charts (Enterprise)

​Chart Configuration

​Chart Themes

​Custom Chart Settings

​Chart Tool Panel

​Chart Download

​Chart Context Menu

​Cross-Filtering

​Advanced Features

​Chart Linking

​Chart State Persistence

​Custom Chart Containers

​Chart with Pivot Data

​Performance Tips

Limit Data Points

Use Aggregation

Suppress Chart Ranges

Custom Containers

​Troubleshooting

​Charts Not Appearing

​Chart Menu Not Working

​Next Steps

AG Charts Docs

Pivot Mode

Range Selection

Excel Export

Installation

Basic Chart Creation

Chart API

Create Range Chart

Create Pivot Chart

Create Cross-Filter Chart

Chart Management

Available Chart Types

Cartesian Charts

Statistical Charts (Enterprise)

Hierarchical Charts (Enterprise)

Polar Charts (Enterprise)

Chart Configuration

Chart Themes

Custom Chart Settings

Chart Tool Panel

Chart Download

Chart Context Menu

Cross-Filtering

Advanced Features

Chart Linking

Chart State Persistence

Custom Chart Containers

Chart with Pivot Data

Performance Tips

Troubleshooting

Charts Not Appearing

Chart Menu Not Working

Next Steps