Chart Donut series

DonutSeries are a type of ChartSeries that use a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a donut chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. They differ from PieSeries by the fact that they have a blank center in the the middle, making the chart resemble more a donut. The size of this blank center is determined by the value of the innerRadiusFactor property which accepts values between 0 and 1.

Setup
Properties
References

Setup

To display a Donut Chart, you will need to:

Add RadPieChart to your component.
Add an instance of DonutSeries with the tkPieSeries directive and set its items property to a collection of data items and its valueProperty to the name of the property used to determine where to determine the proportion between the splices.

To illustrate this setup, let's create an example. Just like with all angular 'pages' let's start with the Component in which we will place our RadCartesianChart 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:

#### Example 1: Define a data service

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

@Injectable()
export class DataService {
}

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

Example 2: Define a source with data

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:

Example 3: Add chart to component's template

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

@Component({
    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 rows="*, *" tkExampleTitle tkToggleNavButton>
    <RadPieChart allowAnimation="true" row="0">
        <PieSeries tkPieSeries
            selectionMode="DataPoint"
            expandRadius="0.4"
            outerRadiusFactor="0.7"
            valueProperty="Amount"
            legendLabel="Brand"
            [items]="pieSource">
        </PieSeries>

        <RadLegendView tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
    </RadPieChart>

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

        <RadLegendView tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
    </RadPieChart>
</GridLayout>

Figure 1: Chart with DonutSeries on Android (left) and iOS (right)

Cartesian chart: Pie series

Properties

outerRadiusFactor - This property can increase and decrease the diameter of the series. By default, it occupies the whole plot area and is equal to 1. Setting the outerRadius to 0.9 will decrease the radius of the series by 10 percent. Similarly, the value 1.1 will increase it. Leaving the property with value 1 will make the donut fill the available space.
expandRadius - This property defines the extent to which the selected pie segment is shifted. Again, this property is measured in percents. A value of 1.1 defines that the selected segment will expand by 10% of the pie radius.
startAngle and endAngle - These properties are used to define the pie range. The startAngle sets the angle in degrees from which the drawing of the pie segments will begin. Its default value is 0. The endAngle determines whether the chart will appear as a full circle or a partial circle. Its default value is 360 degrees.
innerRadius - This property specifies the size of the blank center. The acceptable values are between 0 and 1.

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Examples used in this article:

Pie Series Example

NativeScript Angular