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

Bullet

Updated on Dec 12, 2025

Bullet charts are categorical charts, which are a variation of the Bar Charts.

You can use them as a replacement for dashboard gauges and meters. The Angular bullet graph compares a given quantitative measure, such as temperature, against a qualitative range, such as warm, hot, and cold, and a symbol marker which encodes the comparative measure, such as the max temperature a year ago.

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 ...

Displaying Labels

To display labels for the bullet chart value, add a SeriesLabelsComponent configuration component to the series.

Change Theme

Theme

Loading ...

See Series Labels for more details on customizing the labels content.

Bullet

Binding to Data

Displaying Labels

Support and Learning Resources

Additional Resources