--- product: "AG Studio" title: "Cross-Filtering" description: "Click a chart or Table in AG Studio to cross-filter the rest of the page. Learn Cross Highlight and Cross Filter modes, defaults and Drill Through." framework: react version: "3.1.0" related: - title: "Filters Panel" url: "https://www.ag-grid.com/studio/analysts/filters-panel/" - title: "Page and Widget Filters" url: "https://www.ag-grid.com/studio/analysts/page-and-widget-filters/" - title: "Filter Types" url: "https://www.ag-grid.com/studio/analysts/filter-types/" llms: "https://www.ag-grid.com/studio/llms.txt" --- # Cross-Filtering You cross-filter by interacting with a Widget. When you select values in a Widget, your selection becomes a filter condition that can affect the other Widgets on the page. While cross-filtering is active, an extra Cross Filters section appears in the [Filters Panel](https://www.ag-grid.com/studio/analysts/filters-panel/), between Page Filters and Widget Filters. ## Modes Cross-filtering is set per widget and is on by default. You can change its settings in the [Compose Panel](https://www.ag-grid.com/studio/analysts/user-interface/#compose-panel). There are three modes: - **Cross Highlight** - highlights proportional selection in the visualisation. Only pie, doughnut, bar and column charts offer it, and 100% Stacked bar and column charts do not. - **Cross Filter** - redraws the data under the cross-filter condition. - **None** - the Widget ignores cross filters from other Widgets. Clicking it can still cross filter the other Widgets, as set by [Click to Cross Filter](https://www.ag-grid.com/studio/analysts/cross-filtering/#click-to-cross-filter). A Widget starts in Cross Highlight mode if it offers it, and in Cross Filter mode otherwise. The example below shows a page with mixed cross-filter settings. The KPI Widgets have cross-filtering turned off, so their totals reflect all the data and do not respond to cross-filter changes. The bar, column and pie charts use Cross Highlight mode, so a selection shows a proportional highlight without redrawing the data. The line chart uses Cross Filter mode, so it redraws under the cross-filter condition. UK is pre-selected in Net Sales by Region, and Mid-Market in Net Sales by Segment, so you can see the Filters Panel and the highlight effects as soon as the page loads. #### Cross-Filtering ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getMainDemoData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "a", widgets: { "kpi-net-sales": { type: "value", dataMapping: { value: [{ id: "net_sales" }] }, format: { style: { label: { enabled: true, text: "Net Sales" } }, crossFilter: "none", }, }, "kpi-order-count": { type: "value", dataMapping: { value: [{ id: "order_count" }] }, format: { style: { label: { enabled: true, text: "Order Count" } }, crossFilter: "none", }, }, "kpi-aov": { type: "value", dataMapping: { value: [{ id: "average_order_value" }] }, format: { style: { label: { enabled: true, text: "Avg Order Value" } }, crossFilter: "none", }, }, "net-sales-by-region": { type: "bar-chart-grouped", dataMapping: { categoryKey: [{ id: "stores.region" }], valueKey: [{ id: "net_sales" }], }, format: { title: { enabled: true, text: "Net Sales by Region" } }, }, "net-sales-by-subcategory": { type: "column-chart-grouped", dataMapping: { categoryKey: [{ id: "products.subcategory" }], valueKey: [{ id: "net_sales" }], }, format: { title: { enabled: true, text: "Net Sales by Subcategory" }, }, }, "net-sales-over-time": { type: "line-chart", dataMapping: { categoryKey: [{ id: "orders.order_month" }], valueKey: [{ id: "net_sales" }], }, format: { title: { enabled: true, text: "Net Sales over Time" } }, }, "net-sales-by-category": { type: "pie-chart", dataMapping: { categoryKey: [{ id: "customers.segment" }], valueKey: [{ id: "net_sales" }], }, format: { title: { enabled: true, text: "Net Sales by Segment" } }, }, }, widgetLayout: { "kpi-net-sales": { xTrack: 0, yTrack: 0, xSpan: 8, ySpan: 6 }, "kpi-order-count": { xTrack: 8, yTrack: 0, xSpan: 8, ySpan: 6 }, "kpi-aov": { xTrack: 16, yTrack: 0, xSpan: 8, ySpan: 6 }, "net-sales-over-time": { xTrack: 0, yTrack: 6, xSpan: 24, ySpan: 18 }, "net-sales-by-subcategory": { xTrack: 0, yTrack: 24, xSpan: 24, ySpan: 18, }, "net-sales-by-category": { xTrack: 0, yTrack: 42, xSpan: 12, ySpan: 18, }, "net-sales-by-region": { xTrack: 12, yTrack: 42, xSpan: 12, ySpan: 18 }, }, crossFilter: { values: { "net-sales-by-region": [ { type: "value", field: { id: "stores.region" }, values: ["UK"], group: 0, }, ], "net-sales-by-category": [ { type: "value", field: { id: "customers.segment" }, values: ["Mid-Market"], group: 0, }, ], }, }, }, ], selectedPageId: "a", }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, panels: { edit: { right: ["filters"], }, }, data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"), }; let studioApi: AgStudioApi; const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Cross-Filtering](https://www.ag-grid.com/studio/examples/cross-filtering/cross-filtering/typescript/) ## Starting a Cross Filter Every chart has the Cross-Filtering setting, but only some charts start a cross filter when you click a data point: bar, column, line, area, scatter, bubble, pie, doughnut and combination charts. Unless **Click to Cross Filter** is unticked, clicking a data point in one of these charts starts a cross filter, and the chart shows a pointer over its data points. Clicking a data point in any other chart, such as a box plot, histogram, funnel, pyramid, sunburst, treemap, radar, radial, nightingale or range chart, does nothing, but the chart still follows cross filters from other Widgets unless its mode is None. Clicking the background of any chart, away from its data points, clears the cross filter, unless that chart's mode is None and **Click to Cross Filter** is unticked. A Table can also drive cross-filtering. Clicking a row selects it and restricts the other Widgets to that row's values, and `^ Ctrl`-clicking adds more rows to the selection. Selected rows are shown in bold, but the Table itself still shows all of its rows, whatever is selected. A Table offers only the Cross Filter and None modes. To clear a cross filter from a Table, click the selected row again, or click the empty space below the Table's rows. Clicking the empty space clears every cross filter, as clicking a chart's background does, unless the Table's mode is None and **Click to Cross Filter** is unticked. Clicking the Table's title or column headers does not change the cross filter. Cross-filtering is designed to be quick and reversible: clicking the same selection again clears the condition, including selections made with `^ Ctrl`. ## Click to Cross Filter Widgets that can start a cross filter show a **Click to Cross Filter** checkbox below **Mode** in the Cross-Filtering section of the [Compose Panel](https://www.ag-grid.com/studio/analysts/user-interface/#compose-panel). These are the Table and the bar, column, line, area, scatter, bubble, pie, doughnut and combination charts. The checkbox is ticked by default. Untick it to stop clicks on the Widget from filtering other Widgets. The Widget still follows cross filters from other Widgets, according to its Mode. The two settings are independent: with Mode set to None and the checkbox ticked, clicking the Widget filters the other Widgets, but the Widget itself is not filtered. Reports saved before version 3.1 that set a Widget's Mode to None open with the checkbox unticked, so those Widgets behave as before. ## Cross Filter Cards When cross-filtering applies a condition, a read-only, collapsed filter card in the Cross Filters section of the Filters Panel shows that condition. Click the card to put the Widget the cross filter came from into focus, or use the 'x' action on the card to remove the condition. When no cross-filtering is applied, the Cross Filters section is hidden. ## Drill Through When you open a report through a drill through, it has a drill-through filter for the value you right-clicked to open it. The filter applies to every Widget on the page and shows as a read-only card in the Filters Panel. In such a report, a Table has a **Drill Through** section in the Compose Panel, above Cross-Filtering. Its **Mode** sets how the Table uses the filter: - **Filter**, the default, shows only the rows that match, as every other Widget does. - **Highlight** shows every row and selects the rows that match. The Table's Cross-Filtering settings are then greyed out: clicking the Table no longer cross-filters other Widgets, but the Table still follows cross filters from other Widgets.