New to Kendo UI for Angular? Start a free 30-day trial

Bullet Charts

Updated on Jan 20, 2026

Bullet charts provide a compact, space-efficient way to visualize performance metrics against targets and qualitative ranges. They serve as a modern alternative to traditional dashboard gauges and meters.

The Bullet chart displays a primary measure (current value) alongside a comparative measure (target value) within a qualitative scale defined by color-coded ranges. This design allows you to quickly assess whether performance falls within poor, average, or good zones. Common use cases include tracking revenue against quotas, monitoring KPIs against targets, and displaying progress toward goals in business dashboards.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Bullet chart series to an array through the data property in two formats:

Binding to arrays—Use arrays of [current, target].

    public data: [number, number][] = [[65, 80], [50, 75], [90, 95]];

Binding to objects—Use an array of objects with current and target properties.

public data: Array<{ current: number; target: number; category: string }> = [
    { current: 65, target: 80, category: 'Q1' },
    { current: 50, target: 75, category: 'Q2' },
    { current: 90, target: 95, category: 'Q3' }
];

When binding to objects, the Bullet chart automatically uses the current and target properties from your data. You can specify different property names through the following field mappings:

Property	Data type	Required	Description
`currentField`	`string`	No	The property name that contains the current value with `number` values. Defaults to `"current"`.
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.

The following example demonstrates how to bind the Bullet chart series to data using object models.

Change Theme

Theme

Loading ...

Vertical Bullet Chart

The Bullet chart supports vertical orientation through the verticalBullet series type. The vertical bullet chart displays the same data as the horizontal version but rotates the visualization 90 degrees, making it suitable for layouts where vertical space is preferred.

The following example demonstrates how to create a vertical Bullet chart.

Change Theme

Theme

Loading ...

Displaying Labels

To display labels for the bullet chart value, add a SeriesLabelsComponent configuration component to the series. You can customize the labels content using the content property, which accepts a function that returns the desired label text.

The following example demonstrates how to display and customize labels in Bullet charts.

Change Theme

Theme

Loading ...

Customizing the Appearance

You can customize the visual appearance of the Bullet chart through the target property, which controls how the target marker is displayed. The target property accepts a BulletTarget configuration object with the following customization options:

color—Specifies the color of the target marker.
border—Configures the border appearance, including color and width.
line—Controls the target line width through the BulletTargetLine configuration.

Additionally, you can customize the current value bar color using the color property.

The following example demonstrates how to customize the appearance of Bullet charts.

Change Theme

Theme

Loading ...

Bullet Charts

Binding to Data

Vertical Bullet Chart

Displaying Labels

Customizing the Appearance

Support and Learning Resources

Additional Resources