Syncfusion Angular Bullet Chart

Implementing Syncfusion Angular Bullet Chart

When to Use This Skill

Use this skill when you need to:

• Create a Bullet Chart component in an Angular application
• Display performance data with actual vs target comparisons
• Define and customize quality ranges (good, satisfactory, poor)
• Customize axes, labels, and data visualization elements
• Add accessibility features and keyboard navigation
• Configure tooltips, data labels, and animations
• Change chart orientation or apply themes

Component Overview

The Syncfusion Angular Bullet Chart is a specialized data visualization component designed for comparing actual values against target values. It's ideal for displaying performance metrics, progress tracking, and goal achievement visualization. The component displays:

• Value Bar (Actual Bar): The primary data measurement (feature measure)
• Target Bar (Comparative Bar): The goal or benchmark value
• Ranges: Color-coded zones representing quality levels (Good, Satisfactory, Poor)
• Axis: Configurable scale for data values
• Labels & Tooltips: Additional context and information on hover

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (@syncfusion/ej2-angular-charts)
• Basic Bullet Chart initialization
• Angular CLI setup for Angular 21+
• Standalone component architecture
• Module injection for features (tooltips, etc.)
• Adding data source and basic configuration

Data Binding and Sources

📄 Read: references/data-binding.md

• Local data binding for static datasets
• Remote data binding for dynamic data
• Data source structure and field mapping
• Mapping valueField and targetField
• Dynamic data updates

Axes and Ranges Configuration

📄 Read: references/axes-and-ranges.md

• Major and minor tick customization
• Tick placement (inside/outside)
• Label formatting (number, percentage, currency)
• Axis label positioning and customization
• Category labels and custom label styles
• Opposed position for right-aligned axes
• Range definition and color customization
• Quality range visualization (Good, Satisfactory, Poor)

Visual Elements and Data Display

📄 Read: references/visual-elements.md

• Value bar styling and shape customization (Rect, Dot)
• Border and fill customization for actual bars
• Target bar types (Circle, Cross, Rect)
• Target bar color and width customization
• Data labels configuration and styling
• Tooltip setup and customization
• Tooltip templates with custom HTML
• Title and subtitle positioning
• Chart dimensions (pixels, percentage)

Customization and Styling

📄 Read: references/customization.md

• Horizontal vs Vertical orientation
• Right-to-left (RTL) support
• Animation configuration (duration, delay)
• Theme selection and application
• CSS customization approaches
• Responsive design patterns

Accessibility Features

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508, and ADA compliance
• Keyboard navigation (Tab, Shift+Tab, Ctrl+P)
• Screen reader support and WAI-ARIA attributes
• Color contrast standards
• Mobile device support

Quick Start Example

Here's a minimal working example:

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        [tooltip]='{ enable: true }'
        title='Sales Performance'
        [ranges]='ranges'>
    </ejs-bulletchart>`,
    providers: [BulletTooltipService]
})
export class AppComponent implements OnInit {
    public data: any;
    public ranges: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
        
        this.ranges = [
            { end: 50, color: '#ffe0b2', opacity: 0.6 },    // Poor
            { end: 100, color: '#fff9c4', opacity: 0.6 },   // Satisfactory
            { end: 150, color: '#c8e6c9', opacity: 0.6 }    // Good
        ];
    }
}

Common Patterns

Pattern 1: Sales Performance Dashboard

When displaying sales metrics against targets:

data = [
    { category: 'Q1', value: 25000, target: 30000 },
    { category: 'Q2', value: 28000, target: 30000 },
    { category: 'Q3', value: 35000, target: 30000 }
];

ranges = [
    { end: 20000, color: '#ffe0b2' },      // Below Target
    { end: 30000, color: '#fff9c4' },      // On Target
    { end: 40000, color: '#c8e6c9' }       // Above Target
];

Pattern 2: Employee Performance Ratings

When comparing individual performance scores:

data = [
    { name: 'Alice', value: 85, target: 80 },
    { name: 'Bob', value: 72, target: 80 },
    { name: 'Charlie', value: 90, target: 80 }
];

Pattern 3: KPI Tracking with Orientation

When space is limited or vertical display is preferred:

<ejs-bulletchart orientation='Vertical' ...></ejs-bulletchart>

Key Properties

Common Use Cases

API Reference

A complete API reference for the Syncfusion Angular BulletChart is available in the references folder. It lists component properties, methods, events, and usage notes that match the official API docs.

Read the full API reference here: references/api-reference.md

1. Sales Performance Tracking: Display actual sales vs target with quality zones 2. Quality Metrics: Monitor production quality against benchmarks 3. HR Metrics: Track employee performance against goals 4. Budget Analysis: Compare actual spending vs budgeted amounts 5. Learning Progress: Show student progress toward learning objectives 6. Health Metrics: Display health indicators against recommended values 7. Project Status: Track project metrics against planned targets

---

Next Steps: Choose the reference file that matches your immediate need based on the guidance above, or start with getting-started.md if this is your first time using Bullet Chart.

Accessibility in Syncfusion Angular Bullet Chart

Table of Contents

• Overview
• Compliance Standards
• Accessibility Features
• Wcag Compliance
• Wcag 22 Levels
• Key Wcag Principles
• Keyboard Navigation
• Keyboard Shortcuts
• Example Keyboard Navigation Implementation
• Best Practice: Trap Tab Within Chart
• Screen Reader Support
• Aria Attributes
• Implementation With Ariaobile Accessibility
• Responsive Text Sizing
• Color Contrast
• WCAG AA Color Contrast Requirements
• Testing Color Contrast
• Accessible Color Palette
• High Contrast Theme
• Mobile Accessibility
• Touch Interactions
• Responsive Text Sizing
• Touch Friendly Tooltips
• Wai Aria Attributes
• Complete Aria Implementation
• Implementation Guidelines
• Step 1 Semantic Html
• Step 2 Descriptive Labels
• Step 3 Focus Management
• Step 4 Alternative Content
• Testing Accessibility
• Tools to Use
• Manual Testing Checklist
• Best Practices Summary
• Resources

Overview

The Syncfusion Angular Bullet Chart follows accessibility standards and guidelines to ensure that all users, including those with disabilities, can effectively use the component.

Compliance Standards

The Bullet Chart is compliant with:

• WCAG 2.2 - Web Content Accessibility Guidelines Level AA
• Section 508 - Federal accessibility standard
• ADA - Americans with Disabilities Act
• WAI-ARIA 1.2 - Web Accessibility Initiative - Accessible Rich Internet Applications

Accessibility Features

---

WCAG Compliance

WCAG 2.2 Levels

The Bullet Chart meets these levels:

• Level A: Basic accessibility features
• Level AA: Enhanced accessibility (recommended minimum)
• Level AAA: Enhanced accessibility (advanced)

Key WCAG Principles

1. Perceivable: Information is visible and perceivable 2. Operable: Users can navigate with keyboard or assistive devices 3. Understandable: Content is clear and predictable 4. Robust: Compatible with assistive technologies

---

Keyboard Navigation

Keyboard Shortcuts

The Bullet Chart supports these keyboard interactions:

Example: Keyboard Navigation Implementation

import { Component, ViewChild , HostListener} from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';
import { BulletChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector:'app-container',
    template: `
        <div>
            <button (click)="printChart()" aria-label="Print chart">
                Print Chart (Ctrl+P)
            </button>
            <ejs-bulletchart 
                #bulletChart
                [dataSource]='data'
                valueField='value'
                targetField='target'
                role='img'
                [attr.aria-label]='chartAriaLabel'>
            </ejs-bulletchart>
        </div>
    `,

})
export class AppComponent {
    @ViewChild('bulletChart') chart!: BulletChartComponent;

    public data = [
        { value: 100, target: 80 },
        { value: 200, target: 180 }
    ];

    public chartAriaLabel = 'Bullet Chart showing sales performance: actual vs target';
    @HostListener('window:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (event.ctrlKey && (event.key === 'p' || event.key === 'P')) {
            event.preventDefault();
            this.printChart();
        }
    }
    printChart(): void {
        this.chart.print();
    }
}

Best Practice: Trap Tab Within Chart

export class AppComponent {
    // Ensure keyboard focus cycles within the chart container
    hostElement.addEventListener('keydown', (e) => {
        if (e.key === 'Tab') {
            // Manage focus order within chart
            this.manageFocusOrder();
        }
    });
    manageFocusOrder(){
            // Get all focusable items: the button + the internal SVG elements
        const focusableSelectors = '[tabindex="0"]';
        const focusableElements = Array.from(document.querySelectorAll(focusableSelectors)) as HTMLElement[];
        
        const first = focusableElements[0];
        const last = focusableElements[focusableElements.length - 1];

        if (event.shiftKey) { // Shift + Tab (Backward)
            if (document.activeElement === first) {
                last.focus();
                event.preventDefault();
            }
        } else { // Tab (Forward)
            if (document.activeElement === last) {
                first.focus();
                event.preventDefault();
            }
        }
    }
}

---

Screen Reader Support

ARIA Attributes

The component uses these ARIA attributes:

// Role attributes
role="img"                          // Chart is an image
role="button"                       // Interactive elements
role="tablist"                      // Tab groups
role="table"                        // Tabular data

// Label attributes
aria-label="Chart description"      // Descriptive label
aria-labelledby="chartTitle"        // References title element
aria-describedby="chartDesc"        // Detailed description

// State attributes
aria-pressed="true/false"           // Toggle states
aria-expanded="true/false"          // Expanded/collapsed state
aria-disabled="true/false"          // Disabled state

Implementation with ARIA

import { Component } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `
        <div role="region" [attr.aria-labelledby]="'chart-title'">
            <h2 id="chart-title">Sales Performance Dashboard</h2>
            <p id="chart-description">
                This Bullet Chart displays quarterly sales performance 
                compared to targets. Green indicates good performance, 
                yellow indicates fair, and red indicates poor performance.
            </p>
            
            <ejs-bulletchart 
                [dataSource]='data'
                valueField='value'
                targetField='target'
                role='img'
                [attr.aria-label]='generateAriaLabel()'
                [attr.aria-describedby]="'chart-description'">
            </ejs-bulletchart>
        </div>
    `
})
export class AccessibleDashboardComponent {
    public data = [
        { category: 'Q1', value: 25000, target: 30000 },
        { category: 'Q2', value: 28000, target: 30000 }
    ];

    generateAriaLabel(): string {
        return `Bullet Chart: ${this.data.length} quarters of sales data. ` +
               `Q1 actual 25000 vs target 30000. ` +
               `Q2 actual 28000 vs target 30000.`;
    }
}

Screen Reader Best Practices

1. Provide meaningful labels: Use descriptive aria-labels 2. Include context: Describe what the chart shows 3. Explain ranges: Help users understand Good/Fair/Poor zones 4. Use semantic HTML: Use <h2>, <p>, <table> appropriately 5. Add alternative text: Provide textual alternatives to visual data

---

Color Contrast

WCAG AA Color Contrast Requirements

• Normal text: Minimum 4.5:1 ratio (foreground to background)
• Large text: Minimum 3:1 ratio
• Graphics: Minimum 3:1 ratio

Testing Color Contrast

// Example: Ensure good color contrast
const colorSchemes = {
    good: {
        background: '#ffffff',      // White
        text: '#000000',            // Black (21:1 ratio)
        accent: '#0066cc'           // Blue (8.59:1 ratio)
    },
    fair: {
        background: '#f0f0f0',      // Light gray
        text: '#333333',            // Dark gray (12.6:1 ratio)
        accent: '#0066cc'           // Blue (5.19:1 ratio)
    },
    accessible: {
        background: '#ffffff',
        text: '#000000',
        accent: '#004080'           // Darker blue for higher contrast
    }
};

Accessible Color Palette

// Range colors meeting WCAG AA contrast requirements
import { Component } from '@angular/core';
import { BulletChartModule, BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-angular-charts';
import { CommonModule } from '@angular/common';

@Component({
    imports: [BulletChartModule, CommonModule],
    selector: 'app-container',
    standalone: true,
    template: `
        <div [style.backgroundColor]="activeScheme.background" [style.color]="activeScheme.text" role="region">
            <h2 id="chart-title">Sales Performance Dashboard</h2>
            
            <ejs-bulletchart 
                [dataSource]='data'
                valueField='value'
                targetField='target'
                [valueFill]='activeScheme.accent'
                [targetColor]='activeScheme.text'
                [titleStyle]="{ color: activeScheme.text }"
                [labelStyle]="{ color: activeScheme.text }">
                
                <e-bullet-range-collection>
                    <!-- Loop through your accessible ranges -->
                    <e-bullet-range 
                        *ngFor="let range of accessibleRanges" 
                        [end]="range.end" 
                        [color]="range.color"
                        [opacity]="range.opacity">
                    </e-bullet-range>
                </e-bullet-range-collection>

            </ejs-bulletchart>
        </div>
    `
})
export class AppComponent {
    public data = [{ value: 120, target: 100 }];

    public accessibleRanges = [
        { end: 50, color: '#cc3333', opacity: 0.8 },   // Red (Poor)
        { end: 100, color: '#ff9900', opacity: 0.8 },  // Orange (Fair)
        { end: 150, color: '#009933', opacity: 0.8 }   // Green (Good)
    ];

    public activeScheme = {
        background: '#ffffff',
        text: '#000000',
        accent: '#004080'
    };
}

High Contrast Theme

<ejs-bulletchart 
    theme='Highcontrast'
    [dataSource]='data'
    valueField='value'
    targetField='target'>
</ejs-bulletchart>

---

Mobile Accessibility

Touch Interactions

The Bullet Chart supports accessible touch interactions:

import { Component } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';
import { BulletTooltipService} from '@syncfusion/ej2-angular-charts'

@Component({
    imports: [BulletChartModule],
    providers: [ BulletTooltipService ],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        [tooltip]='{ enable: true }'>
    </ejs-bulletchart>`
    
})
export class AppComponent {
    public data = [
        { value: 100, target: 80 },
        { value: 200, target: 180 }
    ];
}

