How to display selected data in a grid in React Chart

20 Aug 202621 minutes to read

When you let the user drag-select a region of the chart, the dragComplete callback fires with args.selectedDataValues — an array of point objects (one per series) for the dragged region. You can push those points into a Syncfusion Grid so the user sees the exact data behind their selection.

Enable range selection on the chart

Set selectionMode to one of the Drag* values on the chart to enable a draggable selection rectangle. The example uses 'DragXY', which selects both the x range and the y range.

<ChartComponent id='charts'
    selectionMode='DragXY'
    legendSettings={{ visible: true, toggleVisibility: false }}
    dragComplete={dragComplete.bind(this)}>

legendSettings.toggleVisibility: false is deliberate: it stops the user from accidentally hiding the series by clicking its legend entry, which would also clear the selection state.

Push the selected points into the Grid

The example captures both component instances via ref callbacks so the dragComplete callback can update the grid imperatively:

<ChartComponent ref={(g) => (chart = g)} ... />
<GridComponent  ref={(g) => (grid  = g)} height='250px'>
    <ColumnsDirective>
        <ColumnDirective field='x' headerText='x' type='string' />
        <ColumnDirective field='y' headerText='y' type='number' />
    </ColumnsDirective>
</GridComponent>

The dragComplete callback receives an args object whose args.selectedDataValues is an array of arrays — one inner array per series. With a single series, take the first inner array, assign it to the grid’s dataSource, and call grid.refresh() so the grid re-renders:

function dragComplete(args) {
    grid.dataSource = args.selectedDataValues[0];
    grid.refresh();
}

args.selectedDataValues shape

Field Meaning
args.selectedDataValues An array of arrays; the outer index is the series, the inner array contains the original data point objects that fall inside the dragged region.
args.selectedDataValues[0] The first series’ selected points — use this when the chart has a single series.

The complete example below wires the chart’s selectionMode, the two refs, and the dragComplete callback together.

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Selection, Legend, Category, ScatterSeries } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { data } from './datasource';
function App() {
    const primaryxAxis = { minimum: 1970, maximum: 2016 };
    const primaryyAxis = { title: 'Sales', labelFormat: '{value}%', interval: 25, minimum: 0, maximum: 100 };
    const marker = { shape: 'Triangle', width: 10, height: 10 };
    const legendSettings = { visible: true, toggleVisibility: false };
    const selectionMode = 'DragXY';
    var grid;
    var chart;
    function dragComplete(args) {
        grid.dataSource = args.selectedDataValues[0];
        grid.refresh();
    }
    return (<div>
        <div>
            <div>
                <ChartComponent id='charts' ref={(g) => (chart = g)} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title="Profit Comparision of A and B" selectionMode={selectionMode} legendSettings={legendSettings} dragComplete={dragComplete.bind(this)}>
                    <Inject services={[Selection, Legend, Category, ScatterSeries]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' type='Scatter' marker={marker}></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>
        <div>
            <GridComponent id='grid' ref={(g) => (grid = g)} height='250px'>
                <ColumnsDirective>
                    <ColumnDirective field='x' headerText='x' type='string' />
                    <ColumnDirective field='y' headerText='y' type='number' />
                </ColumnsDirective>
            </GridComponent>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import { ColumnDirective, ColumnsDirective, GridComponent, Grid, IDragCompleteEventArgs } from '@syncfusion/ej2-react-grids';
import { AxisModel, ChartComponent, Chart, SeriesCollectionDirective, SeriesDirective, Inject, Selection, Legend, LegendSeriesModel, Category, ScatterSeries } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { data } from './datasource';
function App() {
    const primaryxAxis: AxisModel = { minimum: 1970, maximum: 2016 };
    const primaryyAxis: AxisModel = { title: 'Sales', labelFormat: '{value}%', interval: 25, minimum: 0, maximum: 100 };
    const marker = { shape: 'Triangle', width: 10, height: 10 };
    const legendSettings: LegendSeriesModel = { visible: true, toggleVisibility: false };
    const selectionMode = 'DragXY';
    var grid: Grid | null;
    var chart: Chart | null;
    function dragComplete(args: IDragCompleteEventArgs): void {
        grid.dataSource = args.selectedDataValues[0];
        grid.refresh();
    }

    return (<div>
        <div>
            <div>
                <ChartComponent id='charts' ref={(g) => (chart = g)} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title="Profit Comparision of A and B" selectionMode={selectionMode} legendSettings={legendSettings} dragComplete={dragComplete.bind(this)}>
                    <Inject services={[Selection, Legend, Category, ScatterSeries]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' type='Scatter' marker={marker}></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>
        <div>
            <GridComponent id='grid' ref={(g) => (grid = g)} height='250px'>
                <ColumnsDirective>
                    <ColumnDirective field='x' headerText='x' type='string' />
                    <ColumnDirective field='y' headerText='y' type='number' />
                </ColumnsDirective>
            </GridComponent>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #charts {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='charts'>
           <div id='loader'>Loading....</div>
        </div>
        <label id="lbl"></label>
        <div id='grid'></div>
</body>
</html>
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

Troubleshooting

  • “The drag rectangle never appears” — selectionMode is not set to a Drag* value, or Selection is missing from the chart’s <Inject services={[…]}>> array.
  • “The grid does not update after a drag” — the ref callback is not wired on the <GridComponent>, or grid.refresh() is missing. Assigning dataSource does not auto-render the grid.
  • “The grid shows the entire series instead of the selection” — args.selectedDataValues[0] is wrong because there are multiple series. Iterate the outer array and pick the right one.
  • “Clicking a legend item clears the selection” — set legendSettings.toggleVisibility: false on the chart, as the example does.

See also