Integrated Charts Example

Integrated Charts allow you to create interactive visualizations directly from your grid data. This is an Enterprise feature that requires AG Charts Enterprise.

Overview

AG Grid’s Integrated Charts feature provides:

Range-based charts - Create charts from selected cell ranges
Multiple chart types - Bar, column, line, pie, area, scatter, and more
Interactive editing - Modify chart configuration through built-in panels
Dynamic updates - Charts update automatically when grid data changes
Export capabilities - Download charts as images

Basic Charts Implementation

import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
import type { 
    FirstDataRenderedEvent, 
    GridApi, 
    GridOptions 
} from 'ag-grid-community';
import { 
    ClientSideRowModelModule, 
    ModuleRegistry, 
    ValidationModule, 
    createGrid 
} from 'ag-grid-community';
import { 
    ColumnMenuModule, 
    ContextMenuModule, 
    IntegratedChartsModule, 
    RowGroupingModule 
} from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    IntegratedChartsModule.with(AgChartsEnterpriseModule),
    ColumnMenuModule,
    ContextMenuModule,
    RowGroupingModule,
    ValidationModule,
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
    columnDefs: [
        // Different ways to define 'categories'
        { field: 'athlete', width: 150, chartDataType: 'category' },
        { field: 'age', chartDataType: 'category', sort: 'asc' },
        { field: 'sport' }, // Inferred as category by grid

        // Excludes year from charts
        { field: 'year', chartDataType: 'excluded' },

        // Different ways to define 'series'
        { field: 'gold', chartDataType: 'series' },
        { field: 'silver', chartDataType: 'series' },
        { field: 'bronze' }, // Inferred as series by grid
    ],
    defaultColDef: {
        flex: 1,
    },
    cellSelection: true,
    popupParent: document.body,
    enableCharts: true,
    chartThemeOverrides: {
        common: {
            title: {
                enabled: true,
                text: 'Medals by Age',
            },
        },
        bar: {
            axes: {
                category: {
                    label: {
                        rotation: 0,
                    },
                },
            },
        },
    },
    onFirstDataRendered: onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
    params.api.createRangeChart({
        chartContainer: document.querySelector('#myChart') as HTMLElement,
        cellRange: {
            rowStartIndex: 0,
            rowEndIndex: 79,
            columns: ['age', 'gold', 'silver', 'bronze'],
        },
        chartType: 'groupedColumn',
        aggFunc: 'sum',
    });
}

// Setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
    const gridDiv = document.querySelector<HTMLElement>('#myGrid')!;
    gridApi = createGrid(gridDiv, gridOptions);

    fetch('https://www.ag-grid.com/example-assets/wide-spread-of-sports.json')
        .then((response) => response.json())
        .then(function (data) {
            gridApi!.setGridOption('rowData', data);
        });
});

Key Configuration

Enable Charts

Set enableCharts to true in grid options:

const gridOptions: GridOptions = {
    enableCharts: true,
    cellSelection: true,  // Required for user-created charts
    // ... other options
};

Chart Data Types

Control how columns are used in charts:

columnDefs: [
    // Category - used for X-axis
    { field: 'athlete', chartDataType: 'category' },
    { field: 'age', chartDataType: 'category' },
    
    // Series - used for Y-axis (values)
    { field: 'gold', chartDataType: 'series' },
    { field: 'silver', chartDataType: 'series' },
    
    // Excluded - not available for charting
    { field: 'year', chartDataType: 'excluded' },
    
    // Auto-detected based on data type
    { field: 'sport' },  // String -> category
    { field: 'bronze' }, // Number -> series
]

If chartDataType is not specified, AG Grid automatically determines the type based on the data.

Creating Charts

Programmatically Create Charts

Use the Grid API to create charts:

function onFirstDataRendered(params: FirstDataRenderedEvent) {
    params.api.createRangeChart({
        chartContainer: document.querySelector('#myChart') as HTMLElement,
        cellRange: {
            rowStartIndex: 0,
            rowEndIndex: 79,
            columns: ['age', 'gold', 'silver', 'bronze'],
        },
        chartType: 'groupedColumn',
        aggFunc: 'sum',
    });
}

User-Created Charts

Users can create charts by:

Selecting a range of cells
Right-clicking and choosing “Chart Range”
Selecting the desired chart type from the menu

Enable cell selection

cellSelection: true

Select cells in the grid

Click and drag to select a range of cells

Open context menu

Right-click on the selection

Create chart

Choose “Chart Range” and select a chart type

Chart Types

AG Grid supports numerous chart types:

Column Charts
Bar Charts
Line & Area
Other Types

groupedColumn - Grouped vertical bars
stackedColumn - Stacked vertical bars
normalizedColumn - 100% stacked vertical bars

params.api.createRangeChart({
    chartType: 'groupedColumn',
    // ... other config
});

groupedBar - Grouped horizontal bars
stackedBar - Stacked horizontal bars
normalizedBar - 100% stacked horizontal bars

params.api.createRangeChart({
    chartType: 'groupedBar',
    // ... other config
});

line - Simple line chart
area - Filled area chart
stackedArea - Stacked areas
normalizedArea - 100% stacked areas

params.api.createRangeChart({
    chartType: 'line',
    // ... other config
});

pie - Pie chart
donut - Donut chart
scatter - Scatter plot
bubble - Bubble chart
histogram - Histogram

params.api.createRangeChart({
    chartType: 'pie',
    // ... other config
});

Chart Customization

Theme Overrides

Customize chart appearance:

