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 the Pie chart in action.

import {
} from '@progress/kendo-react-charts';

const series = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }

const ChartContainer = () => (
  <Chart seriesColors={['orange', '#ffe']}>
    <ChartLegend position="top" />
      <ChartSeriesItem type="pie" data={series} field="value" categoryField="category" />

  <ChartContainer />,

Data Binding

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

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

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

Model bindingData typeRequiredDescription
fieldnumber/nullYesThe value of the data point, if any.
categoryFieldstring/date/number/nullNoThe category of the data point, if any.
colorFieldstringNoThe 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.