How to Display Data Labels in Lakh in React Accumulation Chart?

This knowledge base article explains how data labels can be displayed in lakh or other numerical formats in a React Accumulation Chart.

Display Data Labels in Lakh

To make large numbers more readable in a React Accumulation Chart such as converting 900,000 to 9.0L you can use the textRender event. This event allows you to dynamically customize the label text before it is rendered.

In the example below, we check if the label value is greater than or equal to 100000. If so, we convert it to Lakh format by dividing the value by 100000, rounding it to one decimal place, appending ‘L’ to the result, and assigning it to args.text.

Code Snippet

const chartData = [
 {
   Browser: 'Chrome',
   Users: 5928945,
   DataLabelMappingName: '  Chrome: 59.28%',
 }
];
const textRender = (args) => {
 if (args.text) {
   let value = parseFloat(args.text.replace(/,/g, ''));
   if (value >= 100000) {
     args.text = (value / 100000).toFixed(1) + 'L';
   }
 }
};
const Pie = () => {
 return (
     <div className="control-section row">
       <AccumulationChartComponent
         textRender={textRender.bind(this)}
       >
         <AccumulationSeriesCollectionDirective>
           <AccumulationSeriesDirective
             dataSource={chartData}
             name="Browser"
             xName="Browser"
             yName="Users"
             dataLabel={{
               visible: true,
             }}
           />
         </AccumulationSeriesCollectionDirective>
       </AccumulationChartComponent>
     </div>
 );
};
export default Pie; 

Screenshot

Live Sample

StackBlitz Demo

Conclusion

I hope you enjoyed learning about how to display data labels in Lakh in React Chart.

You can refer to our React Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!