Dashboard Chart Interactions#

Overview#

Dashboard chart interactions in Superset allow clicking a data point in one chart to apply a cross-filter that narrows other charts in scope. The system has three distinct responsibilities:

1. Cross-filter emission — translating a click event into a DataMask that updates dashboard Redux state, causing filtered charts to re-query.
2. Visual highlighting — immediately dimming unselected data points on the emitting chart via ECharts highlight/downplay actions, without re-rendering.
3. Scope configuration — determining which charts on the dashboard are affected by a given chart's cross-filter.

These are implemented across four primary files:

• utils/eventHandlers.ts — click-to-dataMask logic
• components/Echart.tsx — highlight/downplay dispatch
• src/dashboard/util/crossFilters.ts — scope resolution
• types.ts — shared type contracts

Cross-Filter Emission (Click → DataMask)#

The entry point for cross-filtering is allEventHandlers in eventHandlers.ts, which wires ECharts click and contextmenu event handlers onto charts that have groupby columns configured.

Click flow:

clickEventHandler is a no-op unless emitCrossFilters is true — a per-chart toggle set in the dashboard edit UI. When enabled, it calls getCrossFilterDataMask(name)?.dataMask and dispatches it via setDataMask. 1

getCrossFilterDataMask implements toggle semantics: clicking an already-selected value removes it from the selection; clicking an unselected value replaces the selection with just that value. It produces: 2

• dataMask.extraFormData.filters — one IN filter clause per groupby column, using labelMap to resolve multi-column groupby values by index.
• dataMask.filterState — { value: groupbyValues, selectedValues: values } for downstream chart state.

Context menu flow:

contextMenuEventHandler surfaces three options to the dashboard context menu: drillToDetail, crossFilter (the same dataMask as the click path), and drillBy. 3

Visual Highlighting (highlight / downplay)#

Selection state is reflected on the ECharts canvas through direct action dispatch — not a setOption re-render — keeping the interaction fast.

Data flow into Echart.tsx:

selectedValues (Record<number, string>) maps a data index to its series name for each currently selected item 4. This prop is populated by each chart's transformProps from the dashboard Redux filterState.selectedValues, and passed down to <Echart>.

Diff and dispatch:

Inside Echart.tsx, currentSelection is memoized as Object.keys(selectedValues) 5 and compared against previousSelection (a useRef) in a dedicated useEffect:

1. downplay is dispatched for indices that were in previousSelection but are not in currentSelection — dimming items that left the selection. 6
2. highlight is dispatched for all indices in currentSelection — visually emphasizing selected items.
3. previousSelection.current is updated to currentSelection.

Both actions use dataIndex (an array of index strings) as the targeting mechanism, which maps to ECharts' native series data indices. This sidesteps a full setOption call on every filter interaction. 7

Filter Scope Configuration#

Which charts a cross-filter affects is computed by getCrossFiltersConfiguration in crossFilters.ts. 8

Only chart types with Behavior.InteractiveChart in their metadata are eligible to emit cross-filters. The function iterates the dashboard layout, checks each chart's registered behaviors, and resolves its scope: 9

• Global scope (GLOBAL_SCOPE_POINTER): the chart's filter applies to all other charts on the dashboard, using global_chart_configuration.scope from dashboard metadata.
• Custom scope: a NativeFilterScope stored per-chart in metadata.chart_configuration[chartId], resolved to a list of chart IDs via getChartIdsInFilterScope.
• Default: if a chart hasn't had its scope saved, DEFAULT_CROSS_FILTER_SCOPING is used and all charts are in scope.

The resulting chartConfiguration object (keyed by chart ID) contains crossFilters.chartsInScope — the list of chart IDs that will re-query when this chart emits a filter. This is stored in dashboard metadata and re-computed on dashboard save via saveDashboardRequest.

isCrossFiltersEnabled reads metadataCrossFiltersEnabled and defaults to true when the flag is undefined, so cross-filtering is on by default. 10

Key Types and Data Flow#

CrossFilterTransformedProps 11 — the contract between transformProps and eventHandlers:

• groupby: columns used to build filter clauses
• labelMap: maps series display name → raw column values per groupby index
• setDataMask: Redux dispatch hook for publishing the selection
• selectedValues: current selection state (index → name)
• emitCrossFilters: per-chart toggle enabling cross-filter emission

EchartsProps 12 — what <Echart> receives, including selectedValues?: Record<number, string> for highlight/downplay.

End-to-end flow:

User click
  → ECharts 'click' event
  → clickEventHandler (emitCrossFilters gate)
  → getCrossFilterDataMask → DataMask
  → setDataMask (Redux dispatch)
  → dashboard dataMask state updates
  → cross-scoped charts re-query
  → filterState.selectedValues flows back via transformProps
  → EchartsProps.selectedValues updates
  → highlight/downplay useEffect diffs and dispatches ECharts actions

labelMap is constructed during transformProps for each chart type, mapping the ECharts series name field to the underlying raw groupby column values. This is what enables getCrossFilterDataMask to emit correctly typed IN filter clauses for multi-column groupby.

Key Files#