G2

Overview

The elementSelect interaction targets chart elements. When clicking an element, that element will be selected.

Trigger: Click element.
End: Click the selected element again.
Affected states:

Selected elements change to selected state.

Other elements change to unselected state.

Built-in interaction states:

({
  // Selected state elements have 1px black border
  state: { selected: { lineWidth: '1', stroke: '#000' } },
});

The interaction supports two modes:

Multi-select mode (default): Multiple elements can be selected simultaneously
Single-select mode: Enabled by setting single: true, only one element can be selected at a time

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

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

chart.options({
  type: 'interval',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  state: { selected: { fill: 'orange' }, unselected: { opacity: 0.5 } },
  axis: { y: { labelFormatter: '.0%' } },
  interaction: { elementSelect: true },
});

chart.render();

Usage

There are two ways to configure the elementSelect interaction:

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

({
  type: 'interval',
  interaction: { elementSelect: true }, // Use default configuration
});

Second, pass configuration options to configure the interaction.

({
  type: 'line',
  interaction: {
    elementSelect: {
      background: true,
      single: true, // Set to single-select mode
    },
  },
});

Configuration Level

Interaction can be configured at the Mark level:

({
  type: 'interval',
  interaction: { elementSelect: 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: { elementSelect: true },
});

Configuration Options

Element select interaction configuration has two parts:

Interaction configuration
Element selection style

Interaction Configuration

Property	Description	Type	Default
background	Whether to highlight background	`boolean`	false
region	Whether clicking empty area triggers selection	`boolean`	false
single	Whether single-select mode. When set to true, only one element can be selected at a time. Clicking a selected element deselects it	`boolean`	false
multipleSelectHotkey	Hotkey code for multi-select. Hold hotkey to enable multi-select. When set, `single` becomes invalid. Default to multi-select mode	`string` \| `string[]`	-

Element Selection Style

Element selection style, see example Custom Selection

Property	Description	Type	Default
offset	Offset in the main direction	number	`0`
radius	Element border radius	number \| (datum, index, data) => number	`0`
fill	Element fill color	string \| (datum, index, data) => string	-
fillOpacity	Element fill opacity	number \| (datum, index, data) => number	-
stroke	Element stroke	string \| (datum, index, data) => string	-
strokeOpacity	Element stroke opacity	number \| (datum, index, data) => number	-
lineWidth	Element stroke width	number \| (datum, index, data) => number	-
lineDash	Element stroke dash configuration. First value is dash length, second is gap length. Setting lineDash to [0,0] means no stroke.	[number,number] \| (datum, index, data) => [number , number]	-
opacity	Element overall opacity	number \| (datum, index, data) => number	-
shadowColor	Element shadow color	string \| (datum, index, data) => string	-
shadowBlur	Element shadow Gaussian blur coefficient	number \| (datum, index, data) => number	-
shadowOffsetX	Set horizontal distance of shadow from element	number \| (datum, index, data) => number	-
shadowOffsetY	Set vertical distance of shadow from element	number \| (datum, index, data) => number	-
cursor	Element mouse cursor style. Same as CSS cursor style.	string \| (datum, index, data) => string	`default`
backgroundRadius	Background border radius	number \| (datum, index, data) => number	`0`
backgroundFill	Background fill color	string \| (datum, index, data) => string	`transparent`
backgroundFillOpacity	Background fill opacity	number \| (datum, index, data) => number	-
backgroundStroke	Background stroke	string \| (datum, index, data) => string	-
backgroundStrokeOpacity	Background stroke opacity	number \| (datum, index, data) => number	-
backgroundLineWidth	Background stroke width	number \| (datum, index, data) => number	-
backgroundLineDash	Background stroke dash configuration. First value is dash length, second is gap length. Setting lineDash to [0,0] means no stroke.	[number,number] \| (datum, index, data) => [number , number]	-
backgroundOpacity	Background overall opacity	number \| (datum, index, data) => number	-
backgroundShadowColor	Background shadow color	string \| (datum, index, data) => string	-
backgroundShadowBlur	Background shadow Gaussian blur coefficient	number \| (datum, index, data) => number	-
backgroundShadowOffsetX	Set horizontal distance of shadow from background	number \| (datum, index, data) => number	-
backgroundShadowOffsetY	Set vertical distance of shadow from background	number \| (datum, index, data) => number	-
backgroundCursor	Background mouse cursor style. Same as CSS cursor style.	string \| (datum, index, data) => string	`default`

When configuring background in selected elements, it's not configured as an object, but using the background prefix with property names.

({
  state: {
    selected: {
      offset: 10,
      radius: 50,
      fill: '#1890FF',
      fillOpacity: 0.9,
      stroke: '#40A9FF',
      strokeOpacity: 0.9,
      lineWidth: 2,
      lineDash: [4, 8],
      opacity: 1,
      shadowColor: '#1890FF',
      shadowBlur: 10,
      shadowOffsetX: 5,
      shadowOffsetY: 5,
      cursor: 'pointer',
      backgroundRadius: 50,
      backgroundFill: '#E6F7FF',
      backgroundFillOpacity: 0.9,
      backgroundStroke: '#91D5FF',
      backgroundStrokeOpacity: 0.9,
      backgroundLineWidth: 2,
      backgroundLineDash: [4, 8],
      backgroundOpacity: 1,
      backgroundShadowColor: '#91D5FF',
      backgroundShadowBlur: 10,
      backgroundShadowOffsetX: 5,
      backgroundShadowOffsetY: 5,
      backgroundCursor: 'pointer',
    },
  },
});

Events

Listening to Events

The following events are supported:

element:select - Triggered when element is selected
element:unselect - Triggered when element is deselected

chart.on('element:select', (e) => {
  console.log(e.data.data);
  console.log(e.nativeEvent);
});

chart.on('element:unselect', (e) => {
  console.log(e.nativeEvent);
});

Triggering Interaction

The following events are supported:

element:select - Select data
element:unselect - Deselect

chart.emit('element:select', {
  data: { data: [{ population: 5038433 }, { population: 3983091 }] },
});

chart.emit('element:unselect', {});

Examples

Basic Selection

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  transform: [{ type: 'sortX', by: 'y', reverse: true, slice: 5 }],
  axis: { y: { labelFormatter: '.0%' } },
  interaction: { elementSelect: { background: true } },
});