Responsive Text Sizing

/* Ensure text scales with device size */
.e-bulletchart .e-title-text {
    font-size: clamp(16px, 4vw, 24px);  /* Responsive font size */
}

.e-bulletchart .e-axis-label {
    font-size: clamp(12px, 2vw, 16px);
}

.e-bulletchart .e-data-label {
    font-size: clamp(11px, 1.8vw, 14px);
}

Touch-Friendly Tooltips

public tooltipConfig = {
    enable: true,
    template: '<div style="padding: 12px; font-size: 14px;">' +
        '<b>${category}</b><br/>' +
        'Value: ${value}<br/>' +
        'Target: ${target}</div>',
    fill: '#ffffff',
    border: { color: '#000000', width: 2 }  // Thicker border for touch
};

---

WAI-ARIA Attributes

Complete ARIA Implementation

import { Component, ViewEncapsulation } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';
import { CommonModule } from '@angular/common';

@Component({
    imports: [BulletChartModule,CommonModule],
    standalone: true,
    selector: 'app-container',
    template: `
        <div role="region" [attr.aria-labelledby]="'chart-title'">
            <h2 id="chart-title" class="sr-only">Performance Dashboard</h2>
            
            <div id="chart-live" aria-live="polite" aria-atomic="true">
                <ejs-bulletchart 
                    #bulletChart
                    [dataSource]='data'
                    valueField='value'
                    targetField='target'
                    categoryField='category' 
                    role='img'
                    [attr.aria-label]='getChartLabel()'
                    [attr.aria-describedby]="'chart-description'">
                </ejs-bulletchart>
            </div>
            
            <p id="chart-description" class="sr-only">
                Bullet Chart showing quarterly sales performance. 
                Each bullet displays actual sales (blue bar) vs target (red line).
                Green range indicates good performance (above 80% of target),
                yellow indicates fair (60-80%), and red indicates poor (below 60%).
            </p>
          
            <!-- Data table for screen readers -->
            <table class="sr-only">
                <caption>Sales Performance Data</caption>
                <thead>
                    <tr>
                        <th>Quarter</th>
                        <th>Actual</th>
                        <th>Target</th>
                        <th>Performance</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of data">
                        <td>{{ item.category }}</td>
                        <td>{{ item.value }}</td>
                        <td>{{ item.target }}</td>
                        <td>{{ getPerformanceLevel(item) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    `,
    styles: [`
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public data = [
        { category: 'Q1', value: 25000, target: 30000 },
        { category: 'Q2', value: 28000, target: 30000 },
        { category: 'Q3', value: 35000, target: 30000 }
    ];

    getChartLabel(): string {
        return 'Performance Dashboard with quarterly sales data. ' +
               'Bullet chart showing actual vs target performance.';
    }

    getPerformanceLevel(item: any): string {
        const percentage = (item.value / item.target) * 100;
        if (percentage >= 80) return 'Good';
        if (percentage >= 60) return 'Fair';
        return 'Poor';
    }
}

---

Implementation Guidelines

Step 1: Semantic HTML

<section role="region" aria-labelledby="chart-title">
    <h2 id="chart-title">Performance Metrics</h2>
    <!-- Chart content -->
</section>

Step 2: Descriptive Labels

// Provide clear, descriptive labels
template = `<ejs-bulletchart 
    title='Q4 Sales Performance'
    subtitle='Actual Performance vs Target Goals'
    [attr.aria-label]='describeChart()'>
</ejs-bulletchart>`

describeChart(): string {
    return 'Bullet chart comparing actual sales to quarterly targets. ' +
           'Green indicates exceeding targets, yellow on-target, red below target.';
}

Step 3: Focus Management

// Ensure proper focus order
import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    template: `
        <button #printBtn (click)="print()" tabindex="0">Print</button>
        <ejs-bulletchart #chart tabindex="0"></ejs-bulletchart>
    `
})
export class FocusManagementComponent implements AfterViewInit {
    @ViewChild('chart') chart: any;

    ngAfterViewInit(): void {
        // Ensure logical tab order
        this.chart.focusTo(0);  // Set initial focus
    }

    print(): void {
        // Keyboard accessible print function
    }
}

Step 4: Alternative Content

// Provide text alternative to visual representation
template = `
    <ejs-bulletchart [dataSource]='data' #chart></ejs-bulletchart>
    
    <details>
        <summary>View Chart Data as Table</summary>
        <table>
            <tr *ngFor="let item of data">
                <td>{{ item.category }}</td>
                <td>{{ item.value }}</td>
                <td>{{ item.target }}</td>
            </tr>
        </table>
    </details>
`

---

Testing Accessibility

Tools to Use

1. Screen Readers: NVDA (free), JAWS, VoiceOver 2. Color Contrast: WebAIM Contrast Checker, Axe DevTools 3. ARIA Validation: ARIA Authoring Practices Guide (APG) 4. Automated Testing: Axe-core, WebAIM accessibility checker

Manual Testing Checklist

• [ ] Navigate using only keyboard (Tab, Shift+Tab, Enter)
• [ ] Test with screen reader enabled
• [ ] Verify color contrast meets WCAG AA
• [ ] Check focus indicators are visible
• [ ] Test with zoom at 200%
• [ ] Verify on mobile with accessibility features
• [ ] Test RTL mode if supported
• [ ] Validate all ARIA attributes

---

Best Practices Summary

1. Always use descriptive aria-labels - Help screen reader users understand purpose 2. Ensure keyboard access - All features must work without mouse 3. Maintain high contrast - Meet WCAG AA minimum ratios 4. Test with real AT - Use actual screen readers during testing 5. Provide alternatives - Include data tables for complex visualizations 6. Use semantic HTML - Improves accessibility automatically 7. Document accessibility - Inform users of accessibility features 8. Test on devices - Check mobile and tablet accessibility 9. Follow WCAG guidelines - Aim for Level AA compliance minimum 10. User feedback - Include users with disabilities in testing

Resources

• WCAG 2.2 Guidelines
• WAI-ARIA Authoring Practices
• Section 508 Standards
• WebAIM Accessibility Articles
• Syncfusion Accessibility Documentation

Bullet Chart API Reference (Syncfusion Angular)

This file summarizes the most-used properties, methods, and events for the Syncfusion Angular BulletChart component. The content below is aligned with the official API documentation for @syncfusion/ej2-angular-charts (BulletChart).

Table of Contents

• Component Import
• Tag
• Key Properties (Selected)
• Methods
• Events (selected)
• Example Usage (Angular Standalone Component)
• Where to Find the Official API

Component import

import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

Tag

• <ejs-bulletchart> (standalone component with BulletChartModule)

Key Properties (selected)

• [dataSource: Object[]](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#datasource) — Array of data objects.
• [valueField: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#valuefield) — Field name in data for actual/feature measure.
• [targetField: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#targetfield) — Field name in data for target/comparative measure.
• [categoryField?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#categoryfield) — Optional field for category labels.
• ranges: [RangeModel[]](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangemodel) — Array of range objects (each with end, color, opacity).
• [minimum?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#minimum) — Chart minimum value.
• [maximum?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#maximum) — Chart maximum value.
• [interval?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#interval) — Axis interval value.
• [labelFormat?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#labelformat) — Axis label format (e.g., n0, c0, p0).
• [enableGroupSeparator?: boolean](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#enablegroupseparator) — Use group separators in numbers.
• majorTickLines?: [MajorTickLinesSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/majorticklinessettingsmodel) — Major tick appearance.
• minorTickLines?: [MinorTickLinesSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/minorticklinessettingsmodel) — Minor tick appearance.
• [minorTicksPerInterval?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#minorticksperinterval) — Minor ticks per interval (default commonly 4).
• [labelPosition?: LabelsPlacement](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#labelposition) — 'Inside' | 'Outside'.
• [opposedPosition?: boolean](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#opposedposition) — Place axis on opposite side.
• [orientation?: OrientationType](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#orientation) — 'Horizontal' | 'Vertical'.
• [type?: FeatureType](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#type) — 'Rect' | 'Dot' (value bar shape).
• [targetTypes?: TargetType[]](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#targettypes) — Allowed target marker types: Rect, Circle, Cross.
• [targetWidth?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#targetwidth) — Width of the target marker (px).
• [targetColor?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#targetcolor) — Fill color for target marker.
• [valueFill?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#valuefill) — Fill color for value bar.
• [valueHeight?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#valueheight) — Height/thickness of value bar (px).
• valueBorder?: [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bordermodel) — Border for value bar (color, width).
• dataLabel?: [BulletDataLabelModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletdatalabelmodel) — Data label config (enable, format, labelStyle).
• tooltip?: [BulletTooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bullettooltipsettingsmodel) — Tooltip enable and styling.
• [title?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#title) — Chart title.
• [subtitle?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#subtitle) — Chart subtitle.
• titlePosition?: TextPosition — e.g., Top.
• titleStyle?: [BulletLabelStyleModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletlabelstylemodel) — Style for title text.
• subtitleStyle?: [BulletLabelStyleModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletlabelstylemodel) — Style for subtitle.
• theme?: [ChartTheme](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/charttheme) — Theme string (Material, Fabric, Bootstrap, Tailwind, Highcontrast, etc.).
• [width?: string | number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#width) — Width in px or %.
• [height?: string | number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#height) — Height in px or %.
• [enableRtl?: boolean](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#enablertl) — Right-to-left rendering.
• [enablePersistence?: boolean](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#enablepersistence) — Persist state across reloads.
• [locale?: string](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#locale) — Locale code for localization.
• [tabIndex?: number](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#tabindex) — Tab index for keyboard navigation.
• animation?: [AnimationModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/animationmodel) — Animation configuration for feature bar.
• margin?: [MarginModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/marginmodel) — Chart margin configuration.
• legendSettings?: [BulletChartLegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletchartlegendsettingsmodel) — Legend configuration.
• bulletChartLegendModule?: [BulletChartLegend](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletchartlegend) — Module injection for legend features.
• bulletTooltipModule?: [BulletTooltip](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bullettooltip) — Module injection for tooltip features.

Note: For full type definitions and default values, consult the official API docs linked above.

Methods

• createSvg(): void — Method to create the SVG element for rendering. (see: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#createsvg)
• destroy(): void — Destroys the component and removes handlers. (see: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#destroy)
• export(type: ExportType, fileName?: string, orientation?: PdfPageOrientation, controls?: any[], width?: number, height?: number, isVertical?: boolean): void — Export chart as image/PDF. (see: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#export)
• print(id?: string | string[] | Element): void — Print the chart using DOM element or id. (see: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#print)
• refresh(): void — Refresh the chart after data or configuration updates (available on component instance). (see: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#refresh)

Events (selected)

• load — Fired before the chart is rendered; can be used to set theme or initial state. (args type: IBulletLoadedEventArgs)
• loaded — Fired after the chart has finished rendering. (args type: IBulletLoadedEventArgs)
• beforePrint — Triggered before printing begins. (args type: IPrintEventArgs, see the API events section: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#events)
• bulletChartMouseClick — Fired when the chart is clicked (mouse event payload with data info). (args type: IBulletMouseEventArgs)
• tooltipRender — Fired before a tooltip is displayed; allows customizing tooltip content. (args type: IBulletchartTooltipEventArgs)
• legendRender — Fired when legend elements are being rendered (if legend used). (args type: IBulletLegendRenderEventArgs)

Event payloads generally include information about the data, series (if applicable), and DOM event details. See official docs for full event arg types: https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default#events

Example usage (Angular standalone component)

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [BulletChartModule],
  standalone: true,
  providers: [BulletTooltipService],
  template: `
    <ejs-bulletchart
      id="bullet"
      [dataSource]="data"
      valueField="value"
      targetField="target"
      [ranges]="ranges"
      [tooltip]="{ enable: true }"
      (load)="onLoad($event)"
      (loaded)="onLoaded($event)">
    </ejs-bulletchart>
  `
})
export class ExampleComponent implements OnInit {
  public data: any[] = [];
  public ranges: any[] = [];

  ngOnInit(): void {
    this.data = [ { value: 100, target: 80 } ];
    this.ranges = [ { end: 50, color: '#ffe0b2' }, { end: 100, color: '#c8e6c9' } ];
  }

  onLoad(args: any) { /* set theme or defaults */ }
  onLoaded(args: any) { /* e.g., analytics */ }
}

Where to find the Base API

• Official online docs (index page):

https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/index-default

---

If you want, I can also:

• Expand the api-reference.md with full type signatures and default values (longer), or
• Inject a short API summary into other references/*.md pages where relevant (e.g., visual-elements.md or axes-and-ranges.md).

Axes and Ranges Configuration in Syncfusion Angular Bullet Chart

Table of Contents

• Axis Customization
• Tick Lines Customization
• Tick Placement Options
• Label Formatting
• Standard Number Format
• Grouping Separator
• Custom Label Format
• Label Positioning
• Label Position Relative to Range
• Opposed Position
• Label Style Customization
• Category Labels
• Basic Category Labels
• Category Label Customization
• Use Range Color for Labels
• Ranges Definition
• Basic Range Setup
• How Ranges Work
• Range Customization
• Color and Opacity
• Real-World Range Examples
• Sales Performance Ranges
• Employee Rating Ranges
• Budget Utilization Ranges
• Complete Axis and Ranges Example
• Best Practices
• Common Patterns

Axis Customization

The Bullet Chart axis represents the quantitative scale used to measure values. Customize the axis to meet your visualization needs.

Tick Lines Customization

Major Tick Lines

Customize the appearance of major tick marks:

<ejs-bulletchart 
    [majorTickLines]='majorTickConfig'>
</ejs-bulletchart>

// Component properties
public majorTickConfig = {
    width: 2,           // Thickness of tick line
    height: 8,          // Length of tick mark
    color: '#333333',   // Color of tick
    useRangeColor: false
};

Minor Tick Lines

Configure smaller tick marks between major ticks:

public minorTickConfig = {
    width: 1,
    height: 4,
    color: '#999999',
    useRangeColor: false
};

template = `<ejs-bulletchart 
    [minorTickLines]='minorTickConfig'>
</ejs-bulletchart>`

Tick Placement Options

Control whether ticks appear inside or outside the chart range:

// TickPosition: 'Inside' or 'Outside' (default is 'Outside')
<ejs-bulletchart 
    tickPosition='Inside'>
</ejs-bulletchart>

Example: Inside Ticks

<ejs-bulletchart 
    tickPosition='Inside'
    [majorTickLines]='{ width: 2, height: 8, color: "#333" }'
    [minorTickLines]='{ width: 1, height: 4, color: "#ccc" }'>
</ejs-bulletchart>

---

Label Formatting

Standard Number Format

Format axis labels using standard format codes:

<ejs-bulletchart 
    labelFormat='n1'>
</ejs-bulletchart>

Common Format Codes:

Grouping Separator

Add thousand separators to axis labels:

<ejs-bulletchart 
    labelFormat='n0'
    [enableGroupSeparator]='true'>
</ejs-bulletchart>

Custom Label Format

Create custom formats with placeholders:

// Use ${value} placeholder for the axis value
<ejs-bulletchart 
[labelFormat]='labelFormat'>
</ejs-bulletchart>
  export class AppComponent{
        public labelFormat: string = '${value}K';
  }

// This will convert 25 to "25K"

More Custom Format Examples:

// Revenue format: "$1,000" becomes "$1K"
labelFormat = 'US$${value}K'

// Percentage format: "0.5" becomes "50%"
labelFormat = '${value}%'

// Score format: "85" becomes "85/100"
labelFormat = '${value}/100'

---

Label Positioning

Label Position Relative to Range

Place axis labels inside or outside the chart area:

// 'Inside' or 'Outside' (default)
<ejs-bulletchart 
    labelPosition='Inside'>
</ejs-bulletchart>

Opposed Position

Place axis on the opposite side:

// Places axis labels on right side (for horizontal orientation)
<ejs-bulletchart 
    [opposedPosition]='true'>
</ejs-bulletchart>

Label Style Customization

Customize the appearance of axis labels:

public labelStyle = {
    color: '#333333',
    fontFamily: 'Arial',
    fontSize: '12px',
    fontWeight: '500',
    fontStyle: 'Normal',
    opacity: 1
};

template = `<ejs-bulletchart 
    [labelStyle]='labelStyle'>
</ejs-bulletchart>`

---

Category Labels

Display labels for each bullet chart (e.g., product names, regions, quarters):

Basic Category Labels

public data = [
    { category: 'Q1 2024', value: 25000, target: 30000 },
    { category: 'Q2 2024', value: 28000, target: 30000 },
    { category: 'Q3 2024', value: 35000, target: 30000 }
];

template = `<ejs-bulletchart 
    [dataSource]='data'
    valueField='value'
    targetField='target'
    categoryField='category'>
</ejs-bulletchart>`

Category Label Customization

Customize the style of category labels:

public categoryLabelStyle = {
    color: '#444444',
    fontFamily: 'Segoe UI',
    fontSize: '13px',
    fontWeight: 'Bold',
    fontStyle: 'Normal'
};

template = `<ejs-bulletchart 
    [categoryLabelStyle]='categoryLabelStyle'>
</ejs-bulletchart>`

Use Range Color for Labels

Apply colors from ranges to category labels:

public categoryLabelStyle = {
    useRangeColor: true  // Labels inherit range colors
};

---

Ranges Definition

Ranges represent quality zones in the Bullet Chart (e.g., Poor, Satisfactory, Good).

Basic Range Setup

Define ranges using the ranges property:

public ranges = [
    { 
        end: 50,                    // Range end value
        color: '#ffe0b2',          // Background color
        opacity: 0.6                // Transparency
    },
    { 
        end: 100,
        color: '#fff9c4',
        opacity: 0.6
    },
    { 
        end: 150,
        color: '#c8e6c9',
        opacity: 0.6
    }
];

template = `<ejs-bulletchart 
    [minimum]='0'
    [maximum]='150'
    [ranges]='ranges'>
</ejs-bulletchart>`

How Ranges Work

1. The chart minimum value is the start of the first range (default 0) 2. Each range's end property defines where that range ends 3. The next range starts where the previous one ended 4. Ranges are typically ordered: Poor → Satisfactory → Good

Example Range Structure:

// If minimum is 0 and maximum is 100:
ranges = [
    { end: 33, color: '#ff0000' },    // 0-33: Poor (Red)
    { end: 66, color: '#ffff00' },    // 33-66: Fair (Yellow)
    { end: 100, color: '#00ff00' }    // 66-100: Good (Green)
];

---

Range Customization

Color and Opacity

Customize range appearance:

public ranges = [
    {
        end: 50,
        color: '#ff6b6b',           // Dark red
        opacity: 0.8                // 80% opacity
    },
    {
        end: 100,
        color: '#ffd93d',           // Bright yellow
        opacity: 0.7
    },
    {
        end: 150,
        color: '#6bcf7f',           // Green
        opacity: 0.9
    }
];

Real-World Range Examples

Sales Performance Ranges

// Sales targets in thousands
public salesRanges = [
    { end: 20000, color: '#ff4444' },      // Below $20K: Poor
    { end: 30000, color: '#ffbb44' },      // $20-30K: Fair
    { end: 50000, color: '#44bb44' }       // $30-50K: Good
];

Employee Rating Ranges

// Scores out of 100
public ratingRanges = [
    { end: 60, color: '#ffcccc' },   // Below 60: Needs Improvement
    { end: 80, color: '#ffffcc' },   // 60-80: Satisfactory
    { end: 100, color: '#ccffcc' }   // 80-100: Excellent
];

Budget Utilization Ranges

// Percentage utilization
public budgetRanges = [
    { end: 50, color: '#ff6b6b' },   // Under 50%: Under-utilized
    { end: 100, color: '#ffd93d' },  // 50-100%: Optimal
    { end: 150, color: '#ff4444' }   // Over 100%: Over-budget
];

---

Complete Axis and Ranges Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        id='bulletChart'
        [dataSource]='chartData'
        valueField='value'
        targetField='target'
        categoryField='category'
        [minimum]='0'
        [maximum]='100'
        title='Department Performance'
        [ranges]='ranges'
        labelFormat='n0'
        [enableGroupSeparator]='true'
        labelPosition='Outside'
        tickPosition='Outside'
        [majorTickLines]='majorTicks'
        [minorTickLines]='minorTicks'
        [labelStyle]='axisLabelStyle'
        [categoryLabelStyle]='categoryStyle'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public chartData: any;
    public ranges: any;
    public majorTicks: any;
    public minorTicks: any;
    public axisLabelStyle: any;
    public categoryStyle: any;

    ngOnInit(): void {
        // Data with categories
        this.chartData = [
            { category: 'Sales', value: 75, target: 80 },
            { category: 'Marketing', value: 65, target: 75 },
            { category: 'Operations', value: 85, target: 80 },
            { category: 'HR', value: 70, target: 75 }
        ];

        // Define performance ranges
        this.ranges = [
            { end: 50, color: '#ffcccc', opacity: 0.8 },   // Below 50: Poor
            { end: 80, color: '#ffffcc', opacity: 0.8 },   // 50-80: Fair
            { end: 100, color: '#ccffcc', opacity: 0.8 }   // 80-100: Good
        ];

        // Major tick configuration
        this.majorTicks = {
            width: 2,
            height: 8,
            color: '#333333'
        };

        // Minor tick configuration
        this.minorTicks = {
            width: 1,
            height: 4,
            color: '#cccccc'
        };

        // Axis label styling
        this.axisLabelStyle = {
            color: '#666666',
            fontFamily: 'Arial',
            fontSize: '11px'
        };

        // Category label styling
        this.categoryStyle = {
            color: '#333333',
            fontWeight: 'Bold',
            fontSize: '12px'
        };
    }
}

Best Practices

1. Use meaningful range divisions - Align ranges with business goals 2. Keep label formats readable - Don't over-complicate custom formats 3. Ensure good color contrast - Make ranges visually distinct 4. Test label overflow - Ensure long labels don't clutter the chart 5. Match range colors to meaning - Red for poor, Green for good 6. Document range meanings - Add legend or documentation for users 7. Use opacity for layering - Slightly transparent ranges allow visibility

Common Patterns

Pattern 1: Three-Zone Performance

ranges = [
    { end: 33 },    // Poor
    { end: 66 },    // Fair
    { end: 100 }    // Good
];

Pattern 2: Traffic Light Colors

ranges = [
    { end: 50, color: '#ff0000' },      // Red: Poor
    { end: 100, color: '#ffff00' },     // Yellow: Fair
    { end: 150, color: '#00ff00' }      // Green: Good
];

Pattern 3: Budget Zones

ranges = [
    { end: 75 },     // Under budget
    { end: 100 },    // On budget
    { end: 125 }     // Over budget
];

Customization and Styling in Syncfusion Angular Bullet Chart

Table of Contents

• Orientation
• Horizontal Orientation Default
• Vertical Orientation
• When to Use Each Orientation
• Orientation Example
• Right-to-Left RTL Support
• Enable RTL
• When to Use RTL
• RTL Example
• Animation
• Basic Animation
• Animation Configuration
• Animation Timing Examples
• Animation Example
• Themes
• Available Themes
• Applying Themes
• Theme Examples
• Theme Selection Based on Context
• Complete Customization Example
• Best Practices
• Common Patterns

Orientation

Change the layout of the Bullet Chart from horizontal to vertical:

Horizontal Orientation (Default)

// Default: value bars flow left-to-right
<ejs-bulletchart 
    orientation='Horizontal'>
</ejs-bulletchart>

Vertical Orientation

// Value bars flow top-to-bottom
<ejs-bulletchart 
    orientation='Vertical'>
</ejs-bulletchart>

When to Use Each Orientation

Orientation Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `
        <div>
            <h3>Horizontal</h3>
            <ejs-bulletchart 
                orientation='Horizontal'
                [dataSource]='data'
                valueField='value'
                targetField='target'>
            </ejs-bulletchart>
        </div>
        <div>
            <h3>Vertical</h3>
            <ejs-bulletchart 
                orientation='Vertical'
                [dataSource]='data'
                valueField='value'
                targetField='target'>
            </ejs-bulletchart>
        </div>
    `
})
export class AppComponent implements OnInit {
    public data: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 }
        ];
    }
}

---

Right-to-Left (RTL) Support

Enable right-to-left rendering for Arabic, Hebrew, and other RTL languages:

Enable RTL

<ejs-bulletchart 
    [enableRtl]='true'>
</ejs-bulletchart>

When to Use RTL

• Displaying content in Arabic, Hebrew, Persian, Urdu
• Supporting international/multi-language applications
• Following cultural localization requirements

RTL Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        [enableRtl]='isRtlEnabled'
        title='مؤشر الأداء'
        subtitle='الفعلي مقابل الهدف'>
    </ejs-bulletchart>
    <button (click)="toggleRtl()">Toggle RTL</button>`,
    styles: [`
        :host { direction: rtl; }
    `]
})
export class AppComponent implements OnInit {
    public data: any;
    public isRtlEnabled: boolean = true;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
    }

    toggleRtl(): void {
        this.isRtlEnabled = !this.isRtlEnabled;
    }
}

