All Components

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.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [seriesColors]="['orange', '#ffe']">
      <kendo-chart-legend position="top"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item type="pie"
          [data]="pieData"
          field="value"
          categoryField="category">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  public pieData: any = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }
  ]
}

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 Kendo UI Chart to data.

In this article