Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

React Data Grid: Chart Tool Panels

The Chart Tool Panels allow users to change the selected chart type and customise the data and chart formatting.

Open Chart Tool Panels with button to close it on the middle left of the panels
Accessing Chart Tool Panels

The Chart Tool Panels are accessed by clicking on the button highlighted above. Note they can also be opened via configuration (see examples in this section) or programmatically through the Grid API, see Open / Close Chart Tool Panels.

Settings Tool Panel

The Settings Panel can be used to change the chart type and chart theme.

Chart Settings Panel
Chart Settings Panel

It is possible to configure which chart groups and chart types are included via the chartToolPanelsDef grid option:

chartToolPanelsDef
ChartToolPanelsDef
Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the settings panel.
chartToolPanelsDef: ChartToolPanelsDef;

interface ChartToolPanelsDef {
  // Customisations for the settings panel 
  settingsPanel?: ChartSettingsPanel;
  // Customisations for the format panel 
  formatPanel?: ChartFormatPanel;
  // Customisations for the data panel 
  dataPanel?: ChartDataPanel;
  // The ordered list of panels to show in the chart tool panels. If none specified, all panels are shown 
  panels?: ChartToolPanelName[];
  // The panel to open by default when the chart loads. If none specified, the tool panel is hidden by default and the first panel is open when triggered. 
  defaultToolPanel?: ChartToolPanelName;
}

interface ChartSettingsPanel {
  // Chart groups customisations for which charts are displayed in the settings panel 
  chartGroupsDef?: ChartGroupsDef;
}

interface ChartGroupsDef {
  columnGroup?: ('column' | 'stackedColumn' | 'normalizedColumn')[];
  barGroup?: ('bar' | 'stackedBar' | 'normalizedBar')[];
  pieGroup?: ('pie' | 'doughnut')[];
  lineGroup?: ('line')[];
  scatterGroup?: ('scatter' | 'bubble')[];
  areaGroup?: ('area' | 'stackedArea' | 'normalizedArea')[];
  histogramGroup?: ('histogram')[];
  combinationGroup?: ('columnLineCombo' | 'areaColumnCombo' | 'customCombo')[];
}

interface ChartFormatPanel {
  // The format panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartFormatPanelGroup>[];
}

interface ChartPanelGroupDef<GroupType> {
  // The panel group type 
  type: GroupType;
  // Whether the panel group is open by default. If not specified, it is closed 
  isOpen?: boolean;
}

type ChartFormatPanelGroup = 
      'chart' 
    | 'legend' 
    | 'axis' 
    | 'series' 
    | 'navigator'


interface ChartDataPanel {
  // The data panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartDataPanelGroup>[];
}

type ChartDataPanelGroup = 
      'categories' 
    | 'series' 
    | 'seriesChartType'


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

The full list of chart groups with the corresponding chart types are shown below:

const chartToolPanelsDef = {
    settingsPanel: {
        chartGroupsDef: {
            columnGroup: ['column', 'stackedColumn', 'normalizedColumn'],
            barGroup: ['bar', 'stackedBar', 'normalizedBar'],
            pieGroup: ['pie', 'doughnut'],
            lineGroup: ['line'],
            scatterGroup: ['scatter', 'bubble'],
            areaGroup: ['area', 'stackedArea', 'normalizedArea'],
            histogramGroup: ['histogram'],
            combinationGroup: ['columnLineCombo', 'areaColumnCombo', 'customCombo'],
        }
    }
};

<AgGridReact chartToolPanelsDef={chartToolPanelsDef}></AgGridReact>

The example below shows a subset of the provided chart groups with the chart types reordered. Note the following:

  • Only the Pie, Columns and Bar chart groups are shown and chart types have been reordered.
  • The Settings Panel is configured to be open by default via defaultToolPanel: 'settings'.

Data Tool Panel

The Data Panel can be used to change the chart category and series.

Chart Data Panel
Chart Data Panel

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the chartToolPanelsDef grid option:

chartToolPanelsDef
ChartToolPanelsDef
Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the settings panel.
chartToolPanelsDef: ChartToolPanelsDef;

interface ChartToolPanelsDef {
  // Customisations for the settings panel 
  settingsPanel?: ChartSettingsPanel;
  // Customisations for the format panel 
  formatPanel?: ChartFormatPanel;
  // Customisations for the data panel 
  dataPanel?: ChartDataPanel;
  // The ordered list of panels to show in the chart tool panels. If none specified, all panels are shown 
  panels?: ChartToolPanelName[];
  // The panel to open by default when the chart loads. If none specified, the tool panel is hidden by default and the first panel is open when triggered. 
  defaultToolPanel?: ChartToolPanelName;
}

interface ChartSettingsPanel {
  // Chart groups customisations for which charts are displayed in the settings panel 
  chartGroupsDef?: ChartGroupsDef;
}

interface ChartGroupsDef {
  columnGroup?: ('column' | 'stackedColumn' | 'normalizedColumn')[];
  barGroup?: ('bar' | 'stackedBar' | 'normalizedBar')[];
  pieGroup?: ('pie' | 'doughnut')[];
  lineGroup?: ('line')[];
  scatterGroup?: ('scatter' | 'bubble')[];
  areaGroup?: ('area' | 'stackedArea' | 'normalizedArea')[];
  histogramGroup?: ('histogram')[];
  combinationGroup?: ('columnLineCombo' | 'areaColumnCombo' | 'customCombo')[];
}

