---
title: "Pivot Chart API"
enterprise: true
framework: vue
version: "36.1.0"
---

# 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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div id="container">
      <ag-grid-vue
        id="myGrid"
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :pivotMode="true"
        :popupParent="popupParent"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", pivot: true },
      { field: "year", rowGroup: true },
      { field: "sport", rowGroup: true },
      { field: "total", aggFunc: "sum" },
      { field: "gold", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 150,
      filter: true,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 150,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<any[]>(null);

    function 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,
      );
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/wide-spread-of-sports.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      popupParent,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Pivot Chart API

Pivot Charts can be created programmatically using:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `createPivotChart` | `Function` |  |  | Used to programmatically create pivot charts from a grid. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

Properties available on the `CreatePivotChartParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartType` | `ChartType` | Yes |  | The type of chart to create. |
| `chartThemeName` | `string` |  |  | The default theme to use for the created chart. In addition to the default options you listed, you can also provide your own [custom chart themes](https://www.ag-grid.com/vue-data-grid/integrated-charts-customisation/#custom-chart-themes). Options: `'ag-default'`, `'ag-default-dark'`, `'ag-material'`, `'ag-material-dark'`, `'ag-pastel'`, `'ag-pastel-dark'`, `'ag-vivid'`, `'ag-vivid-dark'`, `'ag-solar'`, `'ag-solar-dark'`. |
| `chartContainer` | [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |  |  | If the chart is to be displayed outside of the grid then a chart container should be provided. If the chart is to be displayed using the grid's popup window mechanism then leave as `undefined`. |
| `chartThemeOverrides` | [`AgChartThemeOverrides`](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides) |  |  | Allows specific chart options in the current theme to be overridden. See [Overriding Existing Themes](https://www.ag-grid.com/vue-data-grid/integrated-charts-customisation/#overriding-themes) for more information. |
| `unlinkChart` | `boolean` |  | `false` | When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart. See [Unlinking Charts](https://www.ag-grid.com/vue-data-grid/integrated-charts-menu/#default-chart-menu-items) for more information. |

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.