Angular Data Grid: Chart Tool Panel API

This section shows how to open and close the Chart Tool Panel via the Grid API.

Opening and closing the Chart Tool Panel via Grid API

`openChartToolPanel`

Function

Open the Chart Tool Panel.

openChartToolPanel = (
    params: OpenChartToolPanelParams
) => void;

interface OpenChartToolPanelParams {
  // The id of the created chart. 
  chartId: string;
  // Name of the Chart Tool Panel. The default 'Settings' Tool Panel will be used if not specified. 
  panel?: ChartToolPanelName;
}

type ChartToolPanelName = 
      'settings' 
    | 'data' 
    | 'format'

`closeChartToolPanel`

Function

Close the Chart Tool Panel.

closeChartToolPanel = (
    params: CloseChartToolPanelParams
) => void;

interface CloseChartToolPanelParams {
  // The id of the created chart. 
  chartId: string;
}

The example below demonstrates how you can open and close the Chart Tool Panel.

Click Open Chart Tool Panel to open the default Settings tab via openChartToolPanel()
Click Open Chart Tool Panel Format tab to open the Format tab via openChartToolPanel()
Click Close Chart Tool Panel to close via closeChartToolPanel()

Example: Open/Close Chart Tool Panel

Next Up

Continue to the next section to learn about: Chart Customisation.