---

Animation

Animate the value and target bars when the chart first loads:

Basic Animation

Enable default animation:

<ejs-bulletchart 
    [animation]='{ enable: true }'>
</ejs-bulletchart>

Animation Configuration

public animationConfig = {
    enable: true,
    duration: 1000,      // Animation duration in milliseconds
    delay: 0             // Delay before animation starts (ms)
};

template = `<ejs-bulletchart 
    [animation]='animationConfig'>
</ejs-bulletchart>`

Animation Timing Examples

// Quick animation (500ms)
animation = {
    enable: true,
    duration: 500,
    delay: 0
}

// Slow, delayed animation (2 seconds)
animation = {
    enable: true,
    duration: 2000,
    delay: 500
}

// Fast with stagger effect
animation = {
    enable: true,
    duration: 800,
    delay: 100  // Small delay creates staggered effect with multiple bullets
}

Animation Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        title='Performance Metrics'
        [animation]='animationConfig'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;
    public animationConfig: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 }
        ];

        // Smooth 1.5 second animation with slight delay
        this.animationConfig = {
            enable: true,
            duration: 1500,
            delay: 200
        };
    }
}

---

Themes

Apply pre-defined or custom themes to your Bullet Chart:

Available Themes

The Bullet Chart supports multiple built-in themes:

