brushAxisHighlight

Overview

The brushAxisHighlight interaction targets the coordinate axis, allowing users to brush select areas on axis to highlight corresponding chart elements. This interaction is particularly suitable for parallel coordinate charts, helping users quickly filter and analyze multi-dimensional data.

• Trigger: Brush selection on the coordinate axis.
• End: Click on non-brush areas of the axis or double-click on an existing brush area.
• Affected States:
  • Elements within the brush range become active.
  • Elements outside the brush range become inactive.

Built-in interaction states:

({
  // Define inactive state element opacity as 0.5
  state: { inactive: { opacity: 0.5 } },
});

Usage

There are two ways to configure the brushAxisHighlight interaction:

First, pass a boolean to enable or disable the interaction.

({
  type: 'line',
  interaction: { brushAxisHighlight: true }, // Use default configuration
});

Second, pass configuration options to customize the interaction.

({
  type: 'line',
  interaction: {
    brushAxisHighlight: {
      maskFill: 'red',
      maskOpacity: 0.8,
    },
  },
});

Configuration Levels

The interaction can be configured at the Mark level:

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

It can also be configured at the View level, where interactions declared on the view are passed to marks declared in children:

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

Configuration Options

mask

Configure the style of the brush area mask.

When configuring the brush area mask style, instead of using an object format, configure with mask prefix plus property:

({
  interaction: {
    brushAxisHighlight: {
      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 (using compass directions). Set corresponding properties using the format mask[handleName][styleAttribute], or set width with maskHandleSize.

Events

Listening to Events

The following events are supported:

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

chart.on('brushAxis:highlight', (event) => {
  const { data, nativeEvent } = event;
  if (nativeEvent) console.log('brushAxis:highlight', data);
});

chart.on('brushAxis:remove', (event) => {
  const { data, nativeEvent } = event;
  if (nativeEvent) console.log('brushAxis:remove', data);
});

Triggering Interactions

The following events are supported:

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

chart.emit('brushAxis:highlight', {
  data: { selection: [[20, 30], undefined, [100, 300]] },
});

chart.emit('brushAxis:remove', {});

Examples

Parallel Coordinate Brush Highlighting

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

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

const axis = {
  zIndex: 1,
  titlePosition: 'right',
  line: true,
  style: {
    labelStroke: '#fff',
    labelStrokeWidth: 5,
    labelFontSize: 10,
    labelStrokeLineJoin: 'round',
    titleStroke: '#fff',
    titleFontSize: 10,
    titleStrokeWidth: 5,
    titleStrokeLineJoin: 'round',
    titleTransform: 'translate(-50%, 0) rotate(-90)',
    lineStroke: 'black',
    tickStroke: 'black',
    lineStrokeWidth: 1,
  },
};

chart.options({
  type: 'line',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/cars3.json',
  },
  coordinate: { type: 'parallel' },
  encode: {
    position: [
      'economy (mpg)',
      'cylinders',
      'displacement (cc)',
      'power (hp)',
      'weight (lb)',
      '0-60 mph (s)',
      'year',
    ],
    color: 'weight (lb)',
  },
  style: {
    lineWidth: 1.5,
    strokeOpacity: 0.4,
  },
  scale: {
    color: {
      type: 'sequential',
      palette: 'brBG',
      offset: (t) => 1 - t,
    },
  },
  legend: {
    color: {
      length: 400,
      layout: { justifyContent: 'center' },
    },
  },
  state: {
    active: { lineWidth: 5 },
    inactive: { stroke: '#eee', opacity: 0.5 },
  },
  axis: Object.fromEntries(
    Array.from({ length: 7 }, (_, i) => [
      `position${i === 0 ? '' : i}`,
      {
        ...axis,
        title: true,
      },
    ]),
  ),
  interaction: {
    brushAxisHighlight: {
      maskFill: '#000',
      maskFillOpacity: 0.2,
      maskStroke: '#1890ff',
      maskLineWidth: 1,
    },
    tooltip: false,
  },
});

chart.render();

Custom Handle Styles

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

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

chart.options({
  type: 'point',
  data: [
    { x: 10, y: 5, category: 'A' },
    { x: 15, y: 8, category: 'A' },
    { x: 20, y: 12, category: 'A' },
    { x: 25, y: 15, category: 'A' },
    { x: 30, y: 10, category: 'B' },
    { x: 35, y: 7, category: 'B' },
    { x: 40, y: 13, category: 'B' },
    { x: 45, y: 18, category: 'B' },
    { x: 50, y: 20, category: 'C' },
    { x: 55, y: 16, category: 'C' },
    { x: 60, y: 9, category: 'C' },
    { x: 65, y: 6, category: 'C' },
  ],
  encode: {
    color: 'category',
    x: 'x',
    y: 'y',
  },
  state: {
    inactive: { stroke: 'gray', opacity: 0.5 },
  },
  interaction: {
    brushAxisHighlight: {
      maskHandleSize: 20,
      maskHandleNFill: 'blue',
      maskHandleEFill: 'red',
      maskHandleSFill: 'green',
      maskHandleWFill: 'yellow',
      maskHandleNWFill: 'black',
      maskHandleNEFill: 'steelblue',
      maskHandleSEFill: 'pink',
      maskHandleSWFill: 'orange',
    },
  },
});

chart.render();