NativeScript Core

RadChart Spline Series

SplineSeries 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. To use Spline 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 series with data:

We use an instance of this model to assign it as the bindingContext of the page we have put our Spline 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 SplineSeries 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:SplineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

Cartesian chart: Spline series Cartesian chart: Spline 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: