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

Chart events can be used to detect and save user-made changes. Formatting changes made through the Format Panel can be captured using the ChartOptionsChanged event, and changes to the data range used to render the chart can be detected using the ChartRangeSelectionChanged event, which contains a cellRange object that contains information about the range and will allow you to recreate the chart.

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.