Angular Data Grid: Chart Tool Panel API

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

Opening / Closing Chart Tool Panels via Grid API

The Chart Tool Panels can be opened and closed programmatically using the following grid APIs:

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 = (
    params: CloseChartToolPanelParams
) => void;

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

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

• 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()

// Loading...

Next Up

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