Angular BulletChart Component

The BulletChart component for Angular represents a widget which features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of differently styled qualitative ranges.

Introduction:

The jqxBulletChart is a versatile chart widget used to visualize a single measure against predefined performance ranges, such as target values, benchmarks, or thresholds. It’s often used for displaying progress against a goal or for showing key performance indicators (KPIs).

Key Features:

• Display Value: Visualizes a single measure within defined performance ranges.
• Ranges: Shows different thresholds (e.g., poor, average, good) within the chart.
• Pointer: Displays a pointer representing the current value.
• Orientation: Can be rendered horizontally or vertically to fit different design needs.
• Dynamic Data Binding: Supports binding to dynamic data sources.
• Customization: Allows for styling of ranges, the pointer, and other chart elements.

Installation:

To use jqxBulletChart in an Angular 19 application with standalone components, follow these steps:

1. Install jqWidgets via npm:

npm install jqwidgets-ng --save

2. Import the necessary module into your app.component.ts:

        import { Component } from '@angular/core';
        import { jqxBulletChartModule } from 'jqwidgets-ng/jqxbulletchart';
        import { CommonModule } from '@angular/common';

        @Component({
            selector: 'app-root',
            standalone: true,
            imports: [CommonModule, jqxBulletChartModule],
            template: `
                <h2>Bullet Chart Example</h2>
                <jqxBulletChart 
				    [ranges]="ranges" 
                    [target]="target" 
                    [pointer]="pointer" 
                    [ticks]="ticks">
                </jqxBulletChart>
            `,
            styleUrls: ['./app.component.css']
        })
        export class AppComponent {
             title: string = 'Revenue 2025 YTD';
			description: string = '(U.S. $ in thousands)';
			ranges: any[] = [
				{ startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
				{ startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
				{ startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
			];
			pointer: any = { value: 270, label: 'Revenue 2025 YTD', size: '25%', color: 'Black'};
			target: any = { value: 260, label: 'Revenue 2024 YTD', size: 4, color: 'Black' };
			ticks: any = { position: 'both', interval: 50, size: 10 };
        }
        

Properties:

value: The current value to be displayed on the chart.

value: 75

ranges: Defines the ranges (e.g., performance thresholds) that the value is compared against.

ranges: [
			{ startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
			{ startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
			{ startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ]

target: The target value to be compared against (often shown as a line or marker in the chart).

target: 85

pointer: The pointer settings, including its color and size.

pointer: { color: "#0000FF", size: 5 }

title: Text to label the chart with (e.g., to show the target value).

title: "Target: 85"

Methods:

getValue(): Retrieves the current value displayed on the chart.

let value = this.myBulletChart.getValue();

setValue(value): Sets a new value for the bullet chart.

this.myBulletChart.setValue(80);

refresh(): Refreshes the chart, especially useful when the chart is bound to dynamic data.

this.myBulletChart.refresh();

Events:

OnValueChanged: Triggered when the value changes in the chart.

    this.myBulletChart.on('valueChanged', (event) => {
        let value = event.args.value;
        console.log("New Value: " + value);
    });
    

OnPointerClick: Triggered when the pointer is clicked.

    this.myBulletChart.on('pointerClick', (event) => {
        console.log("Pointer clicked!");
    });