Skip to content

Filtering and Selection

Selection answers “which marks am I interested in?” Filtering answers “which records should remain in the report?” Choose the behavior deliberately: a selected bar can highlight itself, filter the linked Pivot, or ask your application what to do.

Try selecting a region, inspect the table or peer chart, and clear the selection. Use chart-local filters when only this chart should show a different dataset.

Interactive example

Filters and navigation

Select chart members and apply their analytical scope to the linked Pivot.

The example loads when visible.

The live example lets you compare selection and filtering. Watch the source Pivot report as well as the chart, then clear the selection to confirm which view changes.

interaction.mode chooses what mark activation does. It is independent of drillSyncMode:

ModeBehavior
drillUse the existing automatic hierarchy navigation.
selectCommit a persistent semantic selection.
filterCommit selection and apply its member predicates through Pivot.
eventEmit a selection proposal for the application without committing or drilling.

These modes are supported by grouped columns/bars, line, column-line, area-line, pie/donut, annotated time series, and small multiples. Other chart families reject unsupported modes. Check the chart definition’s interactionModes before offering custom controls.

await chart.update({
interaction: {
mode: 'select',
selectionMode: 'multiple',
crossHighlight: true,
},
});

Ordinary activation replaces the selection, or clears an already selected single target. In multiple mode, Ctrl/Meta activation adds or removes a target. Pointer clicks and Enter/Space use the same rules. Selected marks have a visible outline and aria-pressed state. Use the clear action or Escape to clear selection. In Event mode, these user actions request clearing; the application commits the change.

In Display, compose a selection in Select mode, then choose Apply selection as filter. The immediate Filter mode narrows the source chart as well as the linked Pivot. Choose Edit selection to release that chart’s filter while keeping its selection, revise the selected members, and apply again. Other charts’ contributions and user filters remain active.

Selection targets store row and column { field, value } members and an optional measure identity. They do not store visible indexes or display labels:

await chart.setSelection([
{
row: [{ field: 'region', value: 'North' }],
column: [{ field: 'year', value: 2026 }],
measure: { prop: 'sales', aggregator: 'sum' },
},
]);
await chart.clearSelection();

Linked projections supply their committed layout fields. Standalone datasets must provide hierarchy level fields or explicit selectionFields: { row: ['region'], column: ['year'] }, aligned with category and series paths. Missing or ambiguous mappings fail rather than interpreting labels as source fields. Measure carriers in values-on-rows layouts never become raw member predicates.

Strings, finite numbers, booleans, and null retain their typed identity. Missing/null source members share the canonical blank value null; negative zero is normalized to zero. Refresh, drill, reordering, and temporarily absent members preserve semantic selection. Rendering only matches current members; it does not replay a filter or emit activation events.

interaction updates replace the authored object: omit it to retain it or use {} to reset. selection: [] clears selection. Save/restore includes both fields. Unlinking releases that chart’s native filter; relinking or restoring a linked Filter chart applies its persisted contribution once.

A chart’s selected tuples combine with OR, and fields inside a tuple combine with AND. Selecting (North, 2026) and (South, 2027) therefore excludes (North, 2027) and (South, 2026). Independent chart owners, ordinary member filters, Core source filters, and result filters combine with AND.

Pivot owns these contributions. Clearing, editing, unlinking, or destroying a chart removes only its contribution. Contributions are ephemeral in Pivot configuration; the chart model owns their persistence. If a layout change removes a predicate field, Pivot drops the entire affected contribution after a successful commit rather than weakening its tuples. Prevented, failed, or superseded selection operations retain the committed chart model. If rendering fails after filtering and restoring the previous native contribution also fails, Pivot retires that owner and reports a selection error. Future queries omit the owner; the last committed remote view remains until a successful refresh.

Destroying a chart disposes its filter owner even when ordinary configuration updates are prevented. If the server cannot refresh during disposal, a selection error reports the cleanup failure and the last committed remote view remains visible. The disposed contribution is removed from future queries; it is not retained as a hidden filter after its chart is gone.

Native filtering requires a linked active Pivot and meaningful source member predicates. Dimensionless totals, synthetic Top/Bottom Other members, and ambiguous field mappings cannot be used as raw filters. A server adapter that explicitly advertises filter: false cannot apply a native chart filter.

Peer highlighting requires crossHighlight: true on both participating charts. It compares shared dimension fields across layouts and leaves unrelated charts unaffected. Measure identity distinguishes local selected cells; peer matching uses dimensions. Highlight updates are silent and are not copied into each peer’s persisted selection.

In Event mode, listen for pivot-chart-selection-request, inspect its semantic proposal, and explicitly call setSelection when the application accepts it:

grid.addEventListener('pivot-chart-selection-request', async event => {
const { chartId, proposed } = event.detail;
if (await acceptSelection(proposed)) {
await charts.setChartSelection(chartId, proposed);
}
});

pivot-chart-before-selection is preventable. Committed changes emit pivot-chart-selection-changed; failures emit pivot-chart-selection-error. Details include chart ID, operation ID, revision, origin, interaction mode, proposed selection, and current selection. Received highlighting and redraws never emit these selection actions.

Custom user Clear controls should call charts.requestChartSelectionClear(chartId, origin) so Event mode can delegate the request. chart.clearSelection() and charts.clearChartSelection(chartId) are explicit application commits, including in Event mode.

  • Use select/highlight behavior for emphasis and filter behavior for source reduction; a selected mark does not always filter the report.
  • Chart-local query filters and chart-owned shared filters are separate. Clearing one chart’s selection releases only that chart’s filter contribution.
  • Event mode asks the application to accept a selection; the application must commit it explicitly.

See navigation and accessibility, Pivot filtering and the interaction API.