Chart Candlestick Series

CandlestickSeries are a type of CategoricalSeries that are typically used to illustrate movements in the price of a financial instrument over time. That movement is represented by candles visualizing the open, high, low and close price for a specific period. Candlesticks are composed of a body, and an upper and a lower shadow (wick). The body displays the range between the opening (starting) price and the closing (ending) price over one unit of time, e.g., one day or one hour. The wick illustrates the highest and lowest traded prices of an asset during the time interval represented. The candles are shown in different colors depending on whether prices rose or fell in that period.

Setup
References

Setup

To display an Candlestick Chart, you will need to:

Add RadCartesianChart to your component.
Add a category axis (CategoricalAxis, DateTimeCategoricalAxis or DateTimeContinuousAxis) with the tkCartesianHorizontalAxis directive.
Add a value axis (LinearAxis or LogarithmicAxis) with the tkCartesianVerticalAxis directive.
Add at least one instance of CandlestickSeries with the tkCartesianSeries directive and set its items property to a collection of data items, its categoryProperty to the name of the property of the data items that will be used to determine their category, and the openPropertyName, highPropertyName, lowPropertyName and closePropertyName to the names of the properties used to determine the open, high, low and close values.

To illustrate this setup, let's create an 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:

#### Example 1: Define a data service

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

@Injectable()
export class DataService {
}

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

Example 2: Define a source with data

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) {
    }
}

Example 3: Add chart to component's template

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";

@Component({
    moduleId: module.id,
    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
    categoryProperty="Date"
    openPropertyName="Open"
    highPropertyName="High"
    lowPropertyName="Low"
    closePropertyName="Close"
    [items]="candleStickSourceItems">
  </CandlestickSeries>
</RadCartesianChart>

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

Cartesian chart: Candlestick series

References

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.

Examples used in this article:

Candlestick Series Example

NativeScript Angular