How to show percentage in pie tooltip in React Chart

20 Aug 20267 minutes to read

To show each slice’s percentage share in a pie tooltip, hook the tooltipRender callback on the chart and assign the formatted string to args.text. The callback fires once per hovered slice.

You also need to register PieSeries and AccumulationTooltip inside <Inject services={[...]} />, and enable tooltip support on the chart by setting the tooltip’s enable property to true. Without enabling tooltips, the tooltipRender callback will not be triggered.

Calculate and assign the percentage

The tooltipRender callback receives an args object. Two fields are useful here:

Field Meaning
args.point.y The numeric value of the hovered slice.
args.series.sumOfPoints The sum of all slice values in the series.

Divide args.point.y by args.series.sumOfPoints and multiply by 100 to get the slice’s percentage share. Assign the formatted string to args.text; that string is what the tooltip renders:

const tooltipRender = (args) => {
    const value = (args.point.y / args.series.sumOfPoints) * 100;
    args.text = `${args.point.x} ${Math.ceil(value)}%`;
};

Bind the callback on the <AccumulationChartComponent>:

<AccumulationChartComponent id='charts' tooltip={{ enable: true }} tooltipRender={tooltipRender}>

The complete example is shown below:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    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';
import { data } from './datasource';
function App() {
  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"));
export let 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' }
];
export let data: Object[] = [
    { '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' }
];

Troubleshooting

  • “The tooltip shows the raw value instead of a percentage” — the tooltipRender callback is not bound on <AccumulationChartComponent>, or tooltip support has not been enabled on the chart. Both are required for the callback to fire.
  • “The tooltip shows NaN% for every slice” — args.series.sumOfPoints is 0. Either populate the data source with non-zero values or guard the division.
  • “The slices do not add up to exactly 100%” — the example uses Math.ceil, which rounds up. Switch to Math.round if you need exact totals.

See also