New to Kendo UI for Angular? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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

Auto-Fit Labels

To avoid the clipping of the labels content, use the autoFit series option.

Example
View Source
Edit In Stackblitz  
Change Theme:

Label Alignment

Pie charts support two modes of label alignment:

  • "circle" (default)The labels are positioned in circle around the Chart.
  • "column"The labels are positioned in columns to the left and right of the Chart.

To select the alignment mode, set the align attribute on the Series Labels:

Example
View Source
Edit In Stackblitz  
Change Theme: