If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn which are the available series and how to choose the most appropriate depending on the data that you want to plot. The NativeScript UI Chart comes with a bunch of series suitable for different types of data. When the data has be visualized on a cartesian coordinate system, the
RadCartesianChart should be used along with an instance of one of the
CartesianSeries subtypes. The other option is to use
RadPieChart with an instance of the
CartesianSeries are additionally divided into two types:
Here is a complete list of all series types:
- CategoricalSeries Presenting Discrete Data
- CategoricalSeries Presenting Continuous Data
- CategoricalSeries Presenting Financial Data
- CartesianSeries Presenting Two Continuous Variables
ChartSeries Presenting Numerical Proportion
The ChartSeries is the base class for all series and provides the following properties:
showLabels- Determines whether labels are shown for each data point.
legendTitle- Determines the title which will be displayed in the legend for the current series.
valueProperty- Determines the name of the property on the source object that will provide the value used to plot the object in the chart.
items- Used to bind the series with a source of data items.
selectionMode- Responsible for the selection mode of the series.
labelStyle- Property of type PointLabelsStyle defining the style of the point labels.
CartesianSeries is a subtype of ChartSeries and draw the data from the source in a Cartesian Coordinate System. The cartesian series can be used only with RadCartesianChart. Along with all ChartSeries's properties, CartesianSeries also provide the following:
horizontalAxis- Defines the horizontal axis used to setup the chart.
verticalAxis- Defines the vertical axis used to setup the chart.
paletteMode- Defines the mode for applying palettes.
CategoricalSeries is a subtype of CartesianSeries. They require that the RadCartesianChart they are added to, has one axis that is category axis and shows the specific categories being compared and one axis that is a value axis and represents a measured value. Along with all CartesianSeries's properties, CategoricalSeries also provide the following:
categoryProperty- Defines the name of the property on the data object which will be used to plot the object into the right category.
stackMode- Defines how separate series are combined within a single chart.
Some of the CategoricalSeries are generally used to display relation between values in discrete categories, but they can also be used to visualize change over a period of time. These series are BarSeries, RangeBarSeries, BubbleSeries.
Figure 1: Categorical Chart with discrete data on Android (left) and iOS (right)
Some of the CategoricalSeries are generally used to display how values change over a period of time, but they can also be used to connect the values in discrete categories. These series are LineSeries, SplineSeries, AreaSeries, SplineAreaSeries.
Figure 2: Categorical Chart with continuous data on Android (left) and iOS (right)
Figure 3: Categorical Chart with financial data on Android (left) and iOS (right)
Figure 4: Scatter Chart on Android (left) and iOS (right)
CartesianSeries is a subtype of ChartSeries and draw the data from the source in a way that resembles pie slices. They can be used only with RadPieChart. They are generally useful to display how some value relates to the whole value. These series are PieSeries and DonutSeries.
Figure 5: Donut Chart on Android (left) and iOS (right)
The chart support selection of series and selection of data points. More information about this feature is available in this article.
When more than one series is added to a RadCartesianChart they can be stacked together. Here's more about this feature.
This article contains more information about how to use CSS or palettes to customize the series' appearance.
The drawing of labels can be controlled through axis'
showLabelsproperty. More information about the labels is available in their dedicated article.
Want to see this scenario in action? Check our SDK Examples repository on GitHub. You will find this and many other practical examples with NativeScript UI.
Examples used in this article:
Related articles you might find useful: