Selection in EJ2 TypeScript Chart control

8 May 202324 minutes to read

Chart provides selection support for the series and its data points on mouse click.

When Mouse is clicked on the data points, the corresponding series legend also will be selected.

We have different types of selection mode for selecting a data.

  • None
  • Point
  • Series
  • Cluster
  • DragXY
  • DragX
  • DragY

Point

You can select a point, by setting selectionMode to point.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column'
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column'
    }],
    // selection mode as point
    selectionMode: 'Point',
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Series

You can select a series, by setting selectionMode to series.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData ,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column'
    }],
    // selection mode as series
    selectionMode: 'Series',
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Cluster

You can select the points that corresponds to the same index in all the series, by setting selectionMode to cluster.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData ,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column'
    }],
    // selection mode as cluster
    selectionMode: 'Cluster',
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Rectangular selection

DragXY, DragX and DragY

To fetch a collection of data under a particular region, you have to set selectionMode as DragXY.

  • DragXY - Allow us to select data with respect to both horizontal and vertical axis.
  • DragX - Allow us to select data with respect to horizontal axis.
  • DragY - Allow us to select data with respect to vertical axis.

The selected data’s are returned as an array collection in the
dragComplete event.

import { Chart, ScatterSeries, Legend, Selection } from '@syncfusion/ej2-charts';
import { rectData } from './datasource.ts';
Chart.Inject(ScatterSeries, Legend, Selection);

let chart: Chart = new Chart({
    series: [
        {
            type: 'Scatter',
            dataSource: rectData,
            xName: 'x',
            yName: 'y', name: 'Product A',
            marker: {
                shape: 'Triangle',
                width: 10, height: 10
            }
        },
    ],
    // selection mode as dragxy
    selectionMode: 'DragXY',
    title: 'Height Vs Weight'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Selection type

You can select multiple points or series, by enabling the isMultiSelect
property.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData ,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column'
    }],
    selectionMode: 'Series',
    // multipselect forselection
    isMultiSelect: true,
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Selection on load

You can able to select a point or series programmatically on a chart using selectedDataIndexes property.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts'
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData ,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        animation: {enable: false},
        selectionStyle: 'chartSelection1'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column',
        animation: {enable: false},
        selectionStyle: 'chartSelection2'
    }, {
        dataSource: selectionData ,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column',
        animation: {enable: false},
        selectionStyle: 'chartSelection3'
    }],
    selectionMode: 'Point',
    isMultiSelect: true,
    // Selcted data indexes for chart series
    selectedDataIndexes: [
        { series: 0, point: 1}, { series: 2, point: 3}
    ],
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Selection through on legend

You can able to select a point or series through on legend using toggleVisibility property. Also, use enableHighlight property for highlighting the series through legend.

import { Chart, ColumnSeries, Category, Legend, Selection, Highlight } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts'
Chart.Inject(ColumnSeries, Category, Legend, Selection, Highlight);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        animation: {enable: false},
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column',
        animation: {enable: false},
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column',
        animation: {enable: false},
    }],
    // Selection through on legend
    legendSettings: { visible: true, toggleVisibility: false, enableHighlight: true},
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Customization for selection

You can apply custom style to selected points or series with selectionStyle property.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
import { selectionData } from './datasource.ts'
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[{
        dataSource: selectionData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        //Selection style for chart series selection
        selectionStyle: 'chartSelection1'
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column',
        selectionStyle: 'chartSelection2'
    }, {
        dataSource: selectionData,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column',
        selectionStyle: 'chartSelection3'
    }],
    selectionMode: 'Point',
    isMultiSelect: true,
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

See Also