Telerik UI for Windows 8 HTML

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


Defining a Vertical Line Series Declaratively

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

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

Defining a Vertical Line Series Programmatically

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

JavaScript Copy imageCopy
var verticalLineSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("verticalLineSeriesChart"));
var verticalLineSeries = new Telerik.UI.Chart.VerticalLineSeries(); = [16.7, 20, 15.7, 26.6, 23.5];

Configuring a Vertical Line 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 Line series. As they are identical to the regular (horizontal) Line series, you can check their description here.

See Also

Other Resources