// Available themes:
// 'Material' (default)
// 'Fabric'
// 'Bootstrap'
// 'Bootstrap4'
// 'Tailwind'
// 'Highcontrast'

Applying Themes

<ejs-bulletchart 
    theme='Bootstrap'>
</ejs-bulletchart>

Theme Examples

// Modern Material Design
<ejs-bulletchart theme='Material'></ejs-bulletchart>

// Microsoft Fabric Design
<ejs-bulletchart theme='Fabric'></ejs-bulletchart>

// Bootstrap Classic
<ejs-bulletchart theme='Bootstrap'></ejs-bulletchart>

// Bootstrap 4
<ejs-bulletchart theme='Bootstrap4'></ejs-bulletchart>

// Tailwind CSS
<ejs-bulletchart theme='Tailwind'></ejs-bulletchart>

// High Contrast (Accessibility)
<ejs-bulletchart theme='Highcontrast'></ejs-bulletchart>

Theme Selection Based on Context

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `
        <div>
            <select (change)="onThemeChange($event)">
                <option value="Material">Material</option>
                <option value="Fabric">Fabric</option>
                <option value="Bootstrap">Bootstrap</option>
                <option value="Tailwind">Tailwind</option>
                <option value="Highcontrast">High Contrast</option>
            </select>
        </div>
        <ejs-bulletchart 
            [dataSource]='data'
            [theme]='currentTheme'
            valueField='value'
            targetField='target'>
        </ejs-bulletchart>
    `
})
export class AppComponent implements OnInit {
    public data: any;
    public currentTheme: string = 'Material';

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
    }

    onThemeChange(event: any): void {
        this.currentTheme = event.target.value;
    }
}

