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: '0-14', value: 0.2545 },
        { category: '15-24', value: 0.1552 },
        { category: '25-54', value: 0.4059 },
        { category: '55-64', value: 0.0911 },
        { category: '65+', value: 0.0933 }

const labelContent = (props) => {
  let formatedNumber = Number(props.dataItem.value).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
  return `${props.dataItem.category} years old: ${formatedNumber}`;

const ChartContainer = () => (
  <Chart title="World Population by Broad Age Groups">
    <ChartLegend position="bottom" />
      <ChartSeriesItem type="pie" data={series} field="value" categoryField="category" labels={{visible: true, content: labelContent}} />

  <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.