JavaScript

Search results

Selection in JavaScript Chart control

30 Mar 2023 / 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

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>
</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

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>
</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

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>
</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

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>
</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

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>
</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

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>
</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.

Source

Preview

index.ts

index.html

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>
</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

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>
</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 in JavaScript Chart control

Point

Series

Cluster

Rectangular selection

Selection type

Selection on load

Selection through on legend

Customization for selection

See Also