Vue Data GridPivot Chart API

Enterprise

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:

this.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.

Properties available on the CreatePivotChartParams interface.

chartType required
ChartType
The type of chart to create.
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
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
Allows specific chart options in the current theme to be overridden.
unlinkChart
boolean
default:
When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart.

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.