Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

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

Next Up

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