HelpBot Assistant

How can I help you?

Selection in Angular Chart component

3 Feb 202624 minutes to read

The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks.

When a data point is clicked, the corresponding series legend item is also selected.

Multiple selection modes are available to help select and analyze chart data effectively. The supported selection modes are:

None
Point
Series
Cluster
DragXY
DragX
DragY

Point

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

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryXAxis' [title]='title' selectionMode='Point'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' ></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' ></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

Note: To use select feature, we need to Inject SelectionService into the NgModule.providers.

Series

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

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='Series'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' ></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' ></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category'
        };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

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.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='Cluster'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' ></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' ></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

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.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ScatterSeriesService, LegendService, SelectionService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { ChartData } from './chartdata.service';

@Component({
imports: [
         ChartModule
    ],

providers: [ ScatterSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='DragXY'>
        <e-series-collection>
            <e-series [dataSource]='series1' type='Scatter' xName='x' yName='y' name='Male' opacity=0.7 [marker]='marker'></e-series>
            <e-series [dataSource]='series2' type='Scatter' xName='x' yName='y' name='Female' opacity=0.7 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public series1?: Object;
    public series2?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.primaryXAxis = {
            title: 'Height (cm)',
            minimum: 120, maximum: 180,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}cm'
        };
        this.primaryYAxis = {
            title: 'Weight (kg)',
            minimum: 60, maximum: 90,
            labelFormat: '{value}kg',
            rangePadding: 'None'
        };
        this.title = 'Height Vs Weight';
        this.marker = {  width: 10, height: 10 };
        this.series1 = ChartData.prototype.getScatterData().series1;
        this.series2 = ChartData.prototype.getScatterData().series2;
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}

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.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ScatterSeriesService, LegendService, SelectionService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { ChartData } from './chartdata.service';

@Component({
imports: [
         ChartModule
    ],

providers: [ ScatterSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='Lasso'>
        <e-series-collection>
            <e-series [dataSource]='series1' type='Scatter' xName='x' yName='y' name='Male' opacity=0.7 [marker]='marker'></e-series>
            <e-series [dataSource]='series2' type='Scatter' xName='x' yName='y' name='Female' opacity=0.7 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public series1?: Object;
    public series2?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.primaryXAxis = {
            title: 'Height (cm)',
            minimum: 120, maximum: 180,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}cm'
        };
        this.primaryYAxis = {
            title: 'Weight (kg)',
            minimum: 60, maximum: 90,
            labelFormat: '{value}kg',
            rangePadding: 'None'
        };
        this.title = 'Height Vs Weight';
        this.marker = {  width: 10, height: 10 };
        this.series1 = ChartData.prototype.getScatterData().series1;
        this.series2 = ChartData.prototype.getScatterData().series2;
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}

Multi-region selection

Multiple regions can be selected on the chart by setting the allowMultiSelection property to true.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ScatterSeriesService, LegendService, SelectionService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { ChartData } from './chartdata.service';

@Component({
imports: [
         ChartModule
    ],

providers: [ ScatterSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='DragXY' allowMultiSelection='true'>
        <e-series-collection>
            <e-series [dataSource]='series1' type='Scatter' xName='x' yName='y' name='Male' opacity=0.7 [marker]='marker'></e-series>
            <e-series [dataSource]='series2' type='Scatter' xName='x' yName='y' name='Female' opacity=0.7 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public series1?: Object;
    public series2?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.primaryXAxis = {
            title: 'Height (cm)',
            minimum: 120, maximum: 180,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}cm'
        };
        this.primaryYAxis = {
            title: 'Weight (kg)',
            minimum: 60, maximum: 90,
            labelFormat: '{value}kg',
            rangePadding: 'None'
        };
        this.title = 'Height Vs Weight';
        this.marker = {  width: 10, height: 10 };
        this.series1 = ChartData.prototype.getScatterData().series1;
        this.series2 = ChartData.prototype.getScatterData().series2;
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}

Selection type

Multiple data points or series can be selected simultaneously by enabling the isMultiSelect property.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='Point' isMultiSelect='true'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' ></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' ></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

Selection on load

Data points or series can be selected programmatically when the chart is loaded by using the selectedDataIndexes property.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'
            selectionMode='Point' isMultiSelect='true' [selectedDataIndexes]='selectedData'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' selectionStyle='chartSelection1' [animation]='animation'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver' selectionStyle='chartSelection2' [animation]='animation'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' selectionStyle='chartSelection3' [animation]='animation'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public animation?: Object;
    public selectedData?: Object[];
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.animation = { enable: false};
        this.selectedData = [
        { series: 0, point: 1}, { series: 2, point: 3}
    ];
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

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.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'
       [legendSettings]='legendSettings'  selectionMode='Point'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' selectionStyle='chartSelection1' [animation]='animation'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver' selectionStyle='chartSelection2' [animation]='animation'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' selectionStyle='chartSelection3' [animation]='animation'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public animation?: Object;
    public selectedData?: Object[];
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.animation = { enable: false};
        this.legendSettings = { visible: true,  toggleVisibility: false, enableHighlight: true };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

Customization for selection

Custom styles can be applied to selected points or series by using the selectionStyle property.

app.component.ts
app.component.css
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule} from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService} from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { selectionData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' selectionMode='Point' isMultiSelect='true'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' selectionStyle='chartSelection1'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver' selectionStyle='chartSelection2'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' selectionStyle='chartSelection3'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = selectionData;
        this.primaryXAxis = {
           valueType: 'Category',
           title: 'Countries'
        };
        this.title = 'Olympic Medals';
    }

}
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size:16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.animation {
    background: #333333;
    border: 1px solid #cecece;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

#chart-container {
    display: block;
    height: 350px;
}
.chartSelection1 {
    fill:red;
}

.chartSelection2 {
    fill: green;
}

.chartSelection3 {
    fill: blue;
}

Search docs

Ask HelpBot