Telerik UI for Windows 8 HTML

Vertical Area series visualize data as a portion of the Cartesian coordinate system. Categories are laid out on the Y-axis, while values go on the X-axis.


Defining a Vertical Area Series Declaratively

To define a Vertical Area series in HTML, add an object with type property set to "verticalArea" to the series array.

HTML Copy imageCopy
<div id="declarativeVerticalAreaChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
            type: 'verticalArea', 
            name: 'World', 
            data: [16.7, 20, 15.7, 26.6, 23.5] 

Defining a Vertical Area Series Programmatically

To programmatically add a Vertical Area series to the chart, create a new Telerik.UI.Chart.VerticalAreaSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect.

JavaScript Copy imageCopy
var verticalAreaSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("verticalAreaSeriesChart"));
var areaSeries = new Telerik.UI.Chart.VerticalAreaSeries(); = [16.7, 20, 15.7, 26.6, 23.5];

Configuring a Vertical Area Series

Apart from the common configuration settings listed in this article, there a few more that you can use to customize the look and behavior of the Vertical Area series. As they are identical to the regular (horizontal) Area series, you can check their description here.

See Also

Other Resources