NativeScript & Vue.JS

Chart Series Overview

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 PieSeries. The CartesianSeries are additionally divided into two types: ScatterSeries and CategoricalSeries.

Series Types

Here is a complete list of all series types:

  • CategoricalSeries Presenting Discrete Data
    • BarSeries
    • RangeBarSeries
    • BubbleSeries
  • CategoricalSeries Presenting Continuous Data
    • LineSeries
    • SplineSeries
    • AreaSeries
    • SplineAreaSeries
  • CategoricalSeries Presenting Financial Data
    • OhlcSeries
    • CandlesctickSeries
  • CartesianSeries Presenting Two Continuous Variables
    • ScatterSeries
    • ScatterBubbleSeries

  • ChartSeries Presenting Numerical Proportion

    • PieSeries
    • DonutSeries

    ChartSeries Type

    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 Type

    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 Type

    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.

    CategoricalSeries Presenting Discrete Data

    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)

    Chart series Chart series

    CategoricalSeries Presenting Continuous Data

    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)

    Chart series Chart series

    CategoricalSeries Presenting Financial Data

    Some of the CategoricalSeries are used to display financial data, such as stock prices, etc. These series are OhlcSeries and CandlesctickSeries.

    Figure 3: Categorical Chart with financial data on Android (left) and iOS (right)

    Chart series Chart series

    CartesianSeries Presenting Two Continous Variables

    ScatterSeries is a subtype CartesianSeries. They require that the RadCartesianChart they are added to, has two axes that are value axes. These series are ScatterSeries and ScatterBubbleSeries.

    Figure 4: Scatter Chart on Android (left) and iOS (right)

    Chart series Chart series

    ChartSeries Presenting Numerical Proportion

    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)

    Chart series Chart series

    Selection

    The chart support selection of series and selection of data points. More information about this feature is available in this article.

    Stack Mode

    When more than one series is added to a RadCartesianChart they can be stacked together. Here's more about this feature.

    Styling

    This article contains more information about how to use CSS or palettes to customize the series' appearance.

    Series Labels

    The drawing of labels can be controlled through axis' showLabels property. More information about the labels is available in their dedicated article.

    References

    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:

Ask the community Improve this article