brushFilter

Overview

brushFilter interaction is primarily used to implement dynamic range filtering functionality for chart elements. Through mouse brush selection operations, users can define specific areas on the chart (based on x/y coordinate systems), and G2 will re-render chart elements within that area that meet the filtering conditions.

Typical application scenarios:

Data exploration: Quickly focus on specific data intervals for in-depth analysis

Anomaly detection: Locate anomalous scattered data points

Comparative analysis: Horizontal/vertical comparison of data characteristics across different intervals

import { Chart } from '@antv/g2';

const chart = new Chart({ container: 'container' });

chart.options({
  type: 'point',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/basement_prod/6b4aa721-b039-49b9-99d8-540b3f87d339.json',
  },
  encode: { x: 'height', y: 'weight', color: 'gender' },
  state: { inactive: { stroke: 'gray' } },
  interaction: { brushFilter: true },
});

chart.render();

Usage

There are two ways to configure brushFilter interaction:

Quick Enable Mode

Enable interaction with a boolean value using default configuration:

({
  type: 'interval',
  interaction: { brushFilter: true }, // Enable brush filter with default configuration
});

Custom Configuration Mode

Fine-tune interaction behavior through configuration options:

({
  type: 'interval',
  interaction: {
    brushFilter: {
      reverse: false, // Disable reverse selection
      maskFill: '#rgba(0,0,0,0.3)', // Custom mask color
    },
  },
});

Configuration Level

Interaction can be configured at the Mark level:

({
  type: 'interval',
  interaction: { brushFilter: true },
});

It can also be configured at the View level. Interactions declared on the view will be passed to marks declared in children. If the mark has declared the corresponding interaction, they will be merged; otherwise, it won’t be affected.

({
  type: 'view',
  interaction: { brushFilter: true },
});

Configuration Options

mask

Configure the style of the brush area mask.

When configuring the mask style of the brush area, it’s not configured as an object, but using the mask prefix with property names.

Style configuration example:

({
  interaction: {
    brushFilter: {
      maskFill: '#000',
      maskFillOpacity: 0.2,
      maskStroke: 'red',
      maskStrokeOpacity: 0.9,
      maskLineWidth: 2,
      maskLineDash: [4, 8],
      maskOpacity: 0.2,
      maskShadowColor: '#d3d3d3',
      maskShadowBlur: 10,
      maskShadowOffsetX: 10,
      maskShadowOffsetY: 10,
      maskCursor: 'pointer',
    },
  },
});

Events

Listening to Events

Listen to brush filter actions:

chart.on('brush:filter', (event) => {
  const {
    data, // Filtered data collection
    nativeEvent, // Original DOM event
  } = event;
  console.log('Current selected range:', data.selection);
});

Triggering Interaction

Trigger filtering programmatically:

// Set x-axis range [50,100], y-axis range [20,80]
chart.emit('brush:filter', {
  data: {
    selection: [
      [50, 100],
      [20, 80],
    ],
  },
});

Examples

import { Chart } from '@antv/g2';

const data = [
  { letter: 'A', frequency: 0.08167 },
  { letter: 'B', frequency: 0.01492 },
  { letter: 'C', frequency: 0.02782 },
  { letter: 'D', frequency: 0.04253 },
  { letter: 'E', frequency: 0.12702 },
  { letter: 'F', frequency: 0.02288 },
  { letter: 'G', frequency: 0.02015 },
  { letter: 'H', frequency: 0.06094 },
  { letter: 'I', frequency: 0.06966 },
  { letter: 'J', frequency: 0.00153 },
  { letter: 'K', frequency: 0.00772 },
  { letter: 'L', frequency: 0.04025 },
  { letter: 'M', frequency: 0.02406 },
  { letter: 'N', frequency: 0.06749 },
  { letter: 'O', frequency: 0.07507 },
  { letter: 'P', frequency: 0.01929 },
  { letter: 'Q', frequency: 0.00095 },
  { letter: 'R', frequency: 0.05987 },
  { letter: 'S', frequency: 0.06327 },
  { letter: 'T', frequency: 0.09056 },
  { letter: 'U', frequency: 0.02758 },
  { letter: 'V', frequency: 0.00978 },
  { letter: 'W', frequency: 0.0236 },
  { letter: 'X', frequency: 0.0015 },
  { letter: 'Y', frequency: 0.01974 },
  { letter: 'Z', frequency: 0.00074 },
];

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  autoFit: true,
  data,
  encode: { x: 'letter', y: 'frequency' },
  interaction: {
    brushFilter: {
      maskFill: '#000',
      maskFillOpacity: 0.2,
      maskStroke: 'red',
      maskStrokeOpacity: 0.9,
      maskLineWidth: 2,
      maskLineDash: [4, 8],
      maskOpacity: 0.2,
      maskShadowColor: '#d3d3d3',
      maskShadowBlur: 10,
      maskShadowOffsetX: 10,
      maskShadowOffsetY: 10,
      maskCursor: 'pointer',
    },
  },
});

chart.render();