Complete Customization Example

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  BulletChartModule,
  BulletChartComponent,
} from '@syncfusion/ej2-angular-charts';
import { FormsModule } from '@angular/forms';
@Component({
  imports: [BulletChartModule, FormsModule],
  standalone: true,
  selector: 'app-container',
  template: `
        <div class='dashboard-container'>
            <div class='controls'>
                <label>
                    <input type="checkbox" 
                        [(ngModel)]='isRtl' 
                        (change)="updateChart()">
                    RTL Mode
                </label>
                <label>
                    <select [(ngModel)]='selectedOrientation' 
                        (change)="updateChart()">
                        <option value="Horizontal">Horizontal</option>
                        <option value="Vertical">Vertical</option>
                    </select>
                    Orientation
                </label>
                <label>
                    <select [(ngModel)]='selectedTheme' 
                        (change)="updateChart()">
                        <option value="Material">Material</option>
                        <option value="Bootstrap">Bootstrap</option>
                        <option value="Tailwind">Tailwind</option>
                    </select>
                    Theme
                </label>
            </div>   
            <ejs-bulletchart
    #bulletChart
    [dataSource]="chartData"
    valueField="value"
    targetField="target"
    categoryField="category"
    [orientation]="selectedOrientation"
    [enableRtl]="isRtl"
    [theme]="selectedTheme"
    [animation]="animationConfig"
    title="Performance Dashboard"
    [ranges]="ranges">
</ejs-bulletchart>

        </div>
    `,
    styles: [`
        .dashboard-container {
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
        }
        .controls label {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .controls input,
        .controls select {
            padding: 5px 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
            font-size: 13px;
        }
    `],
	encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
  @ViewChild('bulletChart')
  public bulletChart!: BulletChartComponent;

  public chartData: any;
  public ranges: any;
  public animationConfig: any;
  public isRtl: boolean = false;
  public selectedOrientation: string = 'Horizontal';
  public selectedTheme: string = 'Material';
  ngOnInit(): void {
    this.chartData = [
      { category: 'Sales', value: 75, target: 80 },
      { category: 'Marketing', value: 65, target: 75 },
      { category: 'Operations', value: 85, target: 80 },
    ];
    this.ranges = [
      { end: 50, color: '#ff6b6b' },
      { end: 80, color: '#ffd93d' },
      { end: 100, color: '#6bcf7f' },
    ];
    this.animationConfig = {
      enable: true,
      duration: 1000,
      delay: 200,
    };
  }
  updateChart(): void {
    console.log('Chart updated:', {
      rtl: this.isRtl,
      orientation: this.selectedOrientation,
      theme: this.selectedTheme,
    });

    requestAnimationFrame(() => {
      this.bulletChart?.refresh();
    });
  }
}

Best Practices

1. Choose orientation strategically - Horizontal for most cases, Vertical for narrow spaces 2. Test RTL thoroughly - Ensure all text and labels render correctly 3. Use animations sparingly - Avoid overwhelming users with slow animations 4. Theme for consistency - Match your application's design system 5. ID-Based Customization - Avoid using general CSS classes for internal styling. Since the chart is an SVG, use the component's id to target specific elements (e.g., #myChart_FeatureMeasure_0) in your global styles. 6. Test across browsers - Ensure customizations work in target browsers 7. Accessibility first - Use High Contrast theme for accessibility needs

Common Patterns

Pattern 1: Responsive Layout

// Auto-switch orientation based on screen size
get selectedOrientation(): string {
    return window.innerWidth < 768 ? 'Vertical' : 'Horizontal';
}

Pattern 2: Theme Persistence

// Save theme preference to localStorage
setTheme(theme: string): void {
    this.selectedTheme = theme;
    localStorage.setItem('bulletChartTheme', theme);
}

loadTheme(): void {
    this.selectedTheme = localStorage.getItem('bulletChartTheme') || 'Material';
}

Pattern 3: Dynamic RTL Support

// Detect language and enable RTL
setLanguage(lang: string): void {
    this.isRtl = ['ar', 'he', 'ur'].includes(lang);
}

Data Binding in Syncfusion Angular Bullet Chart

Data binding is the process of connecting your Bullet Chart to data sources. The Bullet Chart supports both static local data and dynamic remote data binding.

Table of Contents

• Local Data Binding
• Basic Local Data Setup
• Data Source Properties
• Essential Field Mapping
• Data Examples by Use Case
• Sales Performance
• Employee Performance
• Budget vs Actual
• Dynamic Data Updates
• Triggering Data Reload
• Reactive Data Updates with NgOnInit
• Remote Data Binding (HTTP Services)
• Using HttpClient
• Mock API Response Format
• Complete Example with Error Handling
• Data Binding with Categories
• Performance Considerations
• Large Data Sets
• Data Refresh Optimization
• Common Data Binding Patterns
• Pattern 1: Static Initialization
• Pattern 2: API Integration
• Pattern 3: Real-time Updates
• Data Binding Best Practices
• Troubleshooting

Local Data Binding

Basic Local Data Setup

Bind a static array of data to the Bullet Chart:

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 },
            { value: 400, target: 380 }
        ];
    }
}

