Bullet Elements

This guide provides a detailed overview of dxBullet elements. Each topic in this guide contains a brief description of an element and its main configurable features.

Below is the element map of the dxBullet widget. It may be helpful as you begin learning about the capabilities of this widget. Hover over an element on the map to discover the name of this element. A click on an element navigates you to a topic devoted to this element.

DevExtreme dxBullet Elements

Bullet Bar

A bullet bar is a horizontal bar that indicates a bullet chart's primary value.

DevExtreme ChartJS BulletChart BulletGraph

To specify the value indicated by the bullet bar, assign it to the value option.

JavaScript
$("#bulletContainer").dxBullet({
    value: 42
    // ...
});

This value must belong to a range determined by the startScaleValue and endScaleValue options. When you arrange several dxBullet widgets in a column, set the same range for them so that their bullet bars can be compared visually.

JavaScript
$("#bulletContainer").dxBullet({
    value: 42,
    startScaleValue: -100,
    endScaleValue: 50,
    // ...
});

NOTE: If you do not specify the scale range, the start scale value is 0 and the end scale value is calculated automatically depending on primary and target values.

To distinguish positive and negative values visually, the dxBullet widget features a zero level line. Positive values are drawn to the right from this line; negative ones - to the left.

You can change the bar color using the color option.

Target Line

A target line is a vertical line that indicates a target value. According to the concept of a bullet chart, the target value is supposed to be reached by the primary value, which is indicated on a bullet chart by the bullet bar.

DevExtreme ChartJS BulletChart BulletGraph

To specify the target value, set the target option of the main configuration object.

JavaScript
$("#bulletContainer").dxBullet({
    target: 50,
    // ...
});

Additionally, you can customize the appearance of the target line. Particularly, you can specify its color using the targetColor option, and its width using the targetWidth option.

Zero Level Line

A zero level line indicates zero on a bullet graph. It serves as a starting point to the bullet bar.

DevExtreme ChartJS BulletChart BulletGraph

By default, the zero level line is visible. However, in certain scenarios, you may need to change its visibility. For this purpose, use the showZeroLevel option.

JavaScript
$("#bulletContainer").dxBullet({
    showZeroLevel: true // false
    // ...
});

NOTE: For the zero level line to be displayed, the zero value must fall in the scale range specified by the startScaleValue and endScaleValue options.

When visible, the zero level line has the same color as the target line. This color is specified by the targetColor option.

Tooltip

A tooltip is a small popup rectangle containing information about the values of a bullet graph. The tooltip appears when a user hovers the mouse pointer over the bullet graph.

DevExtreme ChartJS BulletChart BulletGraph

Tooltips are configured using fields of the tooltip object. By default, they are enabled. However, if your scenario requires you to change the visibility of the tooltip, use the enabled field of the tooltip object.

JavaScript
$("#bulletContainer").dxBullet({
    tooltip: {
        enabled: true // false
    },
    // ...
});

Although by default the tooltip displays information about primary and the target values, you can configure it to represent any information you may find useful. To customize the contents of the tooltip, implement the customizeTooltip function. This function must return an object with the text field specified.

JavaScript
$("#bulletContainer").dxBullet({
    tooltip: {
        customizeTooltip: function (info) {
            return {
                text: '...' // the required text is specified here
            }
        },
        // ...
    },
    // ...
});

Furthermore, there is a number of additional options specifying the appearance of the tooltip. All of them are set in the tooltip configuration object. A structured overview of these options is given in the following list.

  • Color
    You can specify the color of the tooltip using the color option.

  • Alignment
    You can specify how to align the tooltip in regards to the bullet bar. For this purpose, use the horizontalAlignment and verticalAlignment options.

  • Font Settings
    To change the font of the text displayed by the tooltip, use fields of the font object.

  • Border Appearance
    You can change the visibility, color, width and other settings of the tooltip border using fields of the border configuration object.

  • Shadow
    The tooltip is displayed casting a small shadow. To specify its blurriness, opacity, color and other settings, use shadow object fields.

Show Example:
jQuery

In this example, you can change the horizontalAlignment and verticalAlignment options of the tooltip object using drop-down menus. Hover over the bullet to see changes in the tooltip.