Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Cross Filter Chart API

Cross-filtering charts allow users to interact with data in an easy and intuitive way. Clicking on chart elements automatically filters values in both the grid and other cross-filter charts.

Cross Filtering

This built-in feature of integrated charts is particularly useful for creating interactive reports and dashboards.

Creating cross-filter charts

Cross-Filter charts are created programmatically using createCrossFilterChart(params) on the grid's API.

The following snippet shows how a cross-filtering pie chart can be created:

gridApi.createCrossFilterChart({
    chartType: 'pie',
    cellRange: {
        columns: ['salesRep', 'sale'],
    },
    aggFunc: 'sum',
});

Note in the snippet above that the sale values are aggregated by the salesRep category as aggFunc: 'sum' is specified.

A corresponding column configuration for the chart above is shown in the following snippet:

const columnDefs = [
    { field: 'salesRep', filter: 'agSetColumnFilter', chartDataType: 'category' },
    { field: 'sale', chartDataType: 'series' },
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

Cross-filtering requires that grid filtering is enabled with either a Set Filter or Multi Filter configured on the category column used in the chart. It is also important to define the Chart Data Type as it's not possible to infer the type when all data is filtered out..

The following example shows how to create a simple cross-filtering pie chart. Note the following:

  • Click on a sector of the pie chart to filter rows in the grid by the selected sales rep.
  • Ctrl (Cmd) Click on another sector to additionally adds rows corresponding to the selected sales rep.
  • Click Chart Background to remove / reset the filtering in the grid to restore all rows in the grid.

Cross-filter API

The cross-filter api shares a similar api to Range Chart, however there are different defaults which make sense for cross-filtering.

Cross-filter Chart Types

The following examples show the different chart types that support cross-filtering:

Example: Sales Dashboard #1

Example: Sales Dashboard #2

Example: Most Populous Cities

Next Up

Continue to the next section to learn about: Time Series Chart.