NativeScript Angular

RadChart Scatter Series

Scatter series are used in the context of a RadCartesianChart and two LinearAxis instances. Besides the setup requirements that come from CartesianSeries, ScatterSeries require an additional xProperty and yProperty parameters instead of valueProperty and categoryProperty.


Just like with all angular 'pages' let's start with the Component in which we will place our RadCartesianChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which will be used by the chart to provide intuitive data visualization.

The service is a simple 'mock' of an backend call that will return an array of objects:

import { Injectable } from '@angular/core';

export class DataService {

Inside that service we have a single function which returns an array:

getRangeBarSource(): Product[] {
    return [
        { Name: "Groceries", High: 30, Low: 12, Sales: 0, Margin: 0 },
        { Name: "Tools", High: 135, Low: 124, Sales: 0, Margin: 0 },
        { Name: "Electronics", High: 55, Low: 12, Sales: 0, Margin: 0 },
        { Name: "Gardening", High: 50, Low: 29, Sales: 0, Margin: 0 }
export class Product {
    constructor(public Name?: string, public High?: number, public Low?: number, public Sales?: number, public Margin?: number) {

All that is left is to declare the template of the angular component in which we:

  • Declare a RadCartesianChart
  • Declare two LinearAxis between the RadCartesianChart open and close tags
  • After that set the tkCartesianHorizontalAxis and tkCartesianVerticalAxis directive to the axes
  • Finally declare a ScatterSeries instance to it, bind the items to the source of data and set the tkCartesianSeries directive
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Person } from '../../data-services/person';
import { ObservableArray } from "tns-core-modules/data/observable-array";

    selector: 'tk-chart-series-scatter',
    providers: [DataService],
    templateUrl: 'chart-series-scatter.component.html'
export class ChartSeriesScatterComponent implements OnInit {
    private _scatterSource: ObservableArray<Person>;

    constructor(private _dataService: DataService) { }

    get scatterSource(): ObservableArray<Person> {
        return this._scatterSource;

    ngOnInit() {
        this._scatterSource = new ObservableArray(this._dataService.getScatterSource());
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianHorizontalAxis></LinearAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <ScatterSeries tkCartesianSeries [items]="scatterSource" xProperty="Age" yProperty="Salary"></ScatterSeries>
    <ScatterSeries tkCartesianSeries [items]="scatterSource" xProperty="Age" yProperty="Spendings"></ScatterSeries>
    <ScatterSeries tkCartesianSeries [items]="scatterSource" xProperty="Age" yProperty="Savings"></ScatterSeries>

Cartesian chart: Scatter series Cartesian chart: Scatter series