Percentage tool tip in React Chart component
20 Jan 20235 minutes to read
By using the tooltipRender
event, you can show the percentage value for each point of pie series in tooltip.
To show the percentage value in pie tooltip, follow the given steps:
Step 1:
By using the tooltipRender
event, you can get the args.point.y
and args.series.sumOfPoints
values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the args.content
property.
The output will appear as follows,
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ 'x': 'Chrome', y: 37 }, { 'x': 'UC Browser', y: 17 },
{ 'x': 'iPhone', y: 19 }, { 'x': 'Others', y: 4, text: '4' },
{ 'x': 'Opera', y: 11 }
];
const datalabel = { visible: true, position: 'Inside', name: 'text' };
const tooltip = { enable: true };
const tooltipRender = (args) => {
let value = args.point.y / args.series.sumOfPoints * 100;
args.text = args.point.x + '' + Math.ceil(value) + '' + '%';
};
return <AccumulationChartComponent id='charts' tooltip={tooltip} title='Mobile Browser Statistics' tooltipRender={tooltipRender}>
<Inject services={[AccumulationTooltip, PieSeries, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y' radius='70%' dataLabel={datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,IAccTooltipRenderEventArgs, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries,AccumulationDataLabelSettingsModel,TooltipSettingsModel } from '@syncfusion/ej2-react-charts';
import{ EmitType } from '@syncfusion/ej2-base';
function App() {
const data: any[] = [
{ 'x': 'Chrome', y: 37 }, { 'x': 'UC Browser', y: 17 },
{ 'x': 'iPhone', y: 19 }, { 'x': 'Others', y: 4, text: '4' },
{ 'x': 'Opera', y: 11 }
];
const datalabel: AccumulationDataLabelSettingsModel = { visible: true, position: 'Inside', name: 'text' };
const tooltip: TooltipSettingsModel = { enable: true };
const tooltipRender: EmitType<IAccTooltipRenderEventArgs> = (args: IAccTooltipRenderEventArgs): void => {
let value: any = args.point.y / args.series.sumOfPoints * 100;
args.text = args.point.x + '' + Math.ceil(value) + '' + '%';
};
return <AccumulationChartComponent id='charts' tooltip={tooltip} title='Mobile Browser Statistics'
tooltipRender={tooltipRender}>
<Inject services={[AccumulationTooltip, PieSeries, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y' radius='70%' dataLabel={datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));