How to Display Selected Data in Angular Chart

Use the dragComplete event to retrieve the data values selected by a drag selection on the chart. The event’s selectedDataValues property contains one array per series; each inner array holds the data points that fall inside the dragged region.

How it works

When the user finishes a drag, the event receives an IDragCompleteEventArgs object:

  • args.selectedDataValues — array of arrays; one inner array per series, in series order.

This how-to uses a single-series chart, so args.selectedDataValues[0] is the only required index.

Display selected data in a grid

  1. Enable drag selection on the chart. Bind selectionMode to DragXY (or another Drag* value) and wire up the (dragComplete) event:

    <ejs-chart id="chart-container"
           [primaryXAxis]='primaryXAxis'
           [primaryYAxis]='primaryYAxis'
           [title]='title'
           [selectionMode]='selectionMode'
           (dragComplete)='dragComplete($event)'>
    <e-series-collection>
        <e-series [dataSource]='chartData' type='Scatter' xName='x' yName='y' name='Product A' [marker]='marker'></e-series>
    </e-series-collection>
</ejs-chart>

  2. Define the columns and bind the grid. Use @ViewChild to access the grid and push the selected points into its dataSource:

    @ViewChild('grid') public grid?: GridComponent;

public dragComplete(args: IDragCompleteEventArgs): void {
    this.grid!.dataSource = args.selectedDataValues[0];
    this.grid!.refresh();
}
    <ejs-grid #grid [dataSource]='selectedPoints'>
    <e-columns>
        <e-column field='x' headerText='X' textAlign='Right'></e-column>
        <e-column field='y' headerText='Y' textAlign='Right'></e-column>
    </e-columns>
</ejs-grid>

The following tabs include the full component (app.component.ts) and the bootstrap entry (main.ts from the sample):

import { ChartModule, ScatterSeriesService, SelectionService } from '@syncfusion/ej2-angular-charts';
import { GridModule, GridComponent, PageService } from '@syncfusion/ej2-angular-grids';
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDragCompleteEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [ChartModule, GridModule],
    providers: [ScatterSeriesService, SelectionService, PageService],
    template: `
    <ejs-chart id="chart-container"
               [primaryXAxis]='primaryXAxis'
               [primaryYAxis]='primaryYAxis'
               [title]='title'
               [selectionMode]='selectionMode'
               (dragComplete)='dragComplete($event)'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Scatter' xName='x' yName='y' name='Product A' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>
    <ejs-grid #grid [dataSource]='selectedPoints'>
        <e-columns>
            <e-column field='x' headerText='X' textAlign='Right'></e-column>
            <e-column field='y' headerText='Y' textAlign='Right'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    public selectionMode?: string;
    public selectedPoints: Object[] = [];
    @ViewChild('grid')
    public grid?: GridComponent;
    public dragComplete(args: IDragCompleteEventArgs): void {
        this.selectedPoints = args.selectedDataValues[0] || [];
        this.grid!.dataSource = this.selectedPoints;
        this.grid!.refresh();
    }
    ngOnInit(): void {
        this.chartData =[
            { 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 }
        ];
        this.primaryXAxis = {
            minimum: 1970,
            maximum: 2016
        };
        this.primaryYAxis = {
            title: 'Sales',
            labelFormat: '{value}%',
            interval: 25,
            minimum: 0,
            maximum: 100
        };
        this.marker = {
            shape: 'Triangle',
            width: 10,
            height: 10
        };
        this.selectionMode = 'DragXY';
        this.title = 'Profit Comparison of A and B';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Result

When the user releases a drag on the chart, the grid immediately repopulates with only the data points that fall inside the dragged region.

Troubleshooting

  • Event never fires. dragComplete only raises for drag-based selectionMode values (DragX, DragY, DragXY). Point or series selection modes do not emit this event.
  • Empty grid after the drag. The user released the pointer outside the plot area, or selectedDataValues[0] is empty (the chart has additional series and you picked the wrong index).
  • Grid does not update. Make sure GridModule is included in the standalone component’s imports array. If paging is enabled, also register PageService in the component’s providers array.

See also