Chart Customisation

Charts can be customised in a number of ways to suit your applications' requirements.

Overriding Chart Options

The primary mechanism for customising charts is via the following gridOptions callback:

gridOptions.processChartOptions?(params: ProcessChartOptionsParams): ChartOptions; interface ProcessChartOptionsParams { type: ChartType; options: ChartOptions; } type ChartType = 'groupedColumn' | 'stackedColumn' | 'normalizedColumn' | 'groupedBar' | 'stackedBar' | 'normalizedBar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'area' | 'stackedArea' | 'normalizedArea';

This callback is invoked once, before the chart is created, with ProcessChartOptionsParams.

The params object contains a type property corresponding to the chart about to be created, along with the ChartOptions that are about to be applied.

There are different available options to configure depending on the type of chart. Please refer to the relevant section below for more details:

Example: Customising Charts

The example below demonstrates:

  • Stacked Bar, Grouped Bar and Normalized Bar charts have the legend docked to the bottom.
  • Stacked Column, Grouped Column and Normalized Column charts have the legend docked to the right.
  • Line charts have the legend docked to the left.
  • Scatter charts have the legend docked to the right.
  • Pie charts have the legend docked to the top.
  • Doughnut charts have the legend docked to the right.

Saving User Preferences

Formatting changes made by users through the Format Panel can be captured, saved and restored through the ChartOptionsChanged event, see interface below:

interface ChartOptionsChanged extends AgEvent { chartType: ChartType; chartPalette: string; chartOptions: ChartOptions; } type ChartType = 'groupedColumn' | 'stackedColumn' | 'normalizedColumn' | 'groupedBar' | 'stackedBar' | 'normalizedBar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'area' | 'stackedArea' | 'normalizedArea';

Here the chartPalette will be set to the name of the currently selected palette, which will be one of the following: 'borneo', 'material', 'pastel', 'bright', 'flat'

A ChartRangeSelectionChanged event will also be raised any time the range that the chart is created from is changed, whether by using the range selection handle or making changes in the Data tab of the configuration sidebar. This event contains a cellRange object that gives you information about the range and would allow you to recreate the chart:

interface ChartRangeSelectionChanged extends AgGridEvent { id: string; cellRange: CellRangeParams; } interface CellRangeParams { // start row rowStartIndex?: number; rowStartPinned?: string; // end row rowEndIndex?: number; rowEndPinned?: string; // columns columns: (string | Column)[]; }

Example: Saving User Preferences

The example below demonstrates how the ChartOptionsChanged event can be used to save and restore user chart formatting preferences. Notice the following:

  • Saving Options by Chart Type: format changes (via the format panel) are preserved after leaving and returning to the chart by using the savedUserPreferenceByChartType object to keep track of user format changes on a per-chart type basis.
  • Saving Global Chart Options: changes made to the legend options are applied to all new charts by using the savedLegendUserPreference object to globally keep track of legend preferences.