NativeScript Angular

Chart Overview

The NativeScript UI Chart is a charting component designed for the mobile environment. It offers great performance in loading time, drawing capabilities and real-time updates. Its intuitive object model and public API allow you to easily setup complex chart objects and integrate them into your application. The plugin provides two views that can be placed in a NativeScript layout - RadCartesianChart - used to visualize (or plot) data on a cartesian coordinate system and RadPieChart - used to visualize data in a way that resembles slices of a pie. An intuitive data binding mechanism transforms the raw data to appropriate data points. The plugin is distributed through the nativescript-ui-chart package on npmjs.

Figure 1: Some of the available chart series - LineSeries (left), DonutSeries (right)

NativeScriptUI-Chart-Overview-LineSeries NativeScriptUI-Chart-Overview-DonutSeries

Getting Started

This article contains the basic steps to start using the nativescript-ui-chart plugin - how to create a list of items and visualize them with one of the available chart series and appropriate axes.

Series

The series are one of the main components of the chart and determine how the data will be presented. The chart supports over 10 different series types, some of the most popular being BarSeries, LineSeries and PieSeries. This article contains an overview of the different types and suggests the most appropriate depending on the data that has to be presented.

Axes

When using Series that plot the data in Cartesian coordinates, the RadCartesianChart has to be used. It also requires two axes that determine what the horizontal and vertical coordinates represent. More information about the available axis types and examples for their usage is available in the axes article.

Grid

The RadCartesianChart can draw lines and stripes (the fill between the lines) behind the visualized series to illustrate better how the data relates to the values in the axes. This is controlled by the RadCartesianChartGrid which is demonstrated in this article.

Annotations

The RadCartesianChart can also show linear and rectangular shapes over its series in order to annotate specific values on the chart. This can be achieved by adding instances of ChartGridLineAnnotation and/or ChartPlotBandAnnotation. These types are demonstrated in this article.

Trackball

The trackball is another feature availalbe for RadCartesianChart. When it is enabled users are able to display information about a point on the chart by hold and drag gesture. More information is available in this article.

Legend

Both RadCartesianChart and RadPieChart support adding a RadLegendView which will contain information about the presented series. In the context of RadCartesianChart, the legend will contain information about the different series, while in the context of RadPieChart it will contain information about the different slices for the presented series. More information is available in this article.

Angular directives

When using the RadCartesianChart and RadPieChart with Angular you are going to work with multiple custom angular Chart specific directives. In short these directives are used by the angular framework to enable 'linking' between separate HTML tags into one 'complex' element. As the RadCartesianChart) and (RadPieChart are composed by many elements (axes, series, legend, labels etc.) we have created an easy way of declaring for example an LineSeries as a simple standalone HTML tag and in order to 'link' it to its parent RadCartesianChart you will only need to add the custom inline tkCartesianSeries directive.

Here is a full list of the available custom Angular RadCartesianChart and RadPieChart directives and components:

Components

Represent the major elements:

Selector Class (more details)
RadCartesianChart RadCartesianChartComponent
RadPieChart RadPieChartComponent

Directives

Represent the smaller elements that are visualized in RadCartesianChart and RadPieChart:

Selector Class (more details)
RadLegendView RadLegendView
CategoricalAxis CategoricalAxis
LinearAxis LinearAxis
DateTimeCategoricalAxis DateTimeCategoricalAxis
DateTimeContinuousAxis DateTimeContinuousAxis
LogarithmicAxis LogarithmicAxis
LineSeries LineSeries
AreaSeries AreaSeries
SplineSeries SplineSeries
SplineAreaSeries SplineAreaSeries
BarSeries BarSeries
RangeBarSeries RangeBarSeries
BubbleSeries BubbleSeries
ScatterBubbleSeries ScatterBubbleSeries
ScatterSeries ScatterSeries
Palette Palette
PieSeries PieSeries
DonutSeries DonutSeries
CandlestickSeries CandlestickSeries
OhlcSeries OhlcSeries
RadCartesianChartGrid CartesianChartGrid
ChartGridLineAnnotation ChartGridLineAnnotation
ChartPlotBandAnnotation ChartPlotBandAnnotation
Trackball Trackball
PointLabelStyle PointLabelStyle

Inline Directives

Represent the 'link' mechanism of the smaller with the major elements

Selector Class (more details)
tkCartesianHorizontalAxis TKCartesianHorizontalAxis
tkCartesianVerticalAxis TKCartesianVerticalAxis
tkCartesianSeries TKCartesianSeries
tkPieSeries TKPieChartSeries
tkLineVerticalAxis TKLineVerticalAxis
tkLineHorizontalAxis TKLineHorizontalAxis
tkBarVerticalAxis TKBarVerticalAxis
tkBarHorizontalAxis TKBarHorizontalAxis
tkRangeBarVerticalAxis TKRangeBarVerticalAxis
tkRangeBarHorizontalAxis TKRangeBarHorizontalAxis
tkAreaVerticalAxis TKAreaVerticalAxis
tkAreaHorizontalAxis TKAreaHorizontalAxis
tkSplineVerticalAxis TKSplineVerticalAxis
tkSplineHorizontalAxis TKSplineHorizontalAxis
tkSplineAreaVerticalAxis TKSplineAreaVerticalAxis
tkSplineHorizontalAxis TKSplineAreaHorizontalAxis
tkBubbleVerticalAxis TKBubbleVerticalAxis
tkBubbleHorizontalAxis TKBubbleHorizontalAxis
tkScatterBubbleVerticalAxis TKScatterBubbleVerticalAxis
tkScatterBubbleHorizontalAxis TKScatterBubbleHorizontalAxis
tkCandlestickVerticalAxis TKCandlestickVerticalAxis
tkCandlestickHorizontalAxis TKCandlestickHorizontalAxis
tkOhlcVerticalAxis TKOhlcVerticalAxis
tkOhlcHorizontalAxis TKOhlcHorizontalAxis
tkScatterVerticalAxis TKScatterVerticalAxis
tkScatterHorizontalAxis TKScatterHorizontalAxis
tkCartesianGrid TKCartesianGrid
tkCartesianPalette TKCartesianPalette
tkCartesianPaletteEntry TKCartesianPaletteEntry
tkPiePalette TKPiePalette
tkPiePaletteEntry TKPiePaletteEntry
tkPieLegend TKPieLegend
tkCartesianLegend TKCartesianLegend
tkCartesianTrackball TKCartesianTrackball
tkCartesianAnnotations TKCartesianAnnotations
tkPieLabelStyle TKPieLabelStyle
tkDonutLabelStyle TKDonutLabelStyle
tkLineLabelStyle TKLineLabelStyle
tkBarLabelStyle TKBarLabelStyle
tkRangeBarLabelStyle TKRangeBarLabelStyle
tkAreaLabelStyle TKAreaLabelStyle
tkSplineLabelStyle TKSplineLabelStyle
tkSplineAreaLabelStyle TKSplineAreaLabelStyle
tkBubbleLabelStyle TKBubbleLabelStyle
tkScatterBubbleLabelStyle TKScatterBubbleLabelStyle
tkCandlestickLabelStyle TKCandlestickLabelStyle
tkOhlcLabelStyle TKOhlcStyle
tkScatterLabelStyle TKScatterStyle