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 { Component } from '@angular/core';
import { LegendLabelsContentArgs } from '@progress/kendo-angular-charts';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <kendo-chart title="World Population by Broad Age Groups">
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="pieData"
          field="value"
          categoryField="category"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
    public pieData: any[] = [
        { 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 }
    ];

    constructor(private intl: IntlService) {
        this.labelContent = this.labelContent.bind(this);
    }

    public labelContent(args: LegendLabelsContentArgs): string {
        return `${args.dataItem.category} years old: ${this.intl.formatNumber(args.dataItem.value, 'p2')}`;
    }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

Auto-Fit Labels

Use the Series Labels autoFit option to avoid clipping of the labels' content.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [style.height.px]="200">
      <kendo-chart-series>
        <kendo-chart-series-item
          [autoFit]="autofit"
            type="pie" [data]="data"
            categoryField="kind" field="share">
          <kendo-chart-series-item-labels
            position="outsideEnd"
            color="#000"
            [content]="labelContent">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
    <label>
      <input type="checkbox" [(ngModel)]="autofit" />
      <span>Toggle Autofit</span>
    </label>
  `
})
export class AppComponent {
  public autofit = true;
  public data: any[] = [{
    kind: 'Solar', share: 0.052
  }, {
    kind: 'Wind', share: 0.225
  }, {
    kind: 'Other', share: 0.192
  }, {
    kind: 'Hydroelectric', share: 0.175
  }, {
    kind: 'Nuclear', share: 0.238
  }, {
    kind: 'Coal', share: 0.118
  }];

  public labelContent(e: any): string {
    return e.category;
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article