chart.render();

Custom Selection

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  transform: [{ type: 'sortX', by: 'y', reverse: true, slice: 5 }],
  axis: { y: { labelFormatter: '.0%' } },
  state: {
    selected: {
      offset: 10,
      radius: 50,
      fill: (d) => (d.frequency > 0.1 ? '#F5222D' : '#1890FF'),
      fillOpacity: 0.9,
      stroke: (d) => (d.frequency > 0.1 ? '#FF4D4F' : '#40A9FF'),
      strokeOpacity: 0.9,
      lineWidth: 2,
      lineDash: [4, 8],
      opacity: 1,
      shadowColor: (d) => (d.frequency > 0.1 ? '#F5222D' : '#1890FF'),
      shadowBlur: 10,
      shadowOffsetX: 5,
      shadowOffsetY: 5,
      cursor: 'pointer',
      backgroundRadius: 50,
      backgroundFill: (d) => (d.frequency > 0.1 ? '#FFF1F0' : '#E6F7FF'),
      backgroundFillOpacity: 0.9,
      backgroundStroke: (d) => (d.frequency > 0.1 ? '#FFA39E' : '#91D5FF'),
      backgroundStrokeOpacity: 0.9,
      backgroundLineWidth: 2,
      backgroundLineDash: [4, 8],
      backgroundOpacity: 1,
      backgroundShadowColor: (d) => (d.frequency > 0.1 ? '#FFA39E' : '#91D5FF'),
      backgroundShadowBlur: 10,
      backgroundShadowOffsetX: 5,
      backgroundShadowOffsetY: 5,
      backgroundCursor: 'pointer',
    },
  },
  interaction: {
    elementSelect: {
      background: true,
    },
  },
});

chart.render();

Single-Select Mode

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  transform: [{ type: 'sortX', by: 'y', reverse: true, slice: 5 }],
  axis: { y: { labelFormatter: '.0%' } },
  interaction: {
    elementSelect: {
      single: true, // Set to single-select mode
      background: true,
    },
  },
});

chart.render();

Multi-Select Mode

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  autoFit: true,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  transform: [{ type: 'sortX', by: 'y', reverse: true, slice: 5 }],
  axis: { y: { labelFormatter: '.0%' } },
  interaction: {
    elementSelect: {
      multipleSelectHotkey: 'ShiftLeft', // Hold left Shift key to enter multi-select mode
      background: true,
    },
  },
});

chart.render();