Data Source Properties

The dataSource property accepts an array where each element represents one bullet:

interface BulletChartDataItem {
    value: number;          // REQUIRED: Actual/feature measure
    target: number;         // REQUIRED: Target/comparative measure
    category?: string;      // OPTIONAL: Label for the bullet
    [key: string]: any;     // Additional custom properties
}

Essential Field Mapping

Use these properties to map data fields:

Example with Field Mapping:

data = [
    { actual: 25000, goal: 30000, name: 'Q1' },
    { actual: 28000, goal: 30000, name: 'Q2' },
    { actual: 35000, goal: 30000, name: 'Q3' }
];

template = `<ejs-bulletchart 
    [dataSource]='data' 
    valueField='actual' 
    targetField='goal'
    categoryField='name'>
</ejs-bulletchart>`

Data Examples by Use Case

Sales Performance

public salesData = [
    { region: 'North', actual: 25000, target: 30000 },
    { region: 'South', actual: 28000, target: 30000 },
    { region: 'East', actual: 35000, target: 30000 },
    { region: 'West', actual: 22000, target: 30000 }
];

Employee Performance

public employeeData = [
    { name: 'Alice Johnson', score: 85, targetScore: 80 },
    { name: 'Bob Smith', score: 72, targetScore: 80 },
    { name: 'Charlie Davis', score: 90, targetScore: 80 },
    { name: 'Diana Wilson', score: 78, targetScore: 80 }
];

Budget vs Actual

public budgetData = [
    { department: 'Marketing', actual: 45000, budget: 50000 },
    { department: 'Operations', actual: 120000, budget: 100000 },
    { department: 'R&D', actual: 75000, budget: 80000 },
    { department: 'HR', actual: 35000, budget: 40000 }
];

Dynamic Data Updates

Update chart data in response to user interactions or application state changes:

Triggering Data Reload

import { Component, ViewChild } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';
import { BulletChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `
        <button (click)="updateData()">Refresh Data</button>
        <ejs-bulletchart 
            #bulletChart
            [dataSource]='data' 
            valueField='value' 
            targetField='target'>
        </ejs-bulletchart>
    `
})
export class AppComponent {
    @ViewChild('bulletChart', { static: false }) 
    bulletChart!: BulletChartComponent;

    public data: any;

    constructor() {
        this.data = this.getInitialData();
    }

    updateData(): void {
        this.data = this.getInitialData();
        if (this.bulletChart) {
            this.bulletChart.refresh();
        }
    }

    getInitialData(): any {
        return [
            { value: Math.random() * 100, target: 80 },
            { value: Math.random() * 100, target: 80 }
        ];
    }
}

Reactive Data Updates with NgOnInit

ngOnInit(): void {
    // Simulate data fetching every 5 seconds
    setInterval(() => {
        this.data = this.generateRandomData();
        this.bulletChart.refresh();
    }, 5000);
}

generateRandomData(): any {
    return [
        { value: Math.round(Math.random() * 100), target: 80 },
        { value: Math.round(Math.random() * 100), target: 90 }
    ];
}

Remote Data Binding (HTTP Services)

Using HttpClient

Fetch data from an API endpoint:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.http.get('/api/bullet-chart-data')
            .subscribe(response => {
                this.data = response;
            });
    }
}

Mock API Response Format

Your API should return data in this structure:

[
    { "value": 100, "target": 80, "category": "Q1" },
    { "value": 200, "target": 180, "category": "Q2" },
    { "value": 300, "target": 280, "category": "Q3" }
]

Complete Example with Error Handling

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `
    <div>
      <button (click)="loadData()">Load Data</button>
      <p *ngIf="loading">Loading...</p>
      <p *ngIf="error" style="color: red;">{{ error }}</p>
      <ejs-bulletchart
        *ngIf="data.length"
        [dataSource]="data"
        valueField="value"
        targetField="target"
        categoryField="category">
      </ejs-bulletchart>
    </div>
    `
})
export class AppComponent implements OnInit {
    public data: any;
    public loading: boolean = false;
    public error: string = '';

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.loadData();
    }

    loadData(): void {
        this.loading = true;
        this.error = '';
        
        this.http.get<any>('/api/bullet-chart-data')
            .subscribe(
                (response) => {
                    this.data = response;
                    this.loading = false;
                },
                (error: HttpErrorResponse) => {
                    this.error = `Failed to load data: ${error.statusText}`;
                    this.loading = false;
                }
            );
    }
}

Data Binding with Categories

Display labels for each bullet chart:

public data = [
    { category: 'Revenue', value: 25000, target: 30000 },
    { category: 'Profit', value: 8000, target: 10000 },
    { category: 'Growth', value: 12, target: 15 }
];

template = `<ejs-bulletchart 
    [dataSource]='data' 
    valueField='value' 
    targetField='target'
    categoryField='category'>
</ejs-bulletchart>`

Performance Considerations

Large Data Sets

For datasets with many records (100+), consider:

1. Pagination: Load data in chunks 2. Virtual Scrolling: Render only visible items 3. Data Filtering: Pre-filter on server side

// Fetch paginated data
loadPage(pageNumber: number): void {
    this.http.get(`/api/data?page=${pageNumber}&size=50`)
        .subscribe(response => {
            this.data = response;
        });
}

Data Refresh Optimization

Use refresh() method only when needed:

// Bad: Refreshes entire chart every time
onDataChange(): void {
    this.chart.refresh();
}

// Good: Update array reference to trigger change detection
updateDataArray(): void {
    this.data = [...this.newData];  // Creates new reference
}

Common Data Binding Patterns

Pattern 1: Static Initialization

ngOnInit(): void {
    this.data = this.getStaticData();
}

getStaticData(): any {
    return [
        { value: 100, target: 80 },
        { value: 200, target: 180 }
    ];
}

Pattern 2: API Integration

ngOnInit(): void {
    this.dataService.getBulletChartData()
        .subscribe(data => this.data = data);
}

Pattern 3: Real-time Updates

ngOnInit(): void {
    this.dataService.getBulletChartDataStream()
        .subscribe(data => {
            this.data = data;
            this.chart?.refresh();
        });
}

Data Binding Best Practices

1. Always provide both valueField and targetField - Chart needs both for comparison 2. Ensure numeric values - value and target should be numbers 3. Use meaningful categories - Help users identify each bullet 4. Validate data structure - Catch mapping errors early 5. Handle empty data - Provide fallback when no data exists 6. Cache API responses - Reduce unnecessary requests 7. Error handling - Always handle HTTP errors gracefully

Troubleshooting

Chart appears empty?

• Verify valueField and targetField match your data property names
• Ensure data array is not null or undefined
• Check that data contains actual numeric values

Data not updating?

• Use chart.refresh() after data changes
• Create new array reference for change detection: this.data = [...newData]
• Verify HttpClient module is imported

API calls not working?

• Check CORS configuration on server
• Verify API endpoint URL is correct
• Use browser DevTools Network tab to diagnose

Getting Started with Syncfusion Angular Bullet Chart

Table of Contents

• Prerequisites
• Setup Angular Application
• Step 1: Install Angular CLI
• Step 2: Create a New Angular Project
• Add Syncfusion Angular Charts Package
• Option 1: Using Angular CLI (Recommended)
• Option 2: Manual npm Installation
• Import BulletChartModule
• Create Your First Bullet Chart
• Basic Initialization
• Add Sample Data
• Data Structure Requirements
• Add Title and Ranges
• Enable Tooltips
• Step 1: Import BulletTooltipService
• Step 2: Configure Tooltip
• Run Your Application
• Complete Getting Started Example
• Troubleshooting

