Overview

brushYHighlight is a specialized brushHighlight interaction. While retaining the basic highlight functionality, it fixes the x-axis brush range to the full domain (from minimum to maximum values), focusing specifically on data selection operations in the y-axis direction. This is suitable for vertical comparison analysis (such as comparing yields of financial products, studying vertical distribution of experimental data), improving operation precision by eliminating horizontal direction interference.

• Trigger: Brush selection of elements.

• End: Click on chart area.

• Affected states:

Elements within the brush range change to active state.

Elements outside the brush range change to inactive state.

Built-in interaction states:

({
  inactive: { opacity: 0.5 },
});

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: { brushYHighlight: true },
});

chart.render();

Usage

There are two ways to configure the brushYHighlight interaction:

First, pass a boolean to set whether to enable the interaction.

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

Second, pass configuration options to configure the interaction.

({
  type: 'line',
  interaction: {
    brushYHighlight: {
      series: true,
    },
  },
});

Configuration Level

Interaction can be configured at the Mark level:

({
  type: 'interval',
  interaction: { brushYHighlight: 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: { brushYHighlight: 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.

({
  interaction: {
    brushYHighlight: {
      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',
    },
  },
});

maskHandle

The eight directional handles are named as follows (based on cardinal directions). Set corresponding properties using the format mask[handleName][styleAttribute], or use maskHandleSize to set width.

Events

Listening to Events

The following events are supported:

• brush:start - Triggered when starting to create brush
• brush:end - Triggered when brush update size and position is completed
• brush:remove - Triggered when brush is removed
• brush:highlight - Triggered when brush changes size and position

chart.on('brush:highlight', (e) => {
  console.log(e.data.selection);
  console.log(e.nativeEvent);
});

Triggering Interaction

The following events are supported:

• brush:highlight - Highlight data
• brush:remove - Remove brush

chart.emit('brush:remove');
chart.emit('brush:highlight', { data: { selection } });

Examples