React Pie Chart

Pie charts are used to represent parts of a whole as slices of a circle, making it easy to compare category-wise contributions. They are ideal for visualizing percentage-based data such as market share or survey results. You can enhance pie charts with features like data labels, tooltips, legends, and explode effects for better clarity and interaction.

Overview

To create a Pie Chart, use the PieChart component as the container and define a PieChartSeriesCollection with a PieChartSeries. Map your data fields on the series to generate slices.

By default, the overview layout sets the radius to 80% of the available chart area (based on the chart’s dimensions) and centers the chart at 50% on both X and Y. Configure innerRadius to create a donut, and use startAngle/endAngle for semi or custom sweep charts. Optional features include data labels (inside/outside with connectors), legend, tooltip, and slice explode.

To bind data:

• Use xField to specify the category field (e.g., provider name).
• Use yField to specify the numeric value field (e.g., market share percentage).

Pie with Various Radius

A pie chart can use variable radii to emphasize categories visually. Each slice’s outer radius is determined by a data field, making larger slices represent more significant values and smaller slices represent less important ones. Use radius mapping to render slices with different radii by binding a numeric field from your data to the radius property of each slice. This allows you to highlight priority or engagement levels effectively.

Pie with Legend

A pie chart can include a legend to display category names with matching colors for easy interpretation. Legends make it simple to identify slices without relying on data labels. Enable the legend using the PieChartLegend component. By default, it is visible. You can customize its position, visibility, shape, and text style to fit your design needs.

Semi Pie

A semi-pie chart displays half of a pie, making it ideal for compact, dashboard-friendly layouts. This format is useful when you want to save space while still showing category contributions. To create a semi-pie, use the startAngle and endAngle properties in the PieChartSeries component to limit the sweep (e.g., 270° to 90°).

Smart Labels

Smart labels automatically arrange and reposition data labels to avoid overlap, improving readability in dense pies. Enable with smartLabels and use outside labels with connector lines; fine-tune using PieChartDataLabel options like position, connectorStyle, font, and maxWidth for wrapping/trimming on small screens

Grouping

Grouping combines smaller slices into a single “Others” category to keep the chart readable, especially when dealing with many data points. Enable grouping by setting the groupMode property to either:

• Point: Groups slices starting from a given index.
• Value: Groups slices with values below a specified threshold.

You can also customize the groupName for the combined slice.

Empty Points

Empty points handle missing or null values in your data, ensuring the chart remains readable and accurate. You can control how these slices are treated using the emptyPointSettings mode property in the PieChartSeries component.

Available modes:

• Drop: Skips the slice entirely.
• Average: Replaces the missing value with the average of its nearest neighbors.
• Zero: Renders the slice with a value of 0.

You can also customize the color and border style of empty slices for better visibility.

Pie Drilldown

The drilldown pie chart example illustrates the revenue share across various sports categories. Users can click on individual slices to drill down into detailed revenue data for subcategories within each sport, enabling an interactive and intuitive analysis of the distribution.