Prerequisites

Ensure your development environment meets these requirements:

• Node.js and npm installed (latest LTS recommended)
• Angular CLI 21+ (supports standalone components by default)
• Angular 21+ (this guide focuses on standalone component architecture)
• Basic knowledge of Angular components and TypeScript

For detailed compatibility with other Angular versions, refer to the Angular version support matrix.

Setup Angular Application

Step 1: Install Angular CLI

Install Angular CLI globally:

npm install -g @angular/cli

To install a specific Angular CLI version (recommended for consistency):

npm install -g @angular/cli@21.0.0

Step 2: Create a New Angular Project

Generate a new Angular application:

ng new syncfusion-bullet-chart-app

When prompted, configure:

• Stylesheet format: Choose CSS, SCSS, or Less (CSS is default)
• Routing: Enable if needed
• Server-side rendering: Choose based on your requirements
• AI Tool: Select or skip

Navigate to your project directory:

cd syncfusion-bullet-chart-app

Note: In Angular 21+, the CLI generates simplified file structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Add Syncfusion Angular Charts Package

Option 1: Using Angular CLI (Recommended)

Install the Bullet Chart package and its peer dependencies:

ng add @syncfusion/ej2-angular-charts

This command automatically:

• Adds @syncfusion/ej2-angular-charts to package.json
• Installs all peer dependencies
• Configures necessary imports

Option 2: Manual npm Installation

npm install @syncfusion/ej2-angular-charts

Import BulletChartModule

In your component file (e.g., app.component.ts), import the Bullet Chart module:

import { Component } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-bulletchart></ejs-bulletchart>`
})
export class AppComponent { }

Create Your First Bullet Chart

Basic Initialization

Create a minimal Bullet Chart component:

import { Component } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-bulletchart id='container'></ejs-bulletchart>`
})
export class AppComponent { }

Add Sample Data

Modify your component to include data:

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 },
            { value: 400, target: 380 },
            { value: 500, target: 480 }
        ];
    }
}

Data Structure Requirements

Each data object in your dataSource should contain:

interface BulletChartData {
    value: number;          // Actual/feature measure value
    target: number;         // Target/comparative measure value
    category?: string;      // Optional: Label for each bullet (for categoryField)
    [key: string]: any;     // Any additional properties needed
}

Example with Categories:

data = [
    { category: 'Q1', value: 25000, target: 30000 },
    { category: 'Q2', value: 28000, target: 30000 },
    { category: 'Q3', value: 35000, target: 30000 }
];

Add Title and Ranges

Make the chart more informative:

@Component({
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        title='Sales Performance'
        [ranges]='ranges'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;
    public ranges: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
        
        this.ranges = [
            { end: 50, color: '#ffe0b2', opacity: 0.6 },    // Poor: Orange
            { end: 100, color: '#fff9c4', opacity: 0.6 },   // Satisfactory: Yellow
            { end: 150, color: '#c8e6c9', opacity: 0.6 }    // Good: Green
        ];
    }
}

Enable Tooltips

To display information on hover:

Step 1: Import BulletTooltipService

import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    providers: [BulletTooltipService],  // Add tooltip service
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        [tooltip]='{ enable: true }'>
    </ejs-bulletchart>`
})
export class AppComponent { }

Step 2: Configure Tooltip

tooltip = {
    enable: true,
    fill: '#ffffff',           // Tooltip background color
    border: { color: '#cccccc', width: 1 }
};

Run Your Application

Start the development server:

ng serve

Open your browser and navigate to:

http://localhost:4200

Complete Getting Started Example

Here's a complete, working component:

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div style="margin: 20px;">
            <h2>Sales Performance Dashboard</h2>
            <ejs-bulletchart 
                id='bulletChart'
                [dataSource]='chartData' 
                valueField='value' 
                targetField='target'
                categoryField='category'
                title='Quarterly Sales'
                subtitle='vs Target'
                [ranges]='ranges'
                [tooltip]='tooltipConfig'>
            </ejs-bulletchart>
        </div>
    `,
    providers: [BulletTooltipService]
})
export class AppComponent implements OnInit {
    public chartData: any;
    public ranges: any;
    public tooltipConfig: any;

    ngOnInit(): void {
        // Sample data with categories
        this.chartData = [
            { category: 'Q1 2024', value: 25000, target: 30000 },
            { category: 'Q2 2024', value: 28000, target: 30000 },
            { category: 'Q3 2024', value: 35000, target: 30000 },
            { category: 'Q4 2024', value: 32000, target: 30000 }
        ];

        // Define quality ranges
        this.ranges = [
            { end: 20000, color: '#ffe0b2', opacity: 0.6 },    // Below Target
            { end: 30000, color: '#fff9c4', opacity: 0.6 },    // On Target
            { end: 40000, color: '#c8e6c9', opacity: 0.6 }     // Above Target
        ];

        // Tooltip configuration
        this.tooltipConfig = {
            enable: true,
            fill: '#ffffff',
            border: { color: '#999999', width: 1 }
        };
    }
}

Troubleshooting

Issue: Multiple BulletChart Not Rendering

Cause: When multiple Bullet Chart components are rendered on the same page, each chart should use a unique container `id` to avoid DOM rendering conflicts.

<!-- Correct: unique IDs -->
<ejs-bulletchart id="bullet-sales" [dataSource]="salesData"></ejs-bulletchart>
<ejs-bulletchart id="bullet-revenue" [dataSource]="revenueData"></ejs-bulletchart>
<ejs-bulletchart id="bullet-profit" [dataSource]="profitData"></ejs-bulletchart>

<!-- ✗ WRONG - No IDs -->
<ejs-bulletchart [dataSource]="salesData"></ejs-bulletchart>
<ejs-bulletchart [dataSource]="revenueData"></ejs-bulletchart>

<!-- ✗ WRONG: duplicate IDs -->
<ejs-bulletchart id="bulletchart" [dataSource]="salesData"></ejs-bulletchart>
<ejs-bulletchart id="bulletchart" [dataSource]="revenueData"></ejs-bulletchart>

Package not found?

npm install @syncfusion/ej2-angular-charts
npm install @syncfusion/ej2-base

Module not recognized? Ensure BulletChartModule is in the imports array of your component.

Empty chart? Verify that dataSource, valueField, and targetField are correctly configured.

Visual Elements and Data Display in Syncfusion Angular Bullet Chart

Table of Contents

• Value Bar Configuration
• Basic Value Bar
• Value Bar Types
• Value Bar Color Customization
• Value Bar Height
• Value Bar Border
• Complete Value Bar Example
• Target Bar Configuration
• Basic Target Bar
• Target Bar Types
• Target Bar Color
• Target Bar Width
• Target Bar Customization Example
• Data Labels
• Enable Data Labels
• Data Label Configuration
• Data Label Styling
• Complete Data Label Example
• Tooltips
• Enable Basic Tooltip
• Tooltip Customization
• Custom Tooltip Template
• Advanced Tooltip Example
• Title and Subtitle
• Basic Title
• Title and Subtitle Usage
• Title Positioning
• Title Styling
• Chart Dimensions
• Container-Based Sizing
• Explicit Pixel Sizing
• Responsive Percentage Sizing
• Default Dimensions
• Complete Visual Elements Example
• Best Practices

Value Bar Configuration

The value bar (also called actual bar or feature bar) displays the primary measurement value in the Bullet Chart.

Basic Value Bar

Map your data value to the value bar:

<ejs-bulletchart 
    [dataSource]='data'
    valueField='value'
    targetField='target'>
</ejs-bulletchart>

// Component data
public data = [
    { value: 100, target: 80 },
    { value: 200, target: 180 }
];

Value Bar Types

Change the shape of the value bar:

// Type: 'Rect' (default) or 'Dot'
<ejs-bulletchart 
    type='Rect'>
</ejs-bulletchart>

Type Options:

Example: Dot Type

<ejs-bulletchart 
    type='Dot'
    [dataSource]='data'
    valueField='value'
    targetField='target'>
</ejs-bulletchart>

Value Bar Color Customization

Solid Fill Color

Set a single fill color for all value bars:

<ejs-bulletchart 
    valueFill='#4472C4'>
</ejs-bulletchart>

Data-Driven Fill Color

Apply different colors from your data:

public data = [
    { value: 100, target: 80, color: '#FF6B6B' },
    { value: 200, target: 180, color: '#4ECDC4' },
    { value: 300, target: 280, color: '#95E1D3' }
];

template = `<ejs-bulletchart 
    [dataSource]='data'
    valueFill='color'>
</ejs-bulletchart>`

Value Bar Height

Control the thickness of the value bar:

// Height in pixels
<ejs-bulletchart 
    [valueHeight]='8'>
</ejs-bulletchart>

Value Bar Border

Customize the border of the value bar:

public valueBorder = {
    color: '#2E2E2E',    // Border color
    width: 2             // Border width in pixels
};

template = `<ejs-bulletchart 
    [valueBorder]='valueBorder'>
</ejs-bulletchart>`

