Telerik UI for Windows 8 HTML

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

chart-bullet-series

Defining a Bullet Series Declaratively

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

HTML Copy imageCopy
<div id="declarativeBulletSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'bullet',
        data: [[17, 35],
               [20, 37],
               [36, 24],
               [30, 38]]
    }],
    theme: 'light'
}">
</div>

Defining a Bullet Series Programmatically

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

js Copy imageCopy
var bulletSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("bulletSeriesChart"));
var bulletSeries = new Telerik.UI.Chart.BulletSeries();
bulletSeries.data = [[17, 35], [20, 37], [36, 45], [30, 38]];
bulletSeriesChartCtrl.series.push(bulletSeries);
bulletSeriesChartCtrl.refresh();

Configuring a 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 Bullet series.

Setting Fields

When binding RadChart to a DataSource, you should set the properties that point to the fields that will be used to populate the chart. The property names are:

  • currentField: The field that will be used to populate the the current value bar.

  • targetField: The field that will be used to locate the target value line.

For example:

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
      type: 'bullet',
      currentField: 'current',
      targetField: 'target'
    }],
    dataSource: {
        data: [ 
            {current: 20, target: 100},
            {current: 38, target: 70},
            {current: 42, target: 57},
            {current: 40, target: 93},
            {current: 22, target: 40},
            {current: 56, target: 72},
            {current: 72, target: 80},
            {current: 35, target: 93} 
        ],
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
</div>
chart-bullet-series-fields

Customizing the Target Line

The line that represents the target value exposes three main configuration options - border, color and line. Below you can see how they can be used to provide a customized look for the target line.

  • border: The border settings for the line. They include color, width and dashType options. color accepts any valid CSS color. width accepts a numeric value that sets the border width. dashType accepts one of the following values: "solid", "dot", "dash", "longDash", "dashDot", "longDashDot", "longDashDotDot".

  • color: The line color.

  • line: The line settings. To see a detailed description of the available options go to: Line Configuration

You can see a sample of a RadChart with customized bullet series below:

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
      type: 'bullet',
      currentField: 'current',
      targetField: 'target',
      target: {
        color: 'green',
        line: {
            width: 3
        },
        border: {
            width: 1,
            color: 'turquoise'
        }
      }
    }],
    dataSource: {
        data: [ 
            {current: 20, target: 100},
            {current: 38, target: 70},
            {current: 42, target: 57},
            {current: 40, target: 93},
            {current: 22, target: 40},
            {current: 56, target: 72},
            {current: 72, target: 80},
            {current: 35, target: 93} 
        ],
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
</div>
chart-bullet-series-target

Controlling the Distance Between Categories

Based on your requirement, you can increase or decrease the space between category clusters. This is done by setting the gap property to an appropriate numeric value. This value represents the proportion between the space between category clusters and the bar width (i.e. "gap: 10" means that the bar width will be one tenth of the space between category clusters).

Controlling the Distance Between Categories Example Copy imageCopy
<div id="categoriesDistanceChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [
        { 
            gap: 10,
            type: 'bullet', 
            data: [[16.7,19], [20,22], [15.7,25], [12,15], [40,28], [23,18]] 
        }
    ],
    categoryAxis: {
            categories: ['2000', '2002', '2005', '2008', '2010', '2012']
    },
    theme: 'light'
}">
</div>

You can see how the space increases between categories (Y-axis):

chart-bullet-series-gap

See Also