By using the pointClick event, you can get the chart data of clicked area.
To show the clicked area data from pie, follow the given steps:
Step 1:
By using the pointClick event, you can get the args.point.x and args.point.y values.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' }, { 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' }, { 'x': 'Android', y: 12, text: '12%' }
];
this.datalabel = { visible: true, position: 'Inside', name: 'text' };
this.pointClick = (args) => {
document.getElementById("lbl").innerText = "X : " + args.point.x + "\nY : " + args.point.y;
};
}
render() {
return (<div>
<label id="lbl"></label>
<AccumulationChartComponent id='charts' title='Mobile Browser Statistics' pointClick={this.pointClick}>
<Inject services={[AccumulationTooltip, PieSeries, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' radius='70%' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
IPointEventArgs, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries,
AccumulationDataLabelSettingsModel,TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import{ EmitType } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' }, { 'x': 'Android', y: 12, text: '12%' }
];
public datalabel: AccumulationDataLabelSettingsModel = { visible: true, position: 'Inside', name: 'text' };
public pointClick: EmitType<IPointEventArgs> = (args: IPointEventArgs): void => {
document.getElementById("lbl").innerText = "X : "+ args.point.x + "\nY : "+ args.point.y;
};
render() {
return(<div>
<label id="lbl"></label>
<AccumulationChartComponent id='charts' title='Mobile Browser Statistics'
pointClick={this.pointClick}>
<Inject services={[AccumulationTooltip, PieSeries, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' radius='70%' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById("charts"));