Pie

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 {
  Chart,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem
} 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" />
    <ChartSeries>
      <ChartSeriesItem type="pie" data={series} field="value" categoryField="category" />
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
  document.querySelector('my-app')
);

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

In this article