Search results

Selection in JavaScript Chart control

22 Jul 2021 / 6 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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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},
}, {
    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},
}],
selectionMode: 'Point',
// Selection through on legend
legendSettings: { visible: true, toggleVisibility: false }
title: 'Olympic Medals'
}, '#element');
Copied to clipboard
<!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>
</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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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>
</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