All Components

Donut

Donut Charts are circular charts which represent a variation of the Pie Charts and are capable of displaying multiple nested series.

You can utilize their blank center and show additional information in it.

Basic Usage

The following example demonstrates the Donut Chart in action.

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
            type="donut" [data]="data"
            categoryField="kind" field="share">
          <kendo-chart-series-item-labels
            [content]="labelContent"
            color="#fff" background="none">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public data: any[] = [{
    kind: 'Hydroelectric', share: 0.175
  }, {
    kind: 'Nuclear', share: 0.238
  }, {
    kind: 'Coal', share: 0.118
  }, {
    kind: 'Solar', share: 0.052
  }, {
    kind: 'Wind', share: 0.225
  }, {
    kind: 'Other', share: 0.192
  }];

  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);

Displaying Multiple Series

The Donut Chart renders multiple series in the form of concentric rings. This behavior is different from the behavior of the Pie Chart, which supports only one series.

import { Component } from '@angular/core';
import { internetGrowthData } from './internet-growth-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-title text="Share of Internet Population Growth"></kendo-chart-title>
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate
                       let-value="value" let-category="category" let-series="series">
              {{ category }} ({{ series.name }}): {{ value }}%
          </ng-template>
        </kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let series of model; let outermost = last;"
                                   type="donut" [startAngle]="150"
                                   [name]="series.name" [data]="series.data"
                                   field="value" categoryField="category" colorField="color">
            <kendo-chart-series-item-labels *ngIf="outermost"
                                            position="outsideEnd" background="none"
                                            [content]="labelContent">
            </kendo-chart-series-item-labels>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public model: any[] = internetGrowthData;

    public labelContent(e: any): string {
        return `${ e.category }: \n ${e.value}%`;
    }
}
export const internetGrowthData = [{
  name: '2011',
  data: [{
    category: 'Asia',
    value: 30.8,
    color: '#9de219'
  }, {
    category: 'Europe',
    value: 21.1,
    color: '#90cc38'
  }, {
    category: 'Latin America',
    value: 16.3,
    color: '#068c35'
  }, {
    category: 'Africa',
    value: 17.6,
    color: '#006634'
  }, {
    category: 'Middle East',
    value: 9.2,
    color: '#004d38'
  }, {
    category: 'North America',
    value: 4.6,
    color: '#033939'
  }]
}, {
  name: '2012',
  data: [{
    category: 'Asia',
    value: 53.8,
    color: '#9de219'
  }, {
    category: 'Europe',
    value: 16.1,
    color: '#90cc38'
  }, {
    category: 'Latin America',
    value: 11.3,
    color: '#068c35'
  }, {
    category: 'Africa',
    value: 9.6,
    color: '#006634'
  }, {
    category: 'Middle East',
    value: 5.2,
    color: '#004d38'
  }, {
    category: 'North America',
    value: 3.6,
    color: '#033939'
  }]
}];
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);

Displaying Information in the Center

To display content in the center of the Donut Chart, either:

Using the Center Template

The center template is an HTML overlay that is positioned over the center of the Donut Chart. To implement the content, you can use the normal Angular template syntax and include arbitrary markup.

The content of the center template is not rendered through vector graphics and will not be included in the exported files. However, the content will be included in documents which are exported through the HTML Drawing API.

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart style="height: 450px;">
      <ng-template kendoChartDonutCenterTemplate>
        <h3>22.5%</h3>
        of which renewables
      </ng-template>
      <kendo-chart-series>
        <kendo-chart-series-item
            type="donut" [data]="data"
            categoryField="kind" field="share">
          <kendo-chart-series-item-labels
            [content]="labelContent"
            color="#fff" background="none">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public data: any[] = [{
    kind: 'Hydroelectric', share: 0.175
  }, {
    kind: 'Nuclear', share: 0.238
  }, {
    kind: 'Coal', share: 0.118
  }, {
    kind: 'Solar', share: 0.052
  }, {
    kind: 'Wind', share: 0.225
  }, {
    kind: 'Other', share: 0.192
  }];

  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);

Using Drawing Visuals

Similar to the other Chart types, you can overlay the Donut series with custom drawing elements.

The approach of using drawing visuals is more flexible than using the Donut center template. It also has the advantage that the overlay is part of the chart drawing surface. As a result, it will be included in all exported files as an integral element of the component.

The following example demonstrates how to locate the donut center and render text in it.

import { Component } from '@angular/core';
import { Circle as CircleGeometry } from '@progress/kendo-drawing/geometry';
import {Group, Layout, Text } from '@progress/kendo-drawing';
import { ChartComponent, RenderEvent, SeriesVisualArgs } from '@progress/kendo-angular-charts';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart style="height: 450px;" (render)="onRender($event)">
      <kendo-chart-series>
        <kendo-chart-series-item
            type="donut" [data]="data"
            categoryField="kind" field="share"
            [visual]="visualHandler">
          <kendo-chart-series-item-labels
            [content]="labelContent"
            color="#fff" background="none">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
  `
})
export class AppComponent {
  public data: any[] = [{
    kind: 'Hydroelectric', share: 0.175
  }, {
    kind: 'Nuclear', share: 0.238
  }, {
    kind: 'Coal', share: 0.118
  }, {
    kind: 'Solar', share: 0.052
  }, {
    kind: 'Wind', share: 0.225
  }, {
    kind: 'Other', share: 0.192
  }];

  private center: Point;
  private radius: number;

  // Necessary to bind `this` to the AppComponent instance
  private visualHandler = this.visual.bind(this);

  public visual(e: SeriesVisualArgs): Group {
    // Obtain parameters for the segments
    this.center = e.center;
    this.radius = e.innerRadius;

    // Create default visual
    return e.createVisual();
  }

  public onRender(e: RenderEvent): void {
    // The center and radius are populated by now.
    // We can ask a circle geometry to calculate the bounding rectangle for us.
    //
    // http://www.telerik.com/kendo-angular-ui/components/drawing/api/geometry/Circle/
    const circleGeometry = new CircleGeometry(this.center, this.radius);
    const bbox = circleGeometry.bbox();

    // Render the text
    //
    // http://www.telerik.com/kendo-angular-ui/components/drawing/api/Text/
    const heading = new Text('22.5%', [0, 0], {
      font: '28px Verdana,Arial,sans-serif'
    });

    const line1 = new Text('of which', [0, 0], {
      font: '16px Verdana,Arial,sans-serif'
    });

    const line2 = new Text('renewables', [0, 0], {
      font: '16px Verdana,Arial,sans-serif'
    });

    // Reflow the text in the bounding box
    //
    // http://www.telerik.com/kendo-angular-ui/components/drawing/api/Layout
    // http://www.telerik.com/kendo-angular-ui/components/drawing/api/LayoutOptions
    const layout = new Layout(bbox, {
      alignContent: 'center',
      alignItems: 'center',
      justifyContent: 'center',
      spacing: 5
    });

    layout.append(heading, line1, line2);
    layout.reflow();

    // Draw it on the Chart drawing surface
    //
    // http://www.telerik.com/kendo-angular-ui/components/charts/api/ChartComponent/#toc-surface
    e.sender.surface.draw(layout);
  }

  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