Pie series: Overview

Unlike all other series, PieSeries do not require axes. They visualize each data point as pie slices with arc size directly proportional to the magnitude of the raw data point's value. Pie slices represent data in one direction contrasting with the other series which represent data in two dimensions.


Just like with all angular 'pages' let's start with the Component in which we will place our RadPieChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which will be used by the chart to provide intuitive data visualization.

The service is a simple 'mock' of an backend call that will return an array of objects:

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

export class DataService {

Inside that service we have a single function which returns an array:

getCategoricalSource(): Country[] {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
export class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {

All that is left is to declare the template of the angular component in which we:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Car } from '../../data-services/car';
import { ObservableArray } from "data/observable-array";

    moduleId: module.id,
    selector: 'tk-chart-series-pie',
    providers: [DataService],
    templateUrl: 'chart-series-pie.component.html'
export class ChartSeriesPieComponent implements OnInit {
    private _pieSource: ObservableArray<Car>;

    constructor(private _dataService: DataService) { }

    get pieSource(): ObservableArray<Car> {
        return this._pieSource;

    ngOnInit() {
        this._pieSource = new ObservableArray(this._dataService.getPieSource());
<GridLayout orientation="vertical" rows="*, *" tkExampleTitle tkToggleNavButton>
    <RadPieChart height="300" allowAnimation="true" row="0">
        <PieSeries tkPieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" [items]="pieSource" valueProperty="Amount"

        <RadLegendView tkPieLegend position="Right" offsetOrigin="TopRight" width="110"></RadLegendView>

    <RadPieChart height="300" allowAnimation="true" row="1">
        <DonutSeries tkPieSeries selectionMode="DataPoint" outerRadiusFactor="0.9" expandRadius="0.4" outerRadiusFactor="0.7" innerRadiusFactor="0.4"
            [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>

        <RadLegendView tkPieLegend position="Right" offsetOrigin="TopRight" width="110"></RadLegendView>

This is how the example looks like:
Cartesian chart: Pie series Cartesian chart: Pie series