Chart Series Stack Mode

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn how the chart will visualize its series if they are more than one.

Getting Started
References

Getting Started

There are scenarios in which a single Categorical chart can host multiple series. The stackMode property allows you to define how these series will interact with each other. The following options are available for the stackMode property:

None - The data points for all series start drawing from the axis.
Stack - The data points for each series start drawing from the end of the data points of the previous series.
Stack100 - The data points for each series start drawing from the end of the data points of the previous series but their size is adjusted proportionally so that the whole plot-area of the chart is filled.

This is the data with which we will populate our series:

Example 1: Define a source with data

get firstSeries() {
    return [
        { Country: "Germany", Amount: 320, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 206, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 100, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 25, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 85, SecondVal: 8, ThirdVal: 21 }
    ];
}

get secondSeries() {
    return [
        { Country: "Germany", Amount: 120, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 56, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 300, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 95, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 405, SecondVal: 8, ThirdVal: 21 }
    ];
}

get thirdSeries() {
    return [
        { Country: "Germany", Amount: 96, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 139, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 276, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 300, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 100, SecondVal: 8, ThirdVal: 21 }
    ];
}

In our page definition, we set the bindingContext of the page to point to a stackedSeriesModel object:

Example 2: Update bindingContext

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

The following XML snippet demonstrates combining three Area series in a single chart and defining a stack mode:

Example 3: Add chart to page's markup

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" navigatedTo="onNavigatedTo" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd"> 
    <navigation.actionBar>
         <ActionBar>
            <ActionBar.actionItems>
                <ios>
                    <ActionItem text="Options" ios.position="right" tap="{{onOptionsTapped}}" />
                </ios>
                <android>
                    <ActionItem text="Stack" android.position="popup" tap="onStackModeSelected" />
                    <ActionItem text="Stack 100" android.position="popup" tap="onStack100ModeSelected" />
                    <ActionItem text="None" android.position="popup" tap="onNoneStackModeSelected" />
                </android>
            </ActionBar.actionItems>
        </ActionBar>
    </navigation.actionBar>
    <chart:RadCartesianChart id="cartesianChart">
        <chart:RadCartesianChart.series>
            <chart:AreaSeries items="{{ firstSeries }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></chart:AreaSeries>
            <chart:AreaSeries items="{{ secondSeries }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></chart:AreaSeries>
            <chart:AreaSeries items="{{ thirdSeries }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></chart:AreaSeries>
        </chart:RadCartesianChart.series>

        <chart:RadCartesianChart.horizontalAxis>
            <chart:CategoricalAxis/>
        </chart:RadCartesianChart.horizontalAxis>
        <chart:RadCartesianChart.verticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.verticalAxis>
    </chart:RadCartesianChart>
</navigation:ExamplePage>

Here's how your chart will look like with stackMode set to Stack:

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

Chart series overview

References

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

Examples used in this article:

Stacked Area Example

NativeScript Core