How to create a Pie Chart in React?

Syncfusion’s React Pie Chart component makes it easy to integrate this type of visual representation into your React applications, providing a clear and interactive way to display data.

1. Install Syncfusion React Chart Package
First, you need to install the Syncfusion React chart package in your project:

npm install @syncfusion/ej2-react-charts 

2. Import the Required Components
Once the package is installed, you can import the necessary components for creating a pie chart.

import React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts'; 

3. Create the Pie Chart Data
Prepare the data source for the pie chart, which typically consists of labels and corresponding values.

const pieData = [
 { x: 'Food', y: 35 },
 { x: 'Clothing', y: 25 },
 { x: 'Rent', y: 20 },
 { x: 'Transport', y: 15 },
 { x: 'Utilities', y: 5 }
]; 

4. Create the Pie Chart Component
Now, define the PieChart component, which uses the AccumulationChartComponent and other directives to render the pie chart.

const PieChart = () => {
 return (
   <AccumulationChartComponent 
     id="pie-chart"
     legendSettings={{ visible: true }}
     tooltip={{ enable: true }}
   >
     <Inject services={[PieSeries, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip]} />
     <AccumulationSeriesCollectionDirective>
       <AccumulationSeriesDirective 
         dataSource={pieData} 
         xName='x' 
         yName='y' 
         innerRadius='40%'
         dataLabel={{
           visible: true,
           position: 'Inside',
           name: 'text'
         }}
       />
     </AccumulationSeriesCollectionDirective>
   </AccumulationChartComponent>
 );
}; 

5. Use the Pie Chart in Your App
Finally, render the PieChart component in your React app.

import React from 'react';
import ReactDOM from 'react-dom';
import { PieChart } from './PieChart'; // Assuming the PieChart component is in the same directory

const App = () => {
 return (
   <div>
     <h1>Expense Breakdown</h1>
     <PieChart />
   </div>
 );
};

ReactDOM.render(<App />, document.getElementById('root')); 

Conclusion
By following these steps, you can quickly create a pie chart using Syncfusion React components. You can further enhance the chart by exploring additional features like animations, legends, and tooltips provided by the Syncfusion library.

You can refer to our React Pie Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pie Chart example to understand how to create and manipulate data.

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

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