---
product: "AG Grid"
title: "Pivot Chart API"
description: "This section shows how Pivot Charts can be created via the Grid API."
enterprise: true
framework: angular
version: "36.2.0"
related:
    - title: "Range Chart API"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-api-range-chart/"
    - title: "Cross Filter API"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-api-cross-filter-chart/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Pivot Chart API

This section shows how Pivot Charts can be created via the Grid API.

## Creating Pivot Charts

Pivot Charts can be created through `gridApi.createPivotChart()` as shown below:

```ts
this.gridApi.createPivotChart({
    chartType: 'groupedColumn',
    // other options...
});
```

The snippet above creates a Pivot Chart with the `groupedColumn` chart type. For a full list of options see [Pivot Chart API](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-api-pivot-chart/#pivot-chart-api).

The following example demonstrates how Pivot Charts can be created programmatically via `gridApi.createPivotChart()`:

#### Pivot Chart

```ts
import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  RowApiModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  PivotModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  NumberFilterModule,
  RowApiModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div id="container">
    <ag-grid-angular
      id="myGrid"
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [pivotMode]="true"
      [popupParent]="popupParent"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "country", pivot: true },
    { field: "year", rowGroup: true },
    { field: "sport", rowGroup: true },
    { field: "total", aggFunc: "sum" },
    { field: "gold", aggFunc: "sum" },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 150,
    filter: true,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 150,
  };
  popupParent: HTMLElement | null = document.body;
  rowData!: any[];

  constructor(private http: HttpClient) {}

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    params.api.createPivotChart({
      chartType: "groupedColumn",
      chartContainer: document.querySelector("#myChart") as HTMLElement,
      chartThemeOverrides: {
        common: {
          navigator: {
            enabled: true,
            height: 10,
          },
        },
      },
    });
    // expand one row for demonstration purposes
    setTimeout(
      () => params.api.getDisplayedRowAtIndex(2)!.setExpanded(true),
      0,
    );
  }

  onGridReady(params: GridReadyEvent) {
    this.http
      .get<
        any[]
      >("https://www.ag-grid.com/example-assets/wide-spread-of-sports.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}
```

[Live example: Pivot Chart](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-api-pivot-chart/pivot-chart-api/angular/)

## Pivot Chart API

Pivot Charts can be created programmatically using:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `createPivotChart` | `Function` |  |  |  |

Properties available on the `CreatePivotChartParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartType` | `ChartType` |  |  |  |
| `chartThemeName` | `string` |  |  |  |
| `chartContainer` | `HTMLElement` |  |  |  |
| `chartThemeOverrides` | `AgChartThemeOverrides` |  |  |  |
| `unlinkChart` | `boolean` |  |  |  |

The API returns a `ChartRef` object when a `chartContainer` is provided. This is the same structure that is provided to the `createChartContainer(chartRef)` callback. The `ChartRef` provides the application with the `destroyChart()` method that is required when the application wants to dispose the chart.