Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

Vue Data GridChart ContainerEnterprise

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).

createChartContainer
Function
Callback to enable displaying the chart in an alternative chart container. 
createChartContainer = (
    params: ChartRefParams<TData>
) => void;

interface ChartRefParams<TData = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
  // The id of the created chart. 
  chartId: string;
  // The chart instance that is produced by AG Charts which can be used to interact with the chart directly. 
  chart: any;
  // The chart DOM element, which the application is responsible for placing into the DOM. 
  chartElement: HTMLElement;
  // The application is responsible for calling this when the chart is no longer needed. 
  destroyChart: () => void;
}

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.

chartId
string
The id of the created chart.
chart
any
The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chartElement
HTMLElement
The chart DOM element, which the application is responsible for placing into the DOM.
destroyChart
Function
The application is responsible for calling this when the chart is no longer needed. 
destroyChart = () => void;

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.

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.

Next Up

Continue to the next section to learn about: Application Created Charts.