Search results

Display Selected Data in React Chart component

31 Jan 2023 / 3 minutes to read

By using the dragComplete, you can get the selected data values for range selection.

To display the selected data value, follow the given steps:

Step 1:

Get the selected data point values and display the values through grid component by using the dragComplete event.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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';
function App() {
    const 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 }
    ];
    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;
    function dragComplete(args) {
        grid.dataSource = args.selectedDataValues[0];
        grid.refresh();
    }
    return (<div>
              <div>
                <div>
                <ChartComponent id='charts' 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'));
Copied to clipboard
<!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='grids'></div>
</body>
</html>
Copied to clipboard
import { ColumnDirective, ColumnsDirective, GridComponent, Grid } from '@syncfusion/ej2-react-grids';
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Selection, Legend, LegendSeriesModel, Category, ScatterSeries } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    const data: any[] = [
        { 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 }
    ];
    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;
    function dragComplete(args: any): void {
        grid.dataSource = args.selectedDataValues[0];
        grid.refresh();
    }

    return (<div>
              <div>
                <div>
                <ChartComponent id='charts' 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'));