Help guide the NativeScript roadmap! Participate in the community survey. 📝

NativeScript Angular

RadChart 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.

RadChart 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 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 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