Telerik UI for Windows 8 HTML

The Vertical Bullet chart can be used to visualize one or more data points, consisting of two values - a current value, represented by a column, and a target value, represented by a line at the same X position as the column. They can be used to represent comparison between an expected and actual value in different scenarios - company profit, people's performance, weather measures, etc.


Defining a Vertical Bullet Series Declaratively

To define a vertical bullet series in HTML, add an object with type property set to "verticalBullet" to the series array.

HTML Copy imageCopy
<div id="declarativeVerticalBulletSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'verticalBullet',
        data: [[17, 35],
               [20, 37],
               [36, 24],
               [30, 38],
               [23, 35],
               [45, 87],
               [67, 74],
               [12, 38]]
    theme: 'light',
    width: 400

Defining Vertical Bullet Series Programmatically

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

js Copy imageCopy
var verticalBulletSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("verticalBulletSeriesChart"));
var verticalBulletSeries = new Telerik.UI.Chart.VerticalBulletSeries(); = [[17, 35], [20, 37], [36, 45], [30, 38], [23, 35], [45, 87], [67, 74], [12, 38]];

Configuring Vertical Bullet Series

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

See Also