Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React Data GridPivot Chart APIEnterprise

This section shows how Pivot Charts can be created via the Grid API.

Creating Pivot Charts

Pivot Charts can be created through gridApi.createPivotChart() as shown below:

gridApi.createPivotChart({
     chartType: 'groupedColumn',
     // other options...
 });

The snippet above creates a Pivot Chart with the groupedColumn chart type. For a full list of options see Pivot Chart API.

The following example demonstrates how Pivot Charts can be created programmatically via gridApi.createPivotChart():

Pivot Chart API

Pivot Charts can be created programmatically using:

createPivotChart
Function
Used to programmatically create pivot charts from a grid. 
createPivotChart = (
    params: CreatePivotChartParams
) => ChartRef | undefined;

interface CreatePivotChartParams {
  // The type of chart to create. 
  chartType: ChartType;
  // The default theme to use, either a default option or your own custom theme. 
  chartThemeName?: string;
  // Provide to display the chart outside of the grid in your own container. 
  chartContainer?: HTMLElement;
  // Allows specific chart options in the current theme to be overridden. 
  chartThemeOverrides?: AgChartThemeOverrides;
  // When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart. 
  unlinkChart?: boolean;
}

type ChartType = 
      'column' 
    | 'groupedColumn' 
    | 'stackedColumn' 
    | 'normalizedColumn' 
    | 'bar' 
    | 'groupedBar' 
    | 'stackedBar' 
    | 'normalizedBar' 
    | 'line' 
    | 'scatter' 
    | 'bubble' 
    | 'pie' 
    | 'doughnut' 
    | 'area' 
    | 'stackedArea' 
    | 'normalizedArea' 
    | 'histogram' 
    | 'columnLineCombo' 
    | 'areaColumnCombo' 
    | 'customCombo'


interface ChartRef {
  // The id of the created chart. 
  chartId: string;
  // The chart instance that is produced by AG Charts which can be used to interact with the chart directly. 
  chart: any;
  // The chart DOM element, which the application is responsible for placing into the DOM. 
  chartElement: HTMLElement;
  // The application is responsible for calling this when the chart is no longer needed. 
  destroyChart: () => void;
}

Properties available on the CreatePivotChartParams interface.

chartType *
ChartType
The type of chart to create. 
chartType: ChartType;

type ChartType = 
      'column' 
    | 'groupedColumn' 
    | 'stackedColumn' 
    | 'normalizedColumn' 
    | 'bar' 
    | 'groupedBar' 
    | 'stackedBar' 
    | 'normalizedBar' 
    | 'line' 
    | 'scatter' 
    | 'bubble' 
    | 'pie' 
    | 'doughnut' 
    | 'area' 
    | 'stackedArea' 
    | 'normalizedArea' 
    | 'histogram' 
    | 'columnLineCombo' 
    | 'areaColumnCombo' 
    | 'customCombo'
chartThemeName
string
The default theme to use for the created chart. In addition to the default options you listed, you can also provide your own custom chart themes.
Options: 'ag-default', 'ag-default-dark', 'ag-material', 'ag-material-dark', 'ag-pastel', 'ag-pastel-dark', 'ag-vivid', 'ag-vivid-dark', 'ag-solar', 'ag-solar-dark'
chartContainer
HTMLElement
If the chart is to be displayed outside of the grid then a chart container should be provided. If the chart is to be displayed using the grid's popup window mechanism then leave as undefined.
chartThemeOverrides
AgChartThemeOverrides
Allows specific chart options in the current theme to be overridden. See Overriding Existing Themes.
chartThemeOverrides: AgChartThemeOverrides;

interface AgChartThemeOverrides {
}
unlinkChart
boolean
When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart. See Unlinking Charts.
Default: false

The API returns a ChartRef object when a chartContainer is provided. This is the same structure that is provided to the createChartContainer(chartRef) callback. The ChartRef provides the application with the destroyChart() method that is required when the application wants to dispose the chart.

Next Up

Continue to the next section to learn about: Cross Filter API.