chartThemeOverrides: {
    common: {
        title: {
            enabled: true,
            text: 'Medals by Age',
            fontSize: 18,
            fontWeight: 'bold',
        },
        legend: {
            position: 'bottom',
        },
        padding: {
            top: 20,
            right: 20,
            bottom: 20,
            left: 20,
        },
    },
    bar: {
        series: {
            strokeWidth: 2,
            fillOpacity: 0.8,
        },
        axes: {
            category: {
                label: {
                    rotation: 45,
                },
            },
            number: {
                label: {
                    formatter: (params) => '$' + params.value,
                },
            },
        },
    },
}

Aggregation Functions

Specify how to aggregate data:

params.api.createRangeChart({
    chartType: 'groupedColumn',
    aggFunc: 'sum',  // sum, avg, min, max, count, first, last
    // ... other config
});

Advanced Features

Multiple Charts
Chart Downloads
Dynamic Updates
Pivot Charts

Create multiple charts from the same grid:

// First chart - medals by age
gridApi.createRangeChart({
    chartContainer: document.querySelector('#chart1')!,
    cellRange: {
        columns: ['age', 'gold', 'silver', 'bronze'],
    },
    chartType: 'groupedColumn',
});

// Second chart - medals by sport
gridApi.createRangeChart({
    chartContainer: document.querySelector('#chart2')!,
    cellRange: {
        columns: ['sport', 'gold', 'silver', 'bronze'],
    },
    chartType: 'pie',
});

Export charts as images:

// Get chart model reference
let chartRef: any;

gridApi.createRangeChart({
    chartContainer: document.querySelector('#myChart')!,
    cellRange: { ... },
    chartType: 'groupedColumn',
    // Store reference
    onChartCreated: (params) => {
        chartRef = params.chartId;
    },
});

// Download chart
function downloadChart() {
    if (chartRef) {
        gridApi.downloadChart(chartRef, {
            fileName: 'my-chart.png',
        });
    }
}

Charts update automatically when grid data changes:

// Update grid data - chart updates automatically
function updateData() {
    const newData = generateNewData();
    gridApi.setGridOption('rowData', newData);
    // Chart reflects new data immediately
}

// Filter grid - chart shows filtered data
function applyFilter() {
    gridApi.setFilterModel({
        age: {
            type: 'greaterThan',
            filter: 25,
        },
    });
    // Chart updates to show only filtered rows
}

Create charts from pivoted data:

const gridOptions: GridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true },
        { field: 'sport', pivot: true },
        { field: 'gold', aggFunc: 'sum' },
        { field: 'silver', aggFunc: 'sum' },
    ],
    pivotMode: true,
    enableCharts: true,
};

// Create pivot chart
gridApi.createPivotChart({
    chartType: 'groupedColumn',
});

Required Modules

Integrated Charts requires specific modules:

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

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    IntegratedChartsModule.with(AgChartsEnterpriseModule),  // Enterprise
    ColumnMenuModule,
    ContextMenuModule,
]);

Integrated Charts is an Enterprise feature requiring both AG Grid Enterprise and AG Charts Enterprise licenses.

Best Practices

Define chart data types - Explicitly set chartDataType for clarity
Set appropriate aggregations - Choose the right aggFunc for your data
Customize themes - Use chartThemeOverrides for consistent branding
Enable cell selection - Required for user-created charts
Use chart containers - Provide dedicated elements for chart rendering
Handle chart lifecycle - Store chart references for programmatic control
Consider performance - Limit the number of simultaneously visible charts

Common Use Cases

Sales Dashboard

const gridOptions: GridOptions = {
    columnDefs: [
        { field: 'salesperson', chartDataType: 'category' },
        { field: 'region', chartDataType: 'category' },
        { field: 'revenue', chartDataType: 'series' },
        { field: 'profit', chartDataType: 'series' },
        { field: 'units', chartDataType: 'series' },
    ],
    enableCharts: true,
    cellSelection: true,
};

Time Series Analysis

const gridOptions: GridOptions = {
    columnDefs: [
        { 
            field: 'date', 
            chartDataType: 'category',
            sort: 'asc'
        },
        { field: 'temperature', chartDataType: 'series' },
        { field: 'humidity', chartDataType: 'series' },
        { field: 'pressure', chartDataType: 'series' },
    ],
    enableCharts: true,
    chartThemeOverrides: {
        common: {
            title: { text: 'Weather Trends' },
        },
    },
};

Next Steps

Learn about row grouping for aggregated data
Explore chart customization options
Implement pivot charts

Getting Started

Framework Examples

Advanced Examples

Integrated Charts Example

Overview

Basic Charts Implementation

Key Configuration

Enable Charts

Chart Data Types

Creating Charts

Programmatically Create Charts

User-Created Charts

Chart Types

Chart Customization

Theme Overrides

Aggregation Functions

Advanced Features

Required Modules

Best Practices

Common Use Cases

Sales Dashboard

Time Series Analysis

Next Steps

Getting Started

Framework Examples

Advanced Examples

​Overview

​Basic Charts Implementation

​Key Configuration

​Enable Charts

​Chart Data Types

​Creating Charts

​Programmatically Create Charts

​User-Created Charts

​Chart Types

​Chart Customization

​Theme Overrides

​Aggregation Functions

​Advanced Features

​Required Modules

​Best Practices

​Common Use Cases

​Sales Dashboard

​Time Series Analysis

​Next Steps

Overview

Basic Charts Implementation

Key Configuration

Enable Charts

Chart Data Types

Creating Charts

Programmatically Create Charts

User-Created Charts

Chart Types

Chart Customization

Theme Overrides

Aggregation Functions

Advanced Features

Required Modules

Best Practices

Common Use Cases

Sales Dashboard

Time Series Analysis

Next Steps