---
product: "AG Grid"
title: "Chart Container"
description: "This section shows how to specify an alternative chart container to the default grid-provided popup window."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts/"
    - title: "Install Integrated Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-installation/"
    - title: "User Created Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-user-created/"
    - title: "Application Created Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-application-created/"
    - title: "Chart Types"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-chart-types/"
    - title: "Chart Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-menu/"
    - title: "Chart Tool Panels"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-chart-tool-panels/"
    - title: "Customisation"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-customisation/"
    - title: "Chart Events"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-events/"
    - title: "Time Series"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-time-series/"
    - title: "Save / Restore Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-save-restore-charts/"
    - title: "Chart Image Export"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-downloading-image/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Chart Container

This section shows how to specify an alternative chart container to the default grid-provided popup window.

Displaying the generated chart within the grid-provided popup window will suit most needs. However, you may wish to display the chart in a different location. For example, your application may already have popup windows, and you wish to use the same library for consistency.

## Specifying Chart Container

To provide an alternative container for popup windows use the grid callback `createChartContainer(chartRef)`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `createChartContainer` | `CreateChartContainer` |  |  |  |

The callback is called each time the user elects to create a chart via the grid UI. The callback is provided with a `ChartRef` implementation:

Properties available on the `ChartRef` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartId` | `string` |  |  |  |
| `chart` | `any` |  |  |  |
| `chartElement` | `HTMLElement` |  |  |  |
| `destroyChart` | `Function` |  |  |  |
| `focusChart` | `Function` |  |  |  |
| `setMaximized` | `Function` |  |  |  |

The example below demonstrates the `createChartContainer(chartRef)` callback. The example does not use an alternative popup window, but instead places the charts into the DOM below the grid. This crude approach is on purpose to minimise the complexity of the example and focus on just the callback and the interactions of the grid.

> **Note**
>
> When providing an element to display your chart, it is important to always set the `popupParent` to be `document.body`. This will allow floating elements within the chart's menus to be positioned correctly.

From the example below, the following can be noted:

- Select a range of numbers (medal columns) and create a chart from the context menu.
- The chart appears below the grid rather than in a popup window. This is because the `createChartContainer(chartRef)` is implemented.
- Each chart is displayed alongside a 'Destroy' button. The logic behind the destroy button calls `destroyChart()` to destroy the chart instance.

#### Provided Container

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";

import type {
  ChartRef,
  ColDef,
  GridApi,
  GridReadyEvent,
} from "ag-grid-community";
import {
  ClientSideRowModelModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

import "./styles.css";

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

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

const VueExample = defineComponent({
  template: `
    <div style="height: 100%">
        <div id="container">
            <ag-grid-vue
                style="width: 100%; height: 300px"
                :columnDefs="columnDefs"
                :rowData="rowData"
                :defaultColDef="defaultColDef"
                :cellSelection="true"
                :enableCharts="true"
                :popupParent="popupParent"
                :createChartContainer="createChartContainer"
                @grid-ready="onGridReady"
            ></ag-grid-vue>
            <div id="chartParent" class="chart-wrapper">
                <div class="chart-placeholder">Chart will be displayed here.</div>
            </div>
        </div>
    </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", width: 150, chartDataType: "category" },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
      { field: "total", chartDataType: "series" },
    ]);
    const gridApi = shallowRef<GridApi | null>(null);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref(null);
    const rowData = ref<any[]>(null);

    onBeforeMount(() => {
      popupParent.value = document.body;
    });

    const updateChart = (chartRef: ChartRef) => {
      const eParent = document.querySelector("#chartParent");
      eParent.innerHTML = ""; // Clear existing content
      const placeHolder = `<div class="chart-placeholder">Chart will be displayed here.</div>`;
      if (chartRef) {
        const chartWrapperHTML = `
                    <div class="chart-wrapper">
                      <div class="chart-wrapper-top">
                        <h2 class="chart-wrapper-title">Chart created ${new Date().toLocaleString()}</h2>
                        <button class="chart-wrapper-close">Destroy Chart</button>
                      </div>
                      <div class="chart-wrapper-body"></div>
                    </div>
                  `;
        eParent.insertAdjacentHTML("beforeend", chartWrapperHTML);
        const eChartWrapper = eParent.lastElementChild;
        eChartWrapper
          .querySelector(".chart-wrapper-body")
          .appendChild(chartRef.chartElement);
        eChartWrapper
          .querySelector(".chart-wrapper-close")
          .addEventListener("click", () => {
            chartRef.destroyChart();
            eParent.innerHTML = placeHolder;
          });
      } else {
        eParent.innerHTML = placeHolder;
      }
    };

    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));
    };
    // Function for creating the chart container
    const createChartContainer = (chartRef: ChartRef) => {
      updateChart(chartRef);
    };

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

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

[Live example: Provided Container](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-container/provided-container/vue3/)