interface ChartFormatPanel {
  // The format panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartFormatPanelGroup>[];
}

interface ChartPanelGroupDef<GroupType> {
  // The panel group type 
  type: GroupType;
  // Whether the panel group is open by default. If not specified, it is closed 
  isOpen?: boolean;
}

type ChartFormatPanelGroup = 
      'chart' 
    | 'legend' 
    | 'axis' 
    | 'series' 
    | 'navigator'


interface ChartDataPanel {
  // The data panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartDataPanelGroup>[];
}

type ChartDataPanelGroup = 
      'categories' 
    | 'series' 
    | 'seriesChartType'


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

The default list and order of the Data Panel groups are as shown below:

const chartToolPanelsDef = {
    dataPanel: {
        groups: [
            { type: 'categories', isOpen: true },
            { type: 'series', isOpen: true },
            { type: 'seriesChartType', isOpen: true }
        ]
    }
};

<AgGridReact chartToolPanelsDef={chartToolPanelsDef}></AgGridReact>

The seriesChartType group is only shown in Combination Charts.

The following example shows some Data Panel customisations. Note the following:

  • The Categories group is not included.
  • The Series group is closed by default.
  • The Data Panel is configured to be open by default via defaultToolPanel: 'data'.

Format Tool Panel

The Format Panel allows users to format the chart where the available formatting options differ between chart types.

Chart Format Panel
Chart Format Panel

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the chartToolPanelsDef grid option:

chartToolPanelsDef
ChartToolPanelsDef
Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the settings panel.
chartToolPanelsDef: ChartToolPanelsDef;

interface ChartToolPanelsDef {
  // Customisations for the settings panel 
  settingsPanel?: ChartSettingsPanel;
  // Customisations for the format panel 
  formatPanel?: ChartFormatPanel;
  // Customisations for the data panel 
  dataPanel?: ChartDataPanel;
  // The ordered list of panels to show in the chart tool panels. If none specified, all panels are shown 
  panels?: ChartToolPanelName[];
  // The panel to open by default when the chart loads. If none specified, the tool panel is hidden by default and the first panel is open when triggered. 
  defaultToolPanel?: ChartToolPanelName;
}

interface ChartSettingsPanel {
  // Chart groups customisations for which charts are displayed in the settings panel 
  chartGroupsDef?: ChartGroupsDef;
}

interface ChartGroupsDef {
  columnGroup?: ('column' | 'stackedColumn' | 'normalizedColumn')[];
  barGroup?: ('bar' | 'stackedBar' | 'normalizedBar')[];
  pieGroup?: ('pie' | 'doughnut')[];
  lineGroup?: ('line')[];
  scatterGroup?: ('scatter' | 'bubble')[];
  areaGroup?: ('area' | 'stackedArea' | 'normalizedArea')[];
  histogramGroup?: ('histogram')[];
  combinationGroup?: ('columnLineCombo' | 'areaColumnCombo' | 'customCombo')[];
}

interface ChartFormatPanel {
  // The format panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartFormatPanelGroup>[];
}

interface ChartPanelGroupDef<GroupType> {
  // The panel group type 
  type: GroupType;
  // Whether the panel group is open by default. If not specified, it is closed 
  isOpen?: boolean;
}

type ChartFormatPanelGroup = 
      'chart' 
    | 'legend' 
    | 'axis' 
    | 'series' 
    | 'navigator'


interface ChartDataPanel {
  // The data panel group configurations, their order and whether they are shown. If not specified shows all groups 
  groups?: ChartPanelGroupDef<ChartDataPanelGroup>[];
}

type ChartDataPanelGroup = 
      'categories' 
    | 'series' 
    | 'seriesChartType'


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

The default list and order of format groups are as follows:

const chartToolPanelsDef = {
    formatPanel: {
        groups: [
            { type: 'chart', isOpen: false },
            { type: 'legend', isOpen: false },
            { type: 'axis', isOpen: false },
            { type: 'series', isOpen: false },
            { type: 'navigator', isOpen: false }
        ]
    }
};

<AgGridReact chartToolPanelsDef={chartToolPanelsDef}></AgGridReact>

The selected chart determines which groups are displayed. For example, a pie chart does not have an axis so Axis groups will not be shown even if they are listed in chartToolPanelsDef.formatPanel.groups.

The following example shows some Format Panel customisations. Note the following:

  • The format panel groups have been reordered.
  • The Axis group is open by default.
  • The Navigator group has been omitted.
  • The Format Panel is configured to be open by default via defaultToolPanel: 'format'.

Omitting & Ordering Tool Panels

The Chart Tool Panels can be omitted and ordered using the chartToolPanelsDef.panels grid option:

const chartToolPanelsDef = {
    panels: ['data', 'format', 'settings'], // default order
};

<AgGridReact chartToolPanelsDef={chartToolPanelsDef}></AgGridReact>

The following example shows how the Chart Tool Panels can be omitted and ordered. Note the following:

  • The Format Tool Panel has been omitted.
  • The Data Tool Panel appears before the Settings Tool Panel.
  • The Data Panel is configured to be open by default via defaultToolPanel: 'data'.

Next Up

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