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 page.
Add an instance of DonutSeries to the chart's series property 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. First we will create a source with items:

Example 1: Define a source 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 }
    ];
}

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

Example 2: Update bindingContext

import { PieDataModel } from "../../data-models/pie-data-model";

export function onPageLoaded(args) {
    const page = args.object;
    page.bindingContext = new PieDataModel();
}

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.

Example 3: Add chart to page's markup

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="*, *">
        <chart:RadPieChart id="pieChart" allowAnimation="true" row="0">
            <chart:RadPieChart.series>
                <chart:PieSeries
                    selectionMode="DataPoint"
                    expandRadius="0.4"
                    outerRadiusFactor="0.7"
                    valueProperty="Amount"
                    legendLabel="Brand"
                    items="{{ pieSource }}">
                </chart:PieSeries>
            </chart:RadPieChart.series>

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

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

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

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 Core