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.

Example

The following definition represents the data context that will be used to populate our Pie series with data:

get categoricalSource() {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21 }
    ]
}
get: function () {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21 }
    ];
}

We use an instance of this model to assign it as the bindingContext of the page we have put our Pie series on:

import pieModelModule = require("../../data-models/pie-data-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new pieModelModule.PieDataModel();
}
var pieModelModule = require("../../data-models/pie-data-model");
function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new pieModelModule.PieDataModel();
}
exports.onPageLoaded = onPageLoaded;

And finally, in the XML definition of the page we put two RadCartesianCharts, add a PieSeries instance to one of them and DonutSeries to the other and bind the series to the source of data.

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout orientation="vertical" rows="*, *">

    <chart:RadPieChart id="pieChart" height="300" allowAnimation="true" row="0">
        <chart:RadPieChart.series>
            <chart:PieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" items="{{ pieSource }}" valueProperty="Amount" legendLabel="Brand">

            </chart:PieSeries>
        </chart:RadPieChart.series>

        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Right" offsetOrigin="TopRight"  width="110"/>
        </chart:RadPieChart.legend>
    </chart:RadPieChart>

    <chart:RadPieChart id="donutChart" height="300"  allowAnimation="true" row="1">
        <chart:RadPieChart.series>
            <chart:DonutSeries  selectionMode="DataPoint" outerRadiusFactor="0.9" expandRadius="0.4"  outerRadiusFactor="0.7" innerRadiusFactor="0.4" items="{{ pieSource }}" valueProperty="Amount" legendLabel="Brand">

            </chart:DonutSeries>
        </chart:RadPieChart.series>

        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Right" offsetOrigin="TopRight"  width="110"/>
        </chart:RadPieChart.legend>  
    </chart:RadPieChart>   
    </GridLayout>
</navigation:ExamplePage>

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

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.

Related articles you might find useful: