NativeScript Core

RadChart Spline Area Series

SplineAreaSeries are categorical type of series that visualize the data objects as a series of dots connected with a spline, i.e. a curved line segments. Additionally, the area between the X-axis and the spline is filled with a specific color - hence the Spline Area name. To use Spline Area series, you need to initialize a RadCartesianChart, define a CategoricalAxis and LinearAxis and bind the series to a set of data objects.


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

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

import { CategoricalDataModel } from "../../data-models/categorical-data-model";

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

And finally, in the XML definition of the page we put a RadCartesianChart, add a SplineAreaSeries instance to it and bind the series to the source of data:

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="">
    <chart:RadCartesianChart id="cartesianChart">
            <chart:SplineAreaSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

Cartesian chart: Spline Area series Cartesian chart: Spline Area series


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: