React Pie Chart

The React Pie charts are circular charts which display data in the form of single-series sectors from a two-dimensional circle and are useful for rendering data as part of a whole.

Basic Usage

The following example demonstrates how to create a Pie chart in React and see it in action.

Change Theme

Theme

Loading ...

Data Binding in React Pie Chart

You can bind the series of the React Pie Chart to an array that contains:

• Numbers.
• Arrays which represent [value, category] tuples.
• Objects which are also referred to as models.

When the series of the React Pie chart is bound to objects (models), the user selects the relevant fields through the available bindings:

Model binding	Data type	Required	Description
field	number/null	Yes	The value of the data point, if any.
categoryField	string/date/number/null	No	The category of the data point, if any.
colorField	string	No	The color of the data point, if overridden.

For more information on how to configure each data-binding mode, refer to the article on binding the KendoReact Chart to data.

Suggested Links

• API Reference of the Charts
• Donut Charts
• React Charts High-Level Overview