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

Customization

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

Example

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

get ohlcSourceItems() {
    return [
        { Date: "20/6/2015", Open: 100, Close: 85, Low: 50, High: 139 },
        { Date: "02/7/2015", Open: 60, Close: 150, Low: 40, High: 159 },
        { Date: "01/8/2015", Open: 120, Close: 81, Low: 45, High: 141 },
        { Date: "01/9/2015", Open: 105, Close: 200, Low: 55, High: 250 }
    ];
}
get: function () {
    return [
        { Date: "20/6/2015", Open: 100, Close: 85, Low: 50, High: 139 },
        { Date: "02/7/2015", Open: 60, Close: 150, Low: 40, High: 159 },
        { Date: "01/8/2015", Open: 120, Close: 81, Low: 45, High: 141 },
        { Date: "01/9/2015", Open: 105, Close: 200, Low: 55, High: 250 }
    ];
}

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

import financialDataModelModule = require("../../data-models/financial-data-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new financialDataModelModule.FinancialDataModel();
}
var financialDataModelModule = require("../../data-models/financial-data-model");
function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new financialDataModelModule.FinancialDataModel();
}
exports.onPageLoaded = onPageLoaded;

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

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="cartesianChart">
    <chart:RadCartesianChart.series>
          <chart:OhlcSeries
            categoryProperty="Date"
            openPropertyName="Open"
            highPropertyName="High"
            lowPropertyName="Low"
            closePropertyName="Close"
            items="{{ ohlcSourceItems }}">

              <chart:OhlcSeries.horizontalAxis>
                   <chart:DateTimeCategoricalAxis  dateFormat="yyyy-MM-dd" verticalLocation="Bottom" />
              </chart:OhlcSeries.horizontalAxis>
              <chart:OhlcSeries.verticalAxis>
                <chart:LinearAxis/>
              </chart:OhlcSeries.verticalAxis>
            </chart:OhlcSeries>
        </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
</navigation:ExamplePage>

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

Related articles you might find useful: