Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
47 lines (35 sloc) 2.36 KB
title page_title description slug tags position publish
Area series | Progress NativeScript UI Documentation
This article gives a basic introduction of Area series and continues with a sample scenario of how Area series are used.
series, cartesian, area, nativescript, professional, ui

RadChart Area Series

Area series work pretty much the same way as Line series with the only difference that the area between the categorical axis and the data points is filled with the corresponding color of the line. To use Area series, you need to initialize a {% typedoc_link classes:RadCartesianChart %}, define a {% typedoc_link classes:CategoricalAxis %} and {% typedoc_link classes:LinearAxis %} and bind the series to a set of data objects.


The following definition represents the data context that will be used to populate the Area series with data:

We use an instance of this model to assign it as the bindingContext of the page we have put our Area series on:

And finally, in the XML definition of the page we put a RadCartesianChart, add a AreaSeries instance to it and bind the series to the source of data:

Cartesian chart: Area series Cartesian chart: Area series


Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful:

  • [Bubble Series]({% slug chart-series-bubble %})
  • [Bar Series]({% slug chart-series-bar %})
  • [Pie Series]({% slug chart-series-pie %})
  • [Range-Bar Series]({% slug chart-series-range-bar %})
  • [Scatter-Bubble Series]({% slug chart-series-scatter-bubble %})
  • [Scatter Series]({% slug chart-series-scatter %})
  • [Spline Series]({% slug chart-series-spline %})
  • [Line Series]({% slug chart-series-line %})
  • [Area Series]({% slug chart-series-spline-area %})
  • [Candlestick Series]({% slug chart-series-candlestick %})
  • [Ohlc Series]({% slug chart-ohlc-series %})
You can’t perform that action at this time.