Selection in React Charts

The Chart component provides selection support for both series and individual data points via click or tap interactions.

When selection is enabled with the Series or Cluster mode, clicking a data point also selects the corresponding series legend item.

Prerequisites

Before using the selection features, ensure the React Chart getting started steps are complete and the Selection module is injected into the chart’s services.

import { ChartComponent, Inject, Selection, LineSeries } from '@syncfusion/ej2-react-charts';

<ChartComponent>
  <Inject services={[LineSeries, Selection]} />
</ChartComponent>

Selection modes

Multiple selection modes are available. The supported selectionMode values are:

Mode Description
None Disables selection.
Point Selects a single data point.
Series Selects an entire series.
Cluster Selects all data points that share the same index across series.
DragXY Selects data points within a rectangular region (both axes).
DragX Selects data points within a rectangular region (horizontal axis).
DragY Selects data points within a rectangular region (vertical axis).
Lasso Selects data points inside a freehand-drawn region.

Point

A single data point can be selected by setting the selectionMode property to Point.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals' selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Olympic Medals' selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Series

An entire series can be selected by setting the selectionMode property to Series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals' selectionMode='Series'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Olympic Medals' selectionMode='Series'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Cluster

Cluster selection allows selection of data points that share the same index across all series. This can be enabled by setting the selectionMode property to Cluster.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals' selectionMode='Cluster'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Olympic Medals' selectionMode='Cluster'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Lasso selection

Lasso selection allows users to draw a freehand shape on the chart to select data points within that region. Set the selectionMode property to Lasso to enable this feature. Multiple regions can be selected on the same chart using this mode.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Tooltip, Selection, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {
    const marker = { width: 12, height: 12 };
    return <ChartComponent id='charts' selectionMode='Lasso' title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip,Selection, DataLabel, ScatterSeries}
from'@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {

  const marker = { width: 12, height: 12 };

  return <ChartComponent id='charts'
      selectionMode='Lasso'
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let dragData = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 },  { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];
export let dragData: Object[] = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 },  { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];

Multi-selection

Multiple data points or series can be selected simultaneously by enabling the isMultiSelect property. The isMultiSelect property accepts a boolean value and defaults to false.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals' isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Olympic Medals' isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Multi-region selection

Multiple regions can be selected on the chart by setting the allowMultiSelection property to true. The allowMultiSelection property accepts a boolean value and defaults to false, and applies to rectangular (DragXY, DragX, DragY) and Lasso selection modes.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Tooltip, Selection, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {
    const marker = { width: 12, height: 12 };
    return <ChartComponent id='charts' selectionMode='Lasso' allowMultiSelection={true} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip,Selection, DataLabel, ScatterSeries}
from'@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {

  const marker = { width: 12, height: 12 };

  return <ChartComponent id='charts'
      selectionMode='Lasso' allowMultiSelection={true}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let dragData = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 }, { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];
export let dragData: Object[] = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 },  { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];

Rectangular selection

DragXY, DragX, and DragY

Rectangular selection enables users to select a group of data points within a defined region by setting the selectionMode property accordingly.

  • DragXY – Selects data points along both the horizontal and vertical axes.
  • DragX – Selects data points along the horizontal axis.
  • DragY – Selects data points along the vertical axis.

The selected data points are returned as an array collection through the dragComplete event. The dragComplete event payload includes the selected data points and the rectangular region (x and y range).

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Tooltip, Selection, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {
    const marker = { width: 12, height: 12 };
    return <ChartComponent id='charts' selectionMode='DragXY' title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip,Selection, DataLabel, ScatterSeries}
from'@syncfusion/ej2-react-charts';
import { dragData } from './datasource';
function App() {

  const marker = { width: 12, height: 12 };

  return <ChartComponent id='charts'
      selectionMode='DragXY'
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, Selection]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={dragData} xName='x' yName='y' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let dragData = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 },  { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];
export let dragData: Object[] = [
    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
    { x: 2011, y: 9 },  { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
];

Selection on load

Data points or series can be selected programmatically when the chart is loaded by using the selectedDataIndexes property. The selectedDataIndexes value is an array of { seriesIndex, pointIndex } objects.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const selectedData = [{ series: 0, point: 1 }, { series: 2, point: 3 }];
    const primaryxAxis = { valueType: 'Category' };
    const animation = { enable: false };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals' selectedDataIndexes={selectedData} isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column' selectionStyle='chartSelection1' animation={animation}></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column' selectionStyle='chartSelection2' animation={animation}></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column' selectionStyle='chartSelection3' animation={animation}></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection }
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const selectedData: any[] = [{ series: 0, point: 1 }, { series: 2, point: 3 }];
  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const animation = { enable: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='Olympic Medals' selectedDataIndexes={selectedData}
      isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column' selectionStyle='chartSelection1' animation={animation} ></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column' selectionStyle='chartSelection2' animation={animation}></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column' selectionStyle='chartSelection3' animation={animation}></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Selection through legend

Points or series can also be selected through the legend by enabling the toggleVisibility property.
To visually emphasize the selected series, use the enableHighlight property.

When highlightMode is set to Series, Cluster, or Point, legend highlighting occurs even if enableHighlight is set to false. In this case, highlightMode takes precedence, and hovering over legend items highlights the corresponding series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Highlight, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
  const primaryxAxis = { valueType: 'Category' };
  const legendSettings = { visible: true, toggleVisibility: false, enableHighlight: true };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} title='Olympic Medals' selectionMode='Cluster'>
    <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category, Highlight]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
      </SeriesDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
      </SeriesDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
  Legend, Category, Tooltip, DataLabel, ColumnSeries, Highlight, LegendSettingsModel, Selection
}
  from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const legendSettings: LegendSettingsModel = { visible: true, toggleVisibility: false, enableHighlight: true };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}
    title='Olympic Medals' selectionMode='Cluster' legendSettings={legendSettings}>
    <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category, Highlight]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column'>
      </SeriesDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column'>
      </SeriesDirective>
      <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Customization for selection

Custom styles can be applied to selected points or series by using the selectionStyle property. The selectionStyle property accepts a string value (for example, a CSS color) and applies to the selected point or series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Countries' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column' selectionStyle='chartSelection1'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column' selectionStyle='chartSelection2'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column' selectionStyle='chartSelection3'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ColumnSeries,  Selection }
from'@syncfusion/ej2-react-charts';
import { selectionData } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Medals' isMultiSelect={true} selectionMode='Point'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Selection, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='gold' name='Gold' type='Column' selectionStyle='chartSelection1'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='silver' name='Silver' type='Column' selectionStyle='chartSelection2'></SeriesDirective>
        <SeriesDirective dataSource={selectionData} xName='country' yName='bronze' name='Bronze' type='Column' selectionStyle='chartSelection3'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let selectionData = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let selectionData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Note: To use the selection feature, inject the Selection module into the chart’s services as shown in the Prerequisites section.

Troubleshooting

  • If selection has no effect, confirm the Selection module is injected via <Inject services={[Selection]} />.
  • For drag-based selection, ensure the chart receives pointer events (no overlapping elements blocking the chart area).
  • If isMultiSelect or allowMultiSelection does not behave as expected, verify the selectionMode is set to a compatible value.

See also