React React Charts Pie Chart

Overview

The React Pie Chart is a circular chart divided into slices for comparing the contribution of different categories to the total value.

Pie legend

Legends identify individual data points and indicate their contribution to the total. Selecting a legend item can hide or show the corresponding point for focused comparison.

Custom radius

Customize the radius of the pie to change the look and functionality of the chart.

Start and end angles

Customize the start and end angles of the chart to achieve a semi-pie.

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

Smart labels

Arrange data labels automatically to prevent overlapping when data point values are closely spaced.

Grouped points

Group pie chart points based on specified conditions. Select a grouped slice to expand and display its individual data points.

Drill down operation

Click a specific bar or segment to drill down and view more detailed data.

Different radius

Customize the radius of individual slice using built-in APIs.

Pie center

The React Pie Chart’s center moves relative to the plot area. Labels may jump around when there are many slices in the plot area and the center can be set in a more spacious area.

Center label

Display a label at the center of the Pie Chart. When hovering over a slice, the corresponding data can be shown at the center.

Customization

Customize the appearance of the Pie Chart using built-in APIs.

React Pie Chart code example

Get started with React Pie Chart by using a few lines of HTML and JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PieSeries}
from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public data1: any[]= [
    { x: 'United States', y: 45, text: 'USA', fill: '#00226C' },
    { x: 'Australia', y: 53, text: 'AUS: 14%', fill: '#0450C2' },
    { x: 'China', y: 56, text: 'CHN', fill: '#0073DC' },
    { x: 'India', y: 61, text: 'IND', fill: '#0D98FF' },
    { x: 'Japan', y: 40, text: 'JPN', fill: '#9CD9FF' },
    { x: 'United Kingdom', y: 20, text: 'UK', fill: '#0450C2' }
];

  public render() {
    return <AccumulationChartComponent id='charts'>
    <Inject services={[PieSeries]} />
    <AccumulationSeriesCollectionDirective>
      <AccumulationSeriesDirective dataSource={this.data1} xName='x' yName='y' type='Pie'/>
    </AccumulationSeriesCollectionDirective>
  </AccumulationChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

Learning resources

UG

Pie Chart User Guide

Learn the available options to customize the React Pie Chart.

API

Pie Chart API Reference

Explore the React pie chart APIs.

Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback