Customising Charts

This section shows how to provide an alternative chart container before discussing the way charts can be customised to suit an application requirements.

Overriding Chart Options

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

interface ProcessChartOptionsParams { type: string; options: ChartOptions; } gridOptions.processChartOptions?(params: ProcessChartOptionsParams): ChartOptions;

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.

As the options vary for each chart type the specific chart options are covered in the sub sections below:

Customising Based on Chart Type

The params passed to ProcessChartOptionsParams details the chart type. The type will be one of {groupedBar, stackedBar, normalizedBar, groupedColumn, stackedColumn, normalizedColumn, line, pie, doughnut, area, stackedArea, normalizedArea}. The example below demonstrates customising based on chart type. The following can be noted:

  • Click a button to create a chart of that type.
  • 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.
  • Pie charts have the legend docked to the top.
  • Doughnut charts have the legend docked to the right.