Telerik UI for Windows 8 HTML

Column series visualize data in vertical columns in a Cartesian coordinate system. Categories are laid out on the X-axis, while values go on the Y-axis.


Defining a Column Series Declaratively

To define a Column series in HTML, add an object with type property set to "column" to the series array.

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

Defining a Column Series Programmatically

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

JavaScript Copy imageCopy
var columnSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("columnSeriesChart"));
var columnSeries = new Telerik.UI.Chart.ColumnSeries(); = [16.7, 20, 15.7, 26.6, 23.5];

Configuring Column 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 Column series. As they are identical to the Bar series' settings, you can check their description here.

See Also

Other Resources