NativeScript Angular

RadChart OHLC Series Overview

This series operates with a special kind of data in the form of four parameters defining the stock market - open, high, low, and close. The high and low values show the price range (the highest and lowest prices) over one unit of time. The open and close values indicate the opening and closing price of the stock for the corresponding period. The width of the ohlc bar is determined by the period between 2 bars and the range of the axis


To present a better view over OHLC series we will take a look at the following example:


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:

getCategoricalSource(): Country[] {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
export class Currency {
    constructor(public Date?: string, public Open?: number, public Close?: number, public Low?: number, public High?: number) {

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

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Currency } from '../../data-services/currency';
import { ObservableArray } from "tns-core-modules/data/observable-array";

    selector: 'tk-chart-series-candlestick',
    providers: [DataService],
    templateUrl: 'chart-series-candlestick.component.html'
export class ChartSeriesCandlestickComponent implements OnInit {
    private _candleStickSourceItems: ObservableArray<Currency>;

    constructor(private _dataService: DataService) { }

    get candleStickSourceItems(): ObservableArray<Currency> {
        return this._candleStickSourceItems;

    ngOnInit() {
        this._candleStickSourceItems = new ObservableArray(this._dataService.getCandleStickSourceItems());
<RadCartesianChart tkExampleTitle tkToggleNavButton>
  <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="yyyy-MM-dd" verticalLocation="Bottom"></DateTimeCategoricalAxis>
  <LinearAxis tkCartesianVerticalAxis></LinearAxis>

  <CandlestickSeries tkCartesianSeries

Cartesian chart: OHLC series Cartesian chart: OHLC series