Complete Value Bar Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        type='Rect'
        valueFill='#007AFF'
        [valueHeight]='10'
        [valueBorder]='valueBorder'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;
    public valueBorder: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 }
        ];

        this.valueBorder = {
            color: '#1A1A1A',
            width: 1
        };
    }
}

---

Target Bar Configuration

The target bar (also called comparative bar or goal marker) displays the target/benchmark value.

Basic Target Bar

<ejs-bulletchart 
    [dataSource]='data'
    valueField='value'
    targetField='target'>
</ejs-bulletchart>

Target Bar Types

Customize the target bar marker shape:

// targetTypes: 'Rect', 'Circle', or 'Cross'
<ejs-bulletchart 
    [targetTypes]='targetTypes'>
</ejs-bulletchart>
export class AppComponent {
  public targetTypes: string[] = ['Circle'];
}

Type Options:

Visual Comparison:

// Rect (default) - Sharp, traditional look
<ejs-bulletchart targetTypes='Rect'></ejs-bulletchart>

// Circle - Rounded, modern appearance
<ejs-bulletchart targetTypes='Circle'></ejs-bulletchart>

// Cross - Prominent, easy to spot
<ejs-bulletchart targetTypes='Cross'></ejs-bulletchart>

Target Bar Color

Set the fill color of the target bar:

<ejs-bulletchart 
    targetColor='#FF6B6B'>
</ejs-bulletchart>

Target Bar Width

Control the size/width of the target marker:

<ejs-bulletchart 
    [targetWidth]='4'>
</ejs-bulletchart>

Target Bar Customization Example

<ejs-bulletchart 
    [dataSource]='data'
    valueField='value'
    targetField='target'
    targetTypes='Circle'
    targetColor='#E81E63'
    [targetWidth]='6'>
</ejs-bulletchart>

---

Data Labels

Display the actual value on the chart:

Enable Data Labels

<ejs-bulletchart 
    [dataLabel]='{ enable: true }'>
</ejs-bulletchart>

Data Label Configuration

public dataLabelConfig = {
    enable: true,
    format: 'n0'        // Format the displayed value
};

template = `<ejs-bulletchart 
    [dataLabel]='dataLabelConfig'>
</ejs-bulletchart>`

Data Label Styling

Customize the appearance of data labels:

public dataLabelStyle = {
    color: '#333333',
    fontFamily: 'Arial',
    fontSize: '12px',
    fontWeight: '500',
    fontStyle: 'Normal',
    opacity: 1
};

public dataLabelConfig = {
    enable: true,
    labelStyle: this.dataLabelStyle
};

template = `<ejs-bulletchart 
    [dataLabel]='dataLabelConfig'>
</ejs-bulletchart>`

Complete Data Label Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        [dataLabel]='dataLabelConfig'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;
    public dataLabelConfig: any;

    ngOnInit(): void {
        this.data = [
            { value: 25000, target: 30000 },
            { value: 28000, target: 30000 },
            { value: 35000, target: 30000 }
        ];

        this.dataLabelConfig = {
            enable: true,
            format: 'c0',  // Currency format
            labelStyle: {
                color: '#666666',
                fontSize: '13px',
                fontWeight: 'Bold'
            }
        };
    }
}

---

Tooltips

Display information when users hover over the chart:

Enable Basic Tooltip

import { BulletChartModule, BulletTooltipService } 
    from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    providers: [BulletTooltipService],
    template: `<ejs-bulletchart 
        [tooltip]='{ enable: true }'>
    </ejs-bulletchart>`
})
export class AppComponent { }

Tooltip Customization

public tooltipConfig = {
    enable: true,
    fill: '#ffffff',           // Background color
    border: {
        color: '#cccccc',
        width: 1
    },
    textStyle: {
        color: '#333333',
        fontFamily: 'Arial',
        fontSize: '12px'
    }
};

template = `<ejs-bulletchart 
    [tooltip]='tooltipConfig'>
</ejs-bulletchart>`

Custom Tooltip Template

Display custom HTML in tooltips using placeholder values:

public tooltipTemplate = '<div style="padding: 5px;">' +
    'Value: <b>${value}</b><br/>' +
    'Target: <b>${target}</b><br/>' +
    'Category: <b>${category}</b>' +
    '</div>';

template = `<ejs-bulletchart 
    [tooltip]='{ enable: true, template: tooltipTemplate }'>
</ejs-bulletchart>`

Available Placeholders:

Advanced Tooltip Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } 
    from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector:'app-container',
    providers: [BulletTooltipService],
    template: `<ejs-bulletchart 
        [dataSource]='data'
        valueField='value'
        targetField='target'
        categoryField='category'
        [tooltip]='tooltipConfig'>
    </ejs-bulletchart>`
})
export class AppComponent implements OnInit {
    public data: any;
    public tooltipConfig: any;

    ngOnInit(): void {
        this.data = [
            { category: 'Q1', value: 25000, target: 30000 },
            { category: 'Q2', value: 28000, target: 30000 },
            { category: 'Q3', value: 35000, target: 30000 }
        ];

        this.tooltipConfig = {
            enable: true,
            template: '<div style="padding: 8px; background: #f0f0f0;">' +
                'Actual: $${value}<br/>' +
                'Target: $${target}<br/>'+
                '</div>',
            fill: '#ffffff',
            border: { color: '#999999', width: 2 },
            textStyle: {
                color: '#333333',
                fontSize: '12px'
            }
        };
    }
}

---

Title and Subtitle

Add context information to your chart:

Basic Title

<ejs-bulletchart 
    title='Sales Performance'>
</ejs-bulletchart>

Title and Subtitle Usage

<ejs-bulletchart 
    title='Quarterly Sales'
    subtitle='Actual vs Target'>
</ejs-bulletchart>

Title Positioning

// titlePosition: 'Top' (default), 'Bottom', 'Left', 'Right'
<ejs-bulletchart 
    title='Performance Metrics'
    titlePosition='Bottom'>
</ejs-bulletchart>

Title Styling

public titleStyle = {
    color: '#333333',
    fontFamily: 'Arial',
    fontSize: '16px',
    fontWeight: 'Bold',
    fontStyle: 'Normal',
    opacity: 1
};

public subtitleStyle = {
    color: '#666666',
    fontFamily: 'Arial',
    fontSize: '12px',
    fontWeight: 'Normal'
};

template = `<ejs-bulletchart 
    title='Main Title'
    subtitle='Sub Title'
    [titleStyle]='titleStyle'
    [subtitleStyle]='subtitleStyle'>
</ejs-bulletchart>`

---

Chart Dimensions

Control the size of the Bullet Chart:

Container-Based Sizing

The chart automatically sizes to fit its container:

<div style="width: 650px; height: 350px;">
    <ejs-bulletchart></ejs-bulletchart>
</div>

Explicit Pixel Sizing

Set specific dimensions:

<ejs-bulletchart 
    width='600px'
    height='300px'>
</ejs-bulletchart>

Responsive Percentage Sizing

Use percentages for responsive design:

<ejs-bulletchart 
    width='100%'
    height='50%'>
</ejs-bulletchart>

Default Dimensions

If no size is specified:

• Width: 100% of container
• Height: 126px

---

Complete Visual Elements Example

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } 
    from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    providers: [BulletTooltipService],
    template: `<div style="width: 800px; height: 400px;">
        <ejs-bulletchart 
            [dataSource]='chartData'
            valueField='value'
            targetField='target'
            categoryField='category'
            title='Department Performance Dashboard'
            subtitle='Actual vs Target'
            titlePosition='Top'
            type='Rect'
            valueFill='#007AFF'
            [valueHeight]='10'
            [valueBorder]='valueBorder'
            targetTypes='Circle'
            targetColor='#FF6B6B'
            [targetWidth]='5'
            [dataLabel]='dataLabelConfig'
            [tooltip]='tooltipConfig'
            width='100%'
            height='100%'>
        </ejs-bulletchart>
    </div>`
})
export class AppComponent implements OnInit {
    public chartData: any;
    public valueBorder: any;
    public dataLabelConfig: any;
    public tooltipConfig: any;

    ngOnInit(): void {
        this.chartData = [
            { category: 'Sales', value: 75, target: 80 },
            { category: 'Marketing', value: 65, target: 75 },
            { category: 'Operations', value: 85, target: 80 }
        ];

        this.valueBorder = { color: '#1A1A1A', width: 1 };

        this.dataLabelConfig = {
            enable: true,
            labelStyle: { color: '#333333', fontSize: '11px' }
        };

        this.tooltipConfig = {
            enable: true,
            template: '<div style="padding: 8px;">' +
                '<b>${category}</b><br/>' +
                'Actual: ${value}<br/>' +
                'Target: ${target}</div>',
            fill: '#ffffff',
            border: { color: '#999999', width: 1 }
        };
    }
}

Best Practices

1. Use clear, descriptive titles - Help users understand the visualization 2. Keep labels readable - Avoid overlapping or too-small text 3. Test tooltip templates - Ensure placeholders display correctly 4. Maintain consistent colors - Use meaningful color schemes 5. Optimize chart size - Balance visibility with screen space 6. Provide context - Use subtitles and labels for clarity 7. Test responsiveness - Ensure charts look good on all devices