DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Bullet Charts

Bullet Charts

Bullet charts are useful when you need to compare a single measure to a target value. A bullet bar indicates the measure and a vertical line indicates the target value. The bullet also includes a zero level line that indicates zero on the scale.

Configure the Bullet Bar

Specify the value property to set the length of the bullet bar. The value should be between the startScaleValue and endScaleValue. If you do not specify the scale range, the startScaleValue is 0 and the endScaleValue is calculated automatically based on measure and target values.

When you arrange several bullets in a column, set the same scale range for them so that their bullet bars can be compared visually.

To change the bar color, use the color property.

Configure the Target and Zero Level Lines

Set the target property to specify the target value. You can also use the targetColor and targetWidth properties to customize the target line appearance.

The zero level line indicates zero and has the same color as the target line. If you want to hide the zero level line, you can disable the showZeroLevel property.

Configure the Tooltip

A tooltip contains information about the measure and target values. To configure the tooltip, use the tooltip object. In this demo, the customizeTooltip function within this object customizes the tooltip content.

Backend API
Copy to CodeSandBox
<div class="long-title"><h3>Daily temperature</h3></div> <div id="chart-demo"> <table class="demo-table"> <tr> <th></th> <th>June</th> <th>July</th> <th>August</th> </tr> <tr *ngFor="let week of weeksData"> <th>{{ week.weekCount }} week</th> <td *ngFor="let bullet of week.bulletsData"> <dx-bullet class="bullet" [startScaleValue]="0" [endScaleValue]="35" [value]="bullet.value" [target]="" [color]="bullet.color" > <dxo-tooltip [customizeTooltip]="customizeTooltip"></dxo-tooltip> </dx-bullet> </td> </tr> </table> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxBulletModule } from 'devextreme-angular'; import { Week, Service } from './app.service'; if (!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], }) export class AppComponent { weeksData: Week[]; constructor(service: Service) { this.weeksData = service.getWeeksData(); } customizeTooltip(arg) { return { text: `Current t&#176: ${arg.value}&#176C<br>` + `Average t&#176: ${}&#176C`, }; } } @NgModule({ imports: [ BrowserModule, BrowserTransferStateModule, DxBulletModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart-demo { height: 440px; width: 100%; } ::ng-deep .demo-table { margin-top: 80px; width: 100%; border: 1px solid #c2c2c2; border-collapse: collapse; } ::ng-deep .demo-table th, ::ng-deep .demo-table td { font-weight: 400; width: 200px; padding: 25px 10px 5px 10px; border: 1px solid #e5e5e5; } ::ng-deep .demo-table th { padding: 25px 15px 20px 15px; border: 1px solid #c2c2c2; } ::ng-deep .demo-table tr:nth-child(2) td { border-top: 1px solid #c2c2c2; } ::ng-deep .demo-table td:first-of-type { border-left: 1px solid #c2c2c2; } ::ng-deep .demo-table .bullet { width: 200px; height: 30px; } ::ng-deep .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
import { Injectable, } from '@angular/core'; export class Week { weekCount: string; bulletsData: Bullet[]; } export class Bullet { value: number; target: number; color?: string; } const weeksData: Week[] = [{ weekCount: 'First', bulletsData: [{ value: 23, target: 20, color: '#ebdd8f', }, { value: 27, target: 24, color: '#e8c267', }, { value: 20, target: 26, color: '#e55253', }], }, { weekCount: 'Second', bulletsData: [{ value: 24, target: 22, color: '#ebdd8f', }, { value: 28, target: 24, color: '#e8c267', }, { value: 30, target: 24, color: '#e55253', }], }, { weekCount: 'Third', bulletsData: [{ value: 35, target: 24, color: '#ebdd8f', }, { value: 24, target: 26, color: '#e8c267', }, { value: 28, target: 22, color: '#e55253', }], }, { weekCount: 'Fourth', bulletsData: [{ value: 29, target: 25, color: '#ebdd8f', }, { value: 24, target: 27, color: '#e8c267', }, { value: 21, target: 21, color: '#e55253', }], }]; @Injectable() export class Service { getWeeksData(): Week[] { return weeksData; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': '', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.1.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@23.1.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.1', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.48', 'devextreme-angular': 'npm:devextreme-angular@23.1.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@23.1.5/*/package.json', 'npm:devextreme-angular@23.1.5/ui/*/package.json', 'npm:devextreme-angular@23.1.5/package.json', 'npm:devexpress-diagram@2.2.1/package.json', 'npm:devexpress-gantt@4.1.48/package.json', ], }; System.config(window.config);
<!DOCTYPE html> <html xmlns=""> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>