Chart: Overview

RadChart for NativeScript is a charting component that has been 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 control supports different chart types (and series) organized in hierarchies, depending on the coordinate system, used to plot the data points — for example Cartesian (RadCartesianChart) and radial (RadPieChart) coordinate systems.

A charting component in general is used to visualize (or plot) some data in a human-readable way through different representations like lines, areas, bars, pies, etc. Each series has a collection of data points—the data equivalent of a 2D point—and knows how to visualize them. Different series types may process certain types of data points—for example categorical series may contain categorical data points. An intuitive data binding mechanism transforms the raw data to appropriate data points depending on the chosen series.

Chart Types

Depending on the coordinate system that you want to use for visualization of the data points, you can use the following chart types:

  • RadCartesianChart: As the name hints, this concrete chart control uses the Cartesian coordinate system to plot the data points in its chart series. The X and Y axes define how each point’s coordinates in the plot area are calculated.
  • RadPieChart: This concrete chart control visualizes its data points using radial coordinate system. Each data point is represented as a slice from a pie. The ratio between the space consumed by each slice and the space consumed by the whole chart is the same as the ratio between the value of the data point that it represents and the total value of all data points in the series.

Angular directives

When using the RadCartesianChart and RadPieChart with Angular 2 you are going to work with multiple custom angular RadChart 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 2 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 RadLegendViewDirective
CategoricalAxis CategoricalAxis
LinearAxis LinearAxisDirective
DateTimeCategoricalAxis DateTimeCategoricalAxisDirective
DateTimeContinuousAxis DateTimeContinuousAxisDirective
LogarithmicAxis LogarithmicAxisDirective
LineSeries LineSeriesDirective
AreaSeries AreaSeriesDirective
SplineSeries SplineSeriesDirective
SplineAreaSeries SplineAreaSeriesDirective
BarSeries BarSeriesDirective
RangeBarSeries RangeBarSeriesDirective
BubbleSeries BubbleSeriesDirective
ScatterBubbleSeries ScatterBubbleSeriesDirective
ScatterSeries ScatterSeriesDirective
Palette PaletteDirective
PieSeries PieSeriesDirective
DonutSeries DonutSeriesDirective
CandlestickSeries CandlestickSeriesDirective
OhlcSeries OhlcSeriesDirective
RadCartesianChartGrid CartesianChartGridDirective
ChartGridLineAnnotation ChartGridLineAnnotationDirective
ChartPlotBandAnnotation ChartPlotBandAnnotationDirective
Trackball TrackballDirective
PointLabelStyle PointLabelStyleDirective

Inline Directives

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

Selector Class (more details)
tkCartesianHorizontalAxis TKCartesianHorizontalAxisDirective
tkCartesianVerticalAxis TKCartesianVerticalAxisDirective
tkCartesianSeries TKCartesianSeriesDirective
tkPieSeries TKPieChartSeriesDirective
tkLineVerticalAxis TKLineVerticalAxisDirective
tkLineHorizontalAxis TKLineHorizontalAxisDirective
tkBarVerticalAxis TKBarVerticalAxisDirective
tkBarHorizontalAxis TKBarHorizontalAxisDirective
tkRangeBarVerticalAxis TKRangeBarVerticalAxisDirective
tkRangeBarHorizontalAxis TKRangeBarHorizontalAxisDirective
tkAreaVerticalAxis TKAreaVerticalAxisDirective
tkAreaHorizontalAxis TKAreaHorizontalAxisDirective
tkSplineVerticalAxis TKSplineVerticalAxisDirective
tkSplineHorizontalAxis TKSplineHorizontalAxisDirective
tkSplineAreaVerticalAxis TKSplineAreaVerticalAxisDirective
tkSplineHorizontalAxis TKSplineAreaHorizontalAxisDirective
tkBubbleVerticalAxis TKBubbleVerticalAxisDirective
tkBubbleHorizontalAxis TKBubbleHorizontalAxisDirective
tkScatterBubbleVerticalAxis TKScatterBubbleVerticalAxisDirective
tkScatterBubbleHorizontalAxis TKScatterBubbleHorizontalAxisDirective
tkCandlestickVerticalAxis TKCandlestickVerticalAxisDirective
tkCandlestickHorizontalAxis TKCandlestickHorizontalAxisDirective
tkOhlcVerticalAxis TKOhlcVerticalAxisDirective
tkOhlcHorizontalAxis TKOhlcHorizontalAxisDirective
tkScatterVerticalAxis TKScatterVerticalAxisDirective
tkScatterHorizontalAxis TKScatterHorizontalAxisDirective
tkCartesianGrid TKCartesianGridDirective
tkCartesianPalette TKCartesianPaletteDirective
tkCartesianPaletteEntry TKCartesianPaletteEntryDirective
tkPiePalette TKPiePaletteDirective
tkPiePaletteEntry TKPiePaletteEntryDirective
tkPieLegend TKPieLegendDirective
tkCartesianLegend TKCartesianLegendDirective
tkCartesianTrackball TKCartesianTrackballDirective
tkCartesianAnnotations TKCartesianAnnotationsDirective
tkPieLabelStyle TKPieLabelStyleDirective
tkDonutLabelStyle TKDonutLabelStyleDirective
tkLineLabelStyle TKLineLabelStyleDirective
tkBarLabelStyle TKBarLabelStyleDirective
tkRangeBarLabelStyle TKRangeBarLabelStyleDirective
tkAreaLabelStyle TKAreaLabelStyleDirective
tkSplineLabelStyle TKSplineLabelStyleDirective
tkSplineAreaLabelStyle TKSplineAreaLabelStyleDirective
tkBubbleLabelStyle TKBubbleLabelStyleDirective
tkScatterBubbleLabelStyle TKScatterBubbleLabelStyleDirective
tkCandlestickLabelStyle TKCandlestickLabelStyleDirective
tkOhlcLabelStyle TKOhlcStyleDirective
tkScatterLabelStyle TKScatterStyleDirective