Syncfusion React Bullet Chart

Implementing Syncfusion React Bullet Charts

A skill for implementing and customizing Syncfusion's React Bullet Chart component. Bullet charts are compact data visualization components designed to compare a primary measure (actual value) against a target measure within qualitative ranges.

When to Use This Skill

Use this skill when users need to:

• Display performance metrics or KPIs with target comparisons
• Create compact data visualizations showing actual vs. target values
• Visualize progress against goals with qualitative ranges (poor/good/excellent)
• Build dashboards with space-efficient performance indicators
• Show feature measures (actual bars) compared to comparative measures (target bars)
• Implement horizontal or vertical bullet charts
• Display multiple metrics in a compact layout
• Create accessible, keyboard-navigable chart visualizations

Component Overview

The Bullet Chart consists of:

• Value Bar (Feature Measure): The primary data/actual value being measured
• Comparative Bar (Target Marker): The target or comparison value
• Qualitative Ranges: Background bands indicating performance levels (e.g., poor, satisfactory, good)
• Quantitative Scale: The axis showing numerical measurements
• Title/Subtitle: Descriptive text for the chart

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

API Reference

📄 Read: references/api.md

• Summarizes BulletChartComponent props, methods, events and directives used across examples

Data Binding

📄 Read: references/data-binding.md

Value Bar Configuration

📄 Read: references/value-bar.md

• Value bar (Feature Measure) overview and purpose
• Mapping valueField from data source
• Types of actual bar shapes (Rect, Dot)
• Changing bar type with type property
• Border customization using valueBorder (color, width)
• Fill color customization using valueFill
• Height customization using valueHeight
• Binding colors dynamically from dataSource
• Complete examples for each customization option

Comparative Bar Configuration

📄 Read: references/comparative-bar.md

• Comparative bar (Target Measure) overview
• Mapping targetField from data source
• Types of target bar shapes (Circle, Cross, Rect)
• Changing target type with targetTypes property
• Customizing target appearance with targetColor
• Adjusting target width with targetWidth property
• Binding target colors from dataSource
• Complete examples for each target type

Ranges Configuration

📄 Read: references/ranges.md

• Ranges representing qualitative bands (Good, Bad, Satisfactory)
• Using BulletRangeCollectionDirective and BulletRangeDirective
• Setting range boundaries with end property
• Understanding minimum value as range starting point
• Configuring multiple ranges for different quality levels
• Color customization with color property
• Opacity adjustment with opacity property
• Complete examples with multiple colored ranges

Titles and Subtitles

📄 Read: references/titles.md

• Adding chart title with title property
• Adding subtitle for additional information
• Title positioning with titlePosition property (Left, Right, Top, Bottom)
• Default position (Top) behavior
• Title style customization with titleStyle (color, opacity, font properties)
• Subtitle style customization with subtitleStyle (color, opacity, font properties)
• Complete examples for each position
• Font customization examples (size, family, weight, style)

Tooltips

📄 Read: references/tooltips.md

• Default tooltip behavior (hidden by default)
• Enabling tooltips with tooltip.enable property
• Injecting BulletTooltip module into services
• Displaying actual and target values on hover
• Creating custom templates with template property
• Using ${target} and ${value} placeholders in templates
• Tooltip appearance customization (fill, border, textStyle)
• Font customization for tooltip text
• Complete examples for default and custom tooltips

Data Labels

📄 Read: references/data-labels.md

• Data labels for identifying actual bar values
• Enabling data labels with dataLabel.enable property
• Label display behavior and positioning
• Style customization with labelStyle property
• Font properties (size, family, weight, style)
• Color and opacity adjustments
• Complete examples with styled data labels

Axis Customization

📄 Read: references/axis-customization.md

• MajorTickLines customization (width, height, color, useRangeColor)
• MinorTickLines customization (width, height, color, useRangeColor)
• Tick placement with tickPosition (Inside, Outside)
• Label formatting with labelFormat (globalize formats: n1, n2, p1, c1, etc.)
• Format table showing common number, percentage, and currency formats
• Group separator for thousands with enableGroupSeparator
• Custom label format with ${value} placeholder
• Label placement with labelPosition (Inside, Outside)
• Opposed position with opposedPosition property
• Category labels with categoryField for X-axis
• Category label styling with categoryLabelStyle and labelStyle
• useRangeColor for labels matching range colors
• Complete examples for each axis feature

Chart Dimensions

📄 Read: references/dimensions.md

• Container size configuration with inline styles and CSS
• Setting chart dimensions with width and height properties
• Pixel sizing for fixed dimensions
• Percentage sizing for responsive behavior relative to container
• Default size behavior (126px height, window width)
• Complete examples for container and direct sizing

Customization Options

📄 Read: references/customization.md

• Orientation with orientation property (Horizontal, Vertical)
• Default Horizontal orientation
• Right-to-left (RTL) support with enableRtl property
• Animation configuration with animation property (duration, delay)
• Linear animation for actual and target bars
• Theme support with theme property
• Available Syncfusion themes
• Complete examples for each customization

Accessibility

📄 Read: references/accessibility.md

• Accessibility compliance (ADA, Section 508, WCAG 2.2)
• Accessibility features table with compatibility status
• WAI-ARIA attributes and patterns (img role, button role, aria-label, aria-pressed)
• Keyboard interaction support (Tab, Shift+Tab, Ctrl+P)
• Screen reader support
• Right-to-left (RTL) support for internationalization
• Color contrast compliance
• Mobile device support
• Testing with accessibility-checker and axe-core tools
• Sample accessibility demo reference

Quick Start Example

import { BulletChartComponent, BulletRangeCollectionDirective, BulletRangeDirective, BulletTooltip, Inject } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { value: 270, target: 250 }
  ];

  return (
    <BulletChartComponent
      id="bulletChart"
      dataSource={data}
      valueField="value"
      targetField="target"
      title="Revenue"
      minimum={0}
      maximum={300}
      interval={50}
      tooltip={{ enable: true }}
    >
      <BulletRangeCollectionDirective>
        <BulletRangeDirective end={150} color="red" />
        <BulletRangeDirective end={250} color="yellow" />
        <BulletRangeDirective end={300} color="green" />
      </BulletRangeCollectionDirective>
      <Inject services={[BulletTooltip]} />
    </BulletChartComponent>
  );
}

Common Patterns

Performance Dashboard with Multiple Metrics

Display multiple bullet charts vertically to show various KPIs:

const metrics = [
  { value: 270, target: 250, category: 'Revenue' },
  { value: 85, target: 100, category: 'Profit' },
  { value: 180, target: 150, category: 'Sales' }
];

// Map each metric to a separate BulletChartComponent with categoryField

Dynamic Color from Data

Bind colors directly from your data source:

const data = [
  { value: 270, target: 250, valueColor: '#5B5FC7', targetColor: '#646464' }
];

<BulletChartComponent
  dataSource={data}
  valueFill="valueColor"
  targetColor="targetColor"
/>

Custom Tooltip Template

Show formatted values with custom HTML:

<BulletChartComponent
  tooltip={{
    enable: true,
    template: '<div><b>Actual:</b> ${value}<br/><b>Target:</b> ${target}</div>'
  }}
/>

Responsive Layout

Use percentage-based sizing for responsive dashboards:

<BulletChartComponent
  width="100%"
  height="80px"
/>

Key Props

Common Use Cases

KPI Dashboard

Use bullet charts to display multiple performance indicators:

• Set different targets for each metric
• Use red/yellow/green ranges for performance levels
• Add category labels for metric names
• Enable tooltips for detailed information

Sales Performance Tracker

Compare actual sales against targets:

• Map revenue data to valueField
• Set quarterly/monthly targets in targetField
• Configure ranges for underperforming/meeting/exceeding targets
• Use data labels to show exact values

Progress Indicators

Show progress toward goals with visual context:

• Use percentage-based ranges (0-50%, 50-75%, 75-100%)
• Customize colors to match brand guidelines
• Add animations for engaging transitions
• Position titles on the left for compact layout

Comparative Analysis

Compare multiple items side-by-side:

• Use vertical orientation for space efficiency
• Set consistent scale across all charts
• Apply category labels for clear identification
• Customize target types (Circle, Cross) for distinction

Mobile Dashboards

Create responsive, touch-friendly visualizations:

• Use percentage-based dimensions
• Increase touch target sizes for bars
• Enable mobile-optimized tooltips
• Test with accessibility tools for screen readers

Edge Cases and Troubleshooting

Data not displaying:

• Verify valueField and targetField match data source property names
• Check that dataSource is an array with valid objects
• Ensure minimum/maximum encompass your data range

Ranges not visible:

• Import BulletRangeCollectionDirective and BulletRangeDirective from @syncfusion/ej2-react-charts
• Set end values in ascending order
• Verify end values are within minimum/maximum bounds

Tooltips not working:

• Inject BulletTooltip module: <Inject services={[BulletTooltip]} />
• Set tooltip.enable to true
• Check that tooltip object is properly configured

Title/subtitle overlapping:

• Adjust titlePosition to Left, Right, Top, or Bottom
• Increase chart dimensions (width/height)
• Customize titleStyle and subtitleStyle font sizes

Axis labels cut off:

• Increase chart width or height
• Adjust label format to shorter notation (e.g., 'n1' instead of full numbers)
• Use enableGroupSeparator for better readability

Implementation Checklist

• [ ] Install @syncfusion/ej2-react-charts package
• [ ] Import BulletChartComponent and directives
• [ ] Prepare data with value and target fields
• [ ] Configure dataSource, valueField, targetField
• [ ] Set minimum, maximum, and interval for scale
• [ ] Add ranges using BulletRangeCollectionDirective
• [ ] Configure title and subtitle if needed
• [ ] Enable and customize tooltip (inject BulletTooltip)
• [ ] Test with different data ranges
• [ ] Verify accessibility with keyboard navigation
• [ ] Test responsive behavior with different screen sizes

Accessibility in React Bullet Chart

Table of Contents

• Overview
• Accessibility Standards Compliance
• Accessibility Features
• WAI-ARIA Attributes
• Keyboard Interaction
• Accessibility Testing
• Best Practices
• Additional Resources

Overview

The Bullet Chart component follows accessibility guidelines and standards to ensure it can be used by people with disabilities. The component is designed to be accessible through screen readers, keyboard navigation, and meets various accessibility compliance requirements.

Accessibility Standards Compliance

The Bullet Chart component follows these accessibility standards:

• [ADA](https://www.ada.gov): Americans with Disabilities Act compliance
• [Section 508](https://www.section508.gov): U.S. federal accessibility standard
• [WCAG 2.2](https://www.w3.org/TR/WCAG22): Web Content Accessibility Guidelines 2.2
• [WCAG roles](https://www.w3.org/TR/wai-aria#roles): Proper ARIA role usage

Accessibility Compliance Table

Legend:

• ✓ Full Support: All features of the component meet the requirement
• ~ Partial Support: Some features do not meet the requirement
• ✗ Not Supported: The component does not meet the requirement

Accessibility Features

WCAG 2.2 Compliance

The Bullet Chart meets WCAG 2.2 Level AA standards, including:

• Perceivable content for all users
• Operable interface components
• Understandable information and UI
• Robust content that works with assistive technologies

Section 508 Compliance

Full compliance with U.S. federal Section 508 standards for electronic and information technology accessibility.

Screen Reader Support

The Bullet Chart provides full screen reader support, allowing users with visual impairments to understand the chart's data through:

• Descriptive ARIA labels
• Proper semantic structure
• Meaningful text alternatives

Example with screen reader support:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    title="Revenue Performance"       // Read by screen readers
    subtitle="Q1 2024"                // Additional context
    minimum={0}
    maximum={300}
/>

Right-to-Left (RTL) Support

Full support for RTL languages (Arabic, Hebrew, etc.) through the enableRtl property.

<BulletChartComponent
    enableRtl={true}
    title="الإيرادات"
    dataSource={data}
    valueField="value"
    targetField="target"
/>

Color Contrast

The component ensures sufficient color contrast ratios to meet WCAG requirements:

• Minimum 4.5:1 contrast ratio for normal text
• Minimum 3:1 contrast ratio for graphical objects
• High contrast theme available

Mobile Device Support

Fully responsive and touch-friendly for mobile devices:

• Touch-optimized interactions
• Responsive sizing
• Mobile-friendly tooltips

Keyboard Navigation Support

Complete keyboard navigation support for users who cannot use a mouse (see Keyboard Interaction section below).

WAI-ARIA Attributes

The Bullet Chart component follows WAI-ARIA patterns and uses appropriate ARIA attributes.

ARIA Roles

img (role) The chart uses the img role to indicate it's a graphical representation:

<div role="img" aria-label="Revenue Performance Bullet Chart">
  <!-- Chart content -->
</div>

button (role) Interactive elements use the button role for proper accessibility:

<button role="button" aria-label="Print Chart">Print</button>

ARIA Attributes

aria-label (attribute) Provides accessible names for elements:

<BulletChartComponent
    id="bulletChart"
    title="Revenue Performance"    // Used as aria-label
    dataSource={data}
    valueField="value"
    targetField="target"
/>

aria-pressed (attribute) Indicates the pressed state of toggle buttons in the chart's UI.

Implementing ARIA Labels

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Quarterly Revenue Performance"  // Primary label
                subtitle="Q1 2024 - Target $250K"      // Additional context
                minimum={0}
                maximum={300}
            />
        </div>
    );
}

Keyboard Interaction

The Bullet Chart follows keyboard interaction guidelines, making it accessible for users who rely on keyboard navigation.

Supported Keyboard Shortcuts

Keyboard Navigation Example

import { BulletChartComponent, BulletTooltip, Inject } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Revenue Performance"
                tooltip={{ enable: true }}    // Accessible via keyboard
                minimum={0}
                maximum={300}
            >
                <Inject services={[BulletTooltip]} />
            </BulletChartComponent>
        </div>
    );
}

Users can: 1. Tab to focus on the chart 2. Tab to cycle through interactive elements 3. Ctrl + P to print the chart 4. Shift + Tab to navigate backwards

Accessibility Testing

The Bullet Chart's accessibility is validated using industry-standard testing tools.

Accessibility Checker

The component is tested with the accessibility-checker npm package during automated testing.

Install and use:

npm install accessibility-checker --save-dev

Axe-core Testing

The component is validated with axe-core, a leading accessibility testing engine.

Install and use:

npm install axe-core --save-dev

Sample Accessibility Demo

Syncfusion provides an accessibility sample to evaluate the Bullet Chart with accessibility tools:

Open Accessibility Sample

This sample allows you to:

• Test with screen readers
• Verify keyboard navigation
• Check color contrast
• Validate ARIA attributes

Best Practices

Color and Contrast

Do:

• Use sufficient color contrast (4.5:1 minimum for text, 3:1 for graphics)
• Provide alternative indicators beyond color (patterns, labels)
• Test with color blindness simulators
• Use the HighContrast theme for accessibility-focused applications

<BulletChartComponent
    theme="HighContrast"           // High contrast for accessibility
    dataLabel={{ enable: true }}   // Labels provide non-color info
    dataSource={data}
    valueField="value"
    targetField="target"
/>

Don't:

• Rely solely on color to convey information
• Use low-contrast color combinations
• Assume all users can distinguish colors

Screen Reader Optimization

Do:

• Provide descriptive titles and subtitles
• Use meaningful data labels
• Keep chart descriptions concise but informative

<BulletChartComponent
    title="Revenue vs Target - Q1 2024"    // Descriptive
    subtitle="Actual: $270K, Target: $250K, Status: Exceeded"
    dataSource={data}
    valueField="value"
    targetField="target"
/>

Don't:

• Use vague titles like "Chart 1"
• Omit context in titles
• Use abbreviations without explanation

Keyboard Accessibility

Do:

• Ensure all interactive features are keyboard-accessible
• Maintain logical tab order
• Provide keyboard shortcuts documentation

Don't:

• Create keyboard traps (where users can't tab out)
• Require mouse-only interactions
• Override default keyboard behavior without alternatives

Responsive Design

Do:

• Test on multiple device sizes
• Ensure touch targets are at least 44×44 pixels
• Make charts responsive with percentage widths

<BulletChartComponent
    width="100%"                   // Responsive width
    height="120px"                 // Sufficient height for touch
    dataSource={data}
    valueField="value"
    targetField="target"
/>

Don't:

• Use fixed small sizes that don't scale
• Create touch targets smaller than 44×44 pixels
• Assume all users have large screens

Alternative Content

Do:

• Provide data tables as alternatives
• Offer downloadable data
• Include text summaries of key insights

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Revenue Performance"
            />
            
            {/* Alternative text description */}
            <div className="sr-only">
                Revenue Performance: Actual value $270K exceeded 
                target of $250K by $20K (8% above target).
            </div>
        </div>
    );
}

Don't:

• Rely solely on visual representation
• Hide critical information in graphics only
• Forget alternative text for complex charts

Additional Resources

Syncfusion Accessibility Guide

For comprehensive information about accessibility across all Syncfusion React components:

• Accessibility in Syncfusion React components

External Resources

• WCAG Guidelines: www.w3.org/WAI/WCAG22/quickref/
• ARIA Authoring Practices: www.w3.org/WAI/ARIA/apg/
• Section 508: www.section508.gov
• WebAIM: webaim.org

Testing Tools

• NVDA Screen Reader: www.nvaccess.org
• JAWS Screen Reader: www.freedomscientific.com/products/software/jaws/
• Axe DevTools: Browser extension for accessibility testing
• WAVE: wave.webaim.org

Implementation Checklist

• [ ] Use descriptive titles and subtitles
• [ ] Enable data labels for non-visual value representation
• [ ] Ensure sufficient color contrast (4.5:1 minimum)
• [ ] Test with screen readers (NVDA, JAWS)
• [ ] Verify keyboard navigation (Tab, Shift+Tab, Ctrl+P)
• [ ] Test with accessibility-checker or axe-core
• [ ] Provide alternative text descriptions
• [ ] Use HighContrast theme for accessibility-focused apps
• [ ] Test on mobile devices with touch interactions
• [ ] Validate ARIA attributes are present
• [ ] Ensure responsive sizing for all devices
• [ ] Don't rely solely on color to convey information
• [ ] Provide data table alternatives when appropriate
• [ ] Test with color blindness simulators
• [ ] Document keyboard shortcuts for users

Bullet Chart API Reference (React)

This file summarizes the primary API surface for BulletChartComponent from @syncfusion/ej2-react-charts used throughout the skill references.

Import

import {
  BulletChartComponent,
  BulletRangeCollectionDirective,
  BulletRangeDirective,
  Inject,
  BulletTooltip,
  BulletChartLegend
} from '@syncfusion/ej2-react-charts';

Key Props (selected)

dataSource: any[] — Data array for the chart

• valueField: string — Field name for the actual/feature measure
• targetField: string — Field name for the comparative/target measure
• valueFill: string | string[] — Fill color (or data field name) for the value bar
• valueHeight: number — Height/thickness of the value bar in pixels
• valueBorder: { color?: string; width?: number } — Border for the value bar — see BorderModel: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bordermodel
• type: 'Rect' | 'Dot' — Shape of the value bar — see FeatureType enum: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/index-default
• targetTypes: Array<'Rect'|'Circle'|'Cross'> — Marker shapes for target — see TargetType enum: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/index-default
• targetColor: string — Color for the target marker
• targetWidth: number — Width for the target marker
• ranges: RangeModel[] — Array of range definitions (use BulletRangeDirective) — see RangeModel: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/rangemodel
• minimum: number — Minimum value for the quantitative scale
• maximum: number — Maximum value for the quantitative scale
• interval: number — Axis interval
• tooltip: BulletTooltipSettingsModel — Tooltip configuration (enable, template, etc.) — see BulletTooltipSettingsModel: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bullettooltipsettingsmodel
• dataLabel: BulletDataLabelModel — Data label configuration — see BulletDataLabelModel: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bulletdatalabelmodel
• legendSettings: BulletChartLegendSettingsModel — Legend settings — see: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bulletchartlegendsettingsmodel
• majorTickLines: MajorTickLinesSettingsModel — Major tick styling — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/majorticklinessettingsmodel
• minorTickLines: MinorTickLinesSettingsModel — Minor tick styling — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/minorticklinessettingsmodel
• categoryLabelStyle: BulletLabelStyleModel — Category label style — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bulletlabelstylemodel
• labelStyle: BulletLabelStyleModel — Axis label style — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bulletlabelstylemodel
• margin: MarginModel — Chart margins — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/marginmodel
• animation: AnimationModel — Animation options — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/animationmodel
• enableRtl: boolean — Right-to-left layout
• orientation: 'Horizontal' | 'Vertical' — Chart orientation — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/index-default
• theme: string — Syncfusion theme name — https://ej2.syncfusion.com/react/documentation/api/bullet-chart/charttheme

Methods

The component methods are documented on the Bullet Chart API page: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/

• createSvg(): void — (Internal) create the SVG tree; can be invoked after render — see component API
• destroy(): void — Clean up the component and event handlers — see component API
• export(type: ExportType, fileName: string, orientation?: any, controls?: any[], width?: number, height?: number, isVertical?: boolean): void — Export to image/PDF — see component API
• print(id?: string | string[] | Element): void — Print the chart — see component API

Events (selected)

The events and their argument interfaces are documented on the Bullet Chart API pages:

• beforePrint(args: IPrintEventArgs) — Triggers before printing starts. See Print events in component API: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/
• bulletChartMouseClick(args: IBulletMouseEventArgs) — Triggers on chart element click — args: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/ibulletmouseeventargs
• legendRender(args: IBulletLegendRenderEventArgs) — Triggers before the legend is rendered — args: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/ibulletlegendrendereventargs
• load(args: IBulletLoadedEventArgs) — Triggers before Bullet Chart loads — args: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/ibulletloadedeventargs
• loaded(args: IBulletLoadedEventArgs) — Triggers after Bullet Chart rendering — args: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/ibulletloadedeventargs
• tooltipRender(args: IBulletchartTooltipEventArgs) — Triggers before the tooltip is shown — args: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/ibulletcharttooltipeventargs

Directives

BulletRangeCollectionDirective — Parent directive for ranges (use with BulletRangeDirective)

BulletRangeDirective — Child directive that defines end, color, opacity for a range — see RangeModel: https://ej2.syncfusion.com/react/documentation/api/bullet-chart/rangemodel

Quick usage snippet

<BulletChartComponent
  id="bullet-chart"
  dataSource={data}
  valueField="value"
  targetField="target"
  valueFill="color"
  valueHeight={16}
  valueBorder={{ color: '#222', width: 1 }}
  type="Rect"
  tooltip={{ enable: true }}
  load={handleLoad}
  loaded={handleLoaded}
  tooltipRender={handleTooltipRender}
>
  <Inject services={[BulletTooltip, BulletChartLegend]} />
  <BulletRangeCollectionDirective>
    <BulletRangeDirective end={150} color="#f44336" />
    <BulletRangeDirective end={250} color="#ffb300" />
    <BulletRangeDirective end={300} color="#4caf50" />
  </BulletRangeCollectionDirective>
</BulletChartComponent>

For detailed types and the complete API surface consult the official Syncfusion docs: https://ej2.syncfusion.com/react/documentation/bullet-chart/getting-started

Axis Customization in React Bullet Chart

Table of Contents

• Overview
• Tick Lines Customization
• Major Tick Lines
• Minor Tick Lines
• Using Range Colors
• Tick Placement
• Label Formatting
• Standard Formats
• Format Table
• Group Separator
• Custom Label Format
• Label Placement
• Opposed Position
• Category Labels
• Category Label Customization
• Complete Examples
• Best Practices
• Troubleshooting

Overview

The Bullet Chart axis provides various customization options including tick marks, labels, formatting, and positioning. These customizations help tailor the chart to match your specific design and data requirements.

Tick Lines Customization

Tick lines are the small marks on the axis that indicate scale divisions. The Bullet Chart supports both major and minor tick lines.

Major Tick Lines

Major tick lines appear at the main axis intervals. Customize them using the majorTickLines property.

Available Properties:

• width: Tick line thickness
• height: Tick line length
• color: Tick line color
• useRangeColor: Use colors from ranges

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            minimum={0}
            maximum={300}
            interval={50}
            majorTickLines={{
                width: 2,              // Line thickness
                height: 15,            // Line length
                color: "#424242"       // Dark gray
            }}
        />
    );
}

Minor Tick Lines

Minor tick lines appear between major tick marks. Customize them using the minorTickLines property.

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={300}
    interval={50}
    minorTicksPerInterval={4}    // Number of minor ticks between major ticks
    minorTickLines={{
        width: 1,                  // Thinner than major
        height: 8,                 // Shorter than major
        color: "#757575"           // Lighter gray
    }}
/>

Using Range Colors

Set useRangeColor to true to make tick lines inherit colors from the corresponding range.

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            minimum={0}
            maximum={300}
            interval={50}
            majorTickLines={{
                width: 2,
                height: 15,
                useRangeColor: true    // Ticks match range colors
            }}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="red" />
                <BulletRangeDirective end={250} color="yellow" />
                <BulletRangeDirective end={300} color="green" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

Tick Placement

The tickPosition property controls whether ticks appear inside or outside the ranges.

Outside Placement (Default)

<BulletChartComponent
    tickPosition="Outside"      // Ticks outside the chart
    minimum={0}
    maximum={300}
/>

Inside Placement

<BulletChartComponent
    tickPosition="Inside"       // Ticks inside the chart
    minimum={0}
    maximum={300}
/>

Label Formatting

Use the labelFormat property to format axis labels with various number formats.

Standard Formats

// Number format with 1 decimal place
<BulletChartComponent
    labelFormat="n1"           // 1000.0
    minimum={0}
    maximum={3000}
/>

// Percentage format with 1 decimal place
<BulletChartComponent
    labelFormat="p1"           // 1.0%
    minimum={0}
    maximum={1}
/>

// Currency format with 2 decimal places
<BulletChartComponent
    labelFormat="c2"           // $1000.00
    minimum={0}
    maximum={5000}
/>

Format Table

Complete Format Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 1270, target: 1250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue"
            labelFormat="c2"           // Currency format: $1000.00
            minimum={0}
            maximum={2000}
            interval={500}
        />
    );
}

Group Separator

Enable enableGroupSeparator to add thousand separators to axis labels.

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    enableGroupSeparator={true}    // 1,000 instead of 1000
    minimum={0}
    maximum={100000}
    interval={20000}
/>

Example Output:

• Without separator: 20000, 40000, 60000
• With separator: 20,000, 40,000, 60,000

Custom Label Format

Use the ${value} placeholder to create custom label formats.

Basic Custom Format

// Append 'K' for thousands
<BulletChartComponent
    labelFormat="${value}K"    // 100K, 200K, 300K
    minimum={0}
    maximum={300}
/>

Currency with Custom Suffix

// Custom currency format
<BulletChartComponent
    labelFormat="$${value}K"   // $100K, $200K, $300K
    minimum={0}
    maximum={300}
/>

Complete Custom Format Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Sales (in thousands)"
            labelFormat="${value}K"    // 50K, 100K, 150K, etc.
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

Label Placement

The labelPosition property controls whether labels appear inside or outside the ranges.

Outside Placement (Default)

<BulletChartComponent
    labelPosition="Outside"    // Labels outside ranges
    minimum={0}
    maximum={300}
/>

Inside Placement

<BulletChartComponent
    labelPosition="Inside"     // Labels inside ranges
    minimum={0}
    maximum={300}
/>

Opposed Position

Set opposedPosition to true to place the axis on the opposite side.

Standard Position

<BulletChartComponent
    opposedPosition={false}    // Default position
    minimum={0}
    maximum={300}
/>

Opposed Position

<BulletChartComponent
    opposedPosition={true}     // Opposite side
    minimum={0}
    maximum={300}
/>

Use Cases:

• Mirrored chart layouts
• Comparing two related metrics side-by-side
• Alternative dashboard designs

Category Labels

Use the categoryField property to display X-axis labels from your data.

Basic Category Labels

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250, category: "Product A" },
        { value: 180, target: 200, category: "Product B" },
        { value: 220, target: 210, category: "Product C" }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            categoryField="category"    // Display category from data
            minimum={0}
            maximum={300}
        />
    );
}

The chart will display "Product A", "Product B", "Product C" as category labels.

Category Label Customization

Customize category and axis labels using categoryLabelStyle and labelStyle.

Category Label Style

<BulletChartComponent
    categoryField="category"
    categoryLabelStyle={{
        color: "#2C3E50",
        size: "14px",
        fontFamily: "Arial, sans-serif",
        fontWeight: "600"
    }}
    minimum={0}
    maximum={300}
/>

Axis Label Style

<BulletChartComponent
    labelStyle={{
        color: "#757575",
        size: "12px",
        fontFamily: "Arial, sans-serif",
        fontWeight: "normal"
    }}
    minimum={0}
    maximum={300}
/>

Using Range Colors for Labels

<BulletChartComponent
    categoryLabelStyle={{
        useRangeColor: true,      // Category labels match range colors
        size: "14px",
        fontWeight: "600"
    }}
    labelStyle={{
        useRangeColor: true,      // Axis labels match range colors
        size: "12px"
    }}
/>

Complete Label Customization Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250, category: "Q1 Revenue" }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            categoryField="category"
            
            // Category label styling
            categoryLabelStyle={{
                color: "#2C3E50",
                size: "14px",
                fontFamily: "Segoe UI, Arial, sans-serif",
                fontWeight: "600"
            }}
            
            // Axis label styling
            labelStyle={{
                color: "#757575",
                size: "11px",
                fontFamily: "Segoe UI, Arial, sans-serif",
                fontWeight: "normal"
            }}
            
            minimum={0}
            maximum={300}
            interval={50}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="red" />
                <BulletRangeDirective end={250} color="yellow" />
                <BulletRangeDirective end={300} color="green" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

Complete Examples

Fully Customized Axis

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 27000, target: 25000 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Annual Revenue"
            
            // Axis configuration
            minimum={0}
            maximum={40000}
            interval={10000}
            labelFormat="${value}"
            enableGroupSeparator={true}
            
            // Tick customization
            majorTickLines={{
                width: 2,
                height: 12,
                color: "#424242"
            }}
            minorTicksPerInterval={4}
            minorTickLines={{
                width: 1,
                height: 6,
                color: "#757575"
            }}
            tickPosition="Outside"
            
            // Label customization
            labelPosition="Outside"
            labelStyle={{
                color: "#424242",
                size: "11px",
                fontFamily: "Arial, sans-serif"
            }}
            
            width="90%"
            height="120px"
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={15000} color="#E74C3C" opacity={0.3} />
                <BulletRangeDirective end={30000} color="#F39C12" opacity={0.3} />
                <BulletRangeDirective end={40000} color="#27AE60" opacity={0.3} />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

Best Practices

Tick Lines

• Major ticks: 1.5-2px width, 10-15px height
• Minor ticks: 1px width, 6-8px height (50-60% of major tick height)
• Use useRangeColor for visually integrated designs
• Place ticks outside for clarity, inside for compact layouts

Label Formatting

• Choose format based on data type: n for numbers, p for percentages, c for currency
• Use custom formats with ${value} for branded metrics
• Enable group separators for large numbers (>10,000)
• Keep decimal places minimal (0-2) for readability

Label Styling

• Use readable font sizes: 10-12px for axis labels
• Keep sufficient contrast with background
• Use consistent fonts across all charts
• Category labels should be slightly larger/bolder than axis labels

Positioning

• Default (outside, non-opposed) works for most cases
• Use opposed position for comparative layouts only
• Inside placement saves space but may reduce readability

Troubleshooting

Issue: Tick lines not visible

• Increase tick width (2-3px minimum)
• Increase tick height (10-15px for major)
• Ensure tick color contrasts with background
• Check that tick properties are correctly nested

Issue: Labels overlapping

• Increase interval value
• Reduce label font size
• Use shorter label format (n0 instead of n2)
• Increase chart width
• Enable group separator for better spacing

Issue: Label format not applying

• Verify format string is correct (n1, p2, c1, etc.)
• Check for typos in labelFormat property
• Ensure format matches data type (don't use p1 for large numbers)
• Use ${value} for custom formats

Issue: Custom format not showing

• Ensure ${value} placeholder is used
• Check for proper escaping in template strings
• Verify labelFormat is a string, not an object
• Test with simple format first: "${value}"

Issue: Group separator not working

• Verify enableGroupSeparator is set to true (boolean, not string)
• Check that numbers are large enough to have separators (>999)
• Ensure labelFormat doesn't override separator

Issue: Category labels not displaying

• Verify categoryField property matches data property name exactly
• Check that data objects contain the category property
• Ensure chart has sufficient height for labels
• Verify categoryLabelStyle isn't hiding labels (check opacity, color)

Issue: useRangeColor not working

• Ensure ranges are defined with BulletRangeCollectionDirective
• Verify useRangeColor is true (boolean)
• Check that ranges have valid color values
• Tick/label positions must overlap with ranges to inherit colors

Comparative Bar in React Bullet Chart

The comparative bar (also called target bar or target marker) is a line marker that runs perpendicular to the orientation of the chart. It serves as a target or comparison point against the feature measure value.

Table of contents

• Overview
• Displaying the Target Bar
• Types of Target Bar
• Target Bar Customization
• Dynamic Color from Data Source
• Complete Example with Value and Target Customization
• Common Patterns
• Best Practices
• Troubleshooting

Overview

The comparative bar represents the Comparative Measure - a target, goal, or benchmark value to compare against the actual value. It appears as a perpendicular marker on the chart.

Displaying the Target Bar

To display the target bar, map the targetField property to the appropriate field from your data source.

Basic Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"    // Maps to the 'target' property
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

The chart will display a perpendicular marker at position 250, representing the target value.

Types of Target Bar

The shape of the target bar can be customized using the targetTypes property. The Bullet Chart supports three shapes:

Available Types

• `Rect` (Default): Rectangular/bar marker
• `Circle`: Circular marker
• `Cross`: Cross/X-shaped marker

Rect Type (Default)

The default rectangular marker provides a clear line:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetTypes={["Rect"]}      // Rectangular marker (default)
    minimum={0}
    maximum={300}
/>

Circle Type

Display the target as a circular marker:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetTypes={["Circle"]}    // Circular marker
    minimum={0}
    maximum={300}
/>

When to use Circle:

• To create visual distinction from rectangular value bars
• For modern, rounded design aesthetics
• When emphasizing the target point precisely

Cross Type

Display the target as a cross marker:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetTypes={["Cross"]}     // Cross-shaped marker
    minimum={0}
    maximum={300}
/>

When to use Cross:

• To indicate critical target points
• For technical or engineering visualizations
• When comparing multiple targets with different markers

Complete Type Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div>
            <h3>Rect Target</h3>
            <BulletChartComponent
                id="chart1"
                dataSource={data}
                valueField="value"
                targetField="target"
                targetTypes={["Rect"]}
                title="Rectangular Target"
                minimum={0}
                maximum={300}
            />

            <h3>Circle Target</h3>
            <BulletChartComponent
                id="chart2"
                dataSource={data}
                valueField="value"
                targetField="target"
                targetTypes={["Circle"]}
                title="Circular Target"
                minimum={0}
                maximum={300}
            />

            <h3>Cross Target</h3>
            <BulletChartComponent
                id="chart3"
                dataSource={data}
                valueField="value"
                targetField="target"
                targetTypes={["Cross"]}
                title="Cross Target"
                minimum={0}
                maximum={300}
            />
        </div>
    );
}

Target Bar Customization

Target Color

Customize the fill color of the target bar using the targetColor property.

Static Target Color

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetColor="#646464"       // Dark gray target
    minimum={0}
    maximum={300}
/>

Complete Color Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Sales vs Target"
            targetColor="#E74C3C"      // Red target marker
            targetTypes={["Rect"]}
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

Target Width

Control the width (or thickness) of the target bar using the targetWidth property.

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetWidth={5}              // Width in pixels
    minimum={0}
    maximum={300}
/>

Width Guidelines:

• 3-5px: Standard visibility
• 6-8px: Emphasized targets
• 10+px: Prominent critical targets

Combined Customization

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Quarterly Performance"
            
            // Target customization
            targetTypes={["Circle"]}
            targetColor="#2196F3"       // Blue target
            targetWidth={8}             // Thicker marker
            
            minimum={0}
            maximum={300}
            interval={50}
            width="80%"
            height="100px"
        />
    );
}

Dynamic Color from Data Source

Bind the target color directly from your data source for dynamic styling.

Data Structure with Target Color

const data = [
    { 
        value: 270, 
        target: 250,
        targetColor: "#646464"    // Target color in data
    }
];

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    targetColor="targetColor"     // Binds to the 'targetColor' property
    minimum={0}
    maximum={300}
/>

Multiple Charts with Different Target Colors

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const metrics = [
        { 
            value: 270, 
            target: 250, 
            targetColor: "#4CAF50",   // Green (target met)
            name: "Revenue" 
        },
        { 
            value: 180, 
            target: 250, 
            targetColor: "#F44336",   // Red (target missed)
            name: "Profit" 
        }
    ];

    return (
        <div>
            {metrics.map((metric, index) => (
                <div key={index} style={{ marginBottom: '20px' }}>
                    <BulletChartComponent
                        id={`chart-${index}`}
                        dataSource={[metric]}
                        valueField="value"
                        targetField="target"
                        targetColor="targetColor"
                        title={metric.name}
                        minimum={0}
                        maximum={300}
                    />
                </div>
            ))}
        </div>
    );
}

Complete Example with Value and Target Customization

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { 
            value: 270, 
            target: 250,
            valueColor: "#5B5FC7",
            targetColor: "#424242"
        }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Q1 Performance"
            subtitle="Revenue in thousands"
            
            // Value bar customization
            valueFill="valueColor"
            valueHeight={18}
            
            // Target bar customization
            targetTypes={["Circle"]}
            targetColor="targetColor"
            targetWidth={7}
            
            minimum={0}
            maximum={300}
            interval={50}
            width="90%"
            height="120px"
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="#FFE5E5" />
                <BulletRangeDirective end={250} color="#FFF4E5" />
                <BulletRangeDirective end={300} color="#E5F5E5" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

export default App;

Common Patterns

Conditional Target Styling

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    // Style target based on whether it was met
    const targetColor = data[0].value >= data[0].target 
        ? "#4CAF50"   // Green if target met
        : "#F44336";  // Red if target missed

    return (
        <BulletChartComponent
            dataSource={data}
            valueField="value"
            targetField="target"
            targetColor={targetColor}
            targetWidth={6}
            minimum={0}
            maximum={300}
        />
    );
}

Multiple Target Types for Comparison

// Create multiple charts with different target markers for visual distinction
const goals = [
    { value: 270, target: 250, type: ["Rect"], label: "Primary Goal" },
    { value: 270, target: 280, type: ["Circle"], label: "Stretch Goal" },
    { value: 270, target: 220, type: ["Cross"], label: "Minimum Goal" }
];

<div>
    {goals.map((goal, index) => (
        <BulletChartComponent
            key={index}
            dataSource={[goal]}
            valueField="value"
            targetField="target"
            targetTypes={goal.type}
            title={goal.label}
            minimum={0}
            maximum={300}
        />
    ))}
</div>

Emphasized Target Marker

<BulletChartComponent
    dataSource={data}
    valueField="value"
    targetField="target"
    targetTypes={["Circle"]}
    targetColor="#FF5722"        // Bright orange
    targetWidth={10}             // Large marker
    minimum={0}
    maximum={300}
/>

Best Practices

Choosing Target Type

• Rect: Traditional, clear for horizontal/vertical comparisons
• Circle: Modern look, good for point values
• Cross: Technical feel, useful for critical thresholds

Color Selection

• Use contrasting colors that stand out from value bar and ranges
• Neutral colors (gray, black) work well for standard targets
• Red/orange for critical or missed targets
• Green for achieved or exceeded targets

Target Width

• 3-5px: Standard charts, multiple metrics
• 6-8px: Single prominent metric
• 10+px: Dashboard headers, key performance indicators

Visibility

• Ensure target marker is clearly visible against ranges
• Use sufficient width for small chart sizes
• Test visibility on different backgrounds and themes

Troubleshooting

Issue: Target bar not visible

• Verify targetField matches a property in your data
• Check that target value is within minimum and maximum range
• Increase targetWidth for better visibility
• Ensure targetColor contrasts with background and ranges

Issue: Target appears in wrong position

• Verify target value in data is correct
• Check that minimum and maximum provide appropriate scale
• Ensure targetField property name matches data exactly

Issue: Target type not changing

• Ensure targetTypes is an array: ["Circle"] not "Circle"
• Check import includes necessary chart modules
• Verify property name is targetTypes (plural) not targetType

Issue: Color not applying

• When binding from data, ensure property name matches exactly
• Check that color values are valid CSS colors
• Verify the data property exists in data objects

Issue: Target too thick/thin

• Adjust targetWidth property (recommended: 3-10px)
• For Circle/Cross types, width affects the marker size
• Test different widths based on chart dimensions

Customization Options in React Bullet Chart

Table of Contents

• Overview
• Orientation
• Horizontal Orientation
• Vertical Orientation
• Right-to-Left (RTL) Support
• Animation
• Theme Support
• Complete Examples
• Best Practices
• Troubleshooting

Overview

The Bullet Chart provides several customization options to adapt its appearance and behavior to match your application's requirements, including orientation, RTL support, animations, and theming.

Orientation

The Bullet Chart can be rendered in either horizontal or vertical orientation using the orientation property.

Horizontal Orientation (Default)

By default, the Bullet Chart renders in horizontal orientation, with the value bar extending left to right.

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue"
            orientation="Horizontal"    // Default
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

When to use Horizontal:

• Standard dashboard layouts
• Reading left-to-right progression
• When width is more available than height
• Most common use case

Vertical Orientation

Set orientation to "Vertical" to render the chart vertically, with the value bar extending bottom to top.

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    title="Revenue"
    orientation="Vertical"      // Vertical rendering
    minimum={0}
    maximum={300}
    interval={50}
/>

When to use Vertical:

• Limited horizontal space
• Aligning with vertical data flow
• Creating columnar dashboard layouts
• Emphasizing vertical growth

Complete Orientation Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ display: 'flex', gap: '40px' }}>
            {/* Horizontal */}
            <div>
                <h3>Horizontal</h3>
                <BulletChartComponent
                    id="horizontal"
                    dataSource={data}
                    valueField="value"
                    targetField="target"
                    title="Revenue"
                    orientation="Horizontal"
                    minimum={0}
                    maximum={300}
                    width="400px"
                    height="100px"
                >
                    <BulletRangeCollectionDirective>
                        <BulletRangeDirective end={150} color="red" />
                        <BulletRangeDirective end={250} color="yellow" />
                        <BulletRangeDirective end={300} color="green" />
                    </BulletRangeCollectionDirective>
                </BulletChartComponent>
            </div>

            {/* Vertical */}
            <div>
                <h3>Vertical</h3>
                <BulletChartComponent
                    id="vertical"
                    dataSource={data}
                    valueField="value"
                    targetField="target"
                    title="Revenue"
                    orientation="Vertical"
                    minimum={0}
                    maximum={300}
                    width="100px"
                    height="400px"
                >
                    <BulletRangeCollectionDirective>
                        <BulletRangeDirective end={150} color="red" />
                        <BulletRangeDirective end={250} color="yellow" />
                        <BulletRangeDirective end={300} color="green" />
                    </BulletRangeCollectionDirective>
                </BulletChartComponent>
            </div>
        </div>
    );
}

Right-to-Left (RTL) Support

Enable right-to-left rendering for RTL languages (Arabic, Hebrew, etc.) using the enableRtl property.

Enable RTL

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    title="الإيرادات"           // Arabic title
    enableRtl={true}            // Enable RTL
    minimum={0}
    maximum={300}
/>

Complete RTL Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div dir="rtl">
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="أداء الإيرادات"
                enableRtl={true}
                minimum={0}
                maximum={300}
                interval={50}
                width="600px"
                height="100px"
            />
        </div>
    );
}

When to use RTL:

• Applications supporting RTL languages
• Middle Eastern markets
• Mirrored layouts for design purposes
• Internationalization (i18n) requirements

Animation

Configure animations for the actual bar and target bar using the animation property. You can control the duration and delay of animations.

Basic Animation

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    animation={{
        enable: true,
        duration: 1000,         // Animation duration in milliseconds
        delay: 0                // Delay before animation starts
    }}
    minimum={0}
    maximum={300}
/>

Custom Duration and Delay

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    animation={{
        enable: true,
        duration: 1500,         // 1.5 seconds
        delay: 500              // Start after 0.5 seconds
    }}
    minimum={0}
    maximum={300}
/>

Disable Animation

<BulletChartComponent
    animation={{
        enable: false           // No animation
    }}
/>

Complete Animation Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Animated Chart"
            
            // Animation configuration
            animation={{
                enable: true,
                duration: 1200,     // Smooth 1.2s animation
                delay: 0
            }}
            
            minimum={0}
            maximum={300}
            interval={50}
            width="600px"
            height="100px"
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="#E74C3C" />
                <BulletRangeDirective end={250} color="#F39C12" />
                <BulletRangeDirective end={300} color="#27AE60" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

Animation Properties:

• enable: Boolean to turn animation on/off
• duration: Length of animation in milliseconds (500-2000 typical)
• delay: Wait time before animation starts in milliseconds

Theme Support

Apply Syncfusion themes to match your application's design using the theme property.

Available Themes

• Material: Google's Material Design
• Bootstrap: Bootstrap styling
• Fabric: Microsoft Fabric UI
• Tailwind: Tailwind CSS styling
• Bootstrap4: Bootstrap 4 theme
• Material3: Material Design 3
• Fluent: Microsoft Fluent Design
• HighContrast: High contrast for accessibility

Apply Theme

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    theme="Material"            // Material Design theme
    minimum={0}
    maximum={300}
/>

Theme Examples

// Material theme
<BulletChartComponent
    theme="Material"
    dataSource={data}
    valueField="value"
    targetField="target"
/>

// Bootstrap theme
<BulletChartComponent
    theme="Bootstrap"
    dataSource={data}
    valueField="value"
    targetField="target"
/>

// High contrast theme for accessibility
<BulletChartComponent
    theme="HighContrast"
    dataSource={data}
    valueField="value"
    targetField="target"
/>

Complete Theme Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue Performance"
            theme="Bootstrap"           // Bootstrap theme
            minimum={0}
            maximum={300}
            interval={50}
            width="600px"
            height="100px"
        />
    );
}

Note: Ensure you've imported the corresponding theme CSS file in your application for the theme to apply correctly.

Complete Examples

Vertical RTL Chart with Animation

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div dir="rtl">
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="المبيعات"
                
                // Customization
                orientation="Vertical"
                enableRtl={true}
                theme="Material"
                animation={{
                    enable: true,
                    duration: 1000,
                    delay: 200
                }}
                
                minimum={0}
                maximum={300}
                interval={50}
                width="120px"
                height="400px"
            >
                <BulletRangeCollectionDirective>
                    <BulletRangeDirective end={150} color="red" opacity={0.4} />
                    <BulletRangeDirective end={250} color="yellow" opacity={0.4} />
                    <BulletRangeDirective end={300} color="green" opacity={0.4} />
                </BulletRangeCollectionDirective>
            </BulletChartComponent>
        </div>
    );
}

Fully Customized Dashboard Chart

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective,
    BulletTooltip,
    Inject
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Q1 Revenue Performance"
            subtitle="In Thousands USD"
            
            // Layout
            orientation="Horizontal"
            width="100%"
            height="120px"
            
            // Customization
            theme="Bootstrap4"
            enableRtl={false}
            animation={{
                enable: true,
                duration: 800,
                delay: 0
            }}
            
            // Styling
            valueFill="#5B5FC7"
            valueHeight={18}
            targetColor="#424242"
            targetWidth={5}
            
            // Axis
            minimum={0}
            maximum={300}
            interval={50}
            
            // Tooltip
            tooltip={{ enable: true }}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="#E74C3C" opacity={0.3} />
                <BulletRangeDirective end={250} color="#F39C12" opacity={0.3} />
                <BulletRangeDirective end={300} color="#27AE60" opacity={0.3} />
            </BulletRangeCollectionDirective>
            <Inject services={[BulletTooltip]} />
        </BulletChartComponent>
    );
}

Best Practices

Orientation

• Use Horizontal for most cases (more natural reading)
• Use Vertical when horizontal space is limited
• Maintain consistent orientation across related charts
• Adjust dimensions appropriately for orientation

RTL Support

• Enable only for RTL language content
• Test with actual RTL text, not just enableRtl flag
• Wrap in <div dir="rtl"> for proper browser support
• Ensure all text elements render correctly

Animation

• Duration: 600-1200ms for smooth feel
• Delay: 0-200ms, use delays for sequential charts
• Disable for performance-critical dashboards
• Disable for static reports or print views

Themes

• Choose theme matching your application framework
• Material/Material3: For Material Design apps
• Bootstrap/Bootstrap4: For Bootstrap apps
• Fluent: For Microsoft-style apps
• HighContrast: For accessibility requirements
• Import correct CSS for chosen theme

Troubleshooting

Issue: Orientation not changing

• Verify orientation value is "Horizontal" or "Vertical" (case-sensitive)
• Check for typos in property name
• Adjust width/height for vertical orientation (more height, less width)
• Clear browser cache if changes not reflecting

Issue: RTL not working

• Ensure enableRtl is boolean true, not string "true"
• Add dir="rtl" to parent container
• Check if RTL CSS is loaded
• Verify text content is actually in RTL language

Issue: Animation not smooth

• Reduce duration (try 600-1000ms)
• Check for performance issues (too many charts)
• Ensure browser supports CSS transitions
• Test in different browsers

Issue: Animation stuttering

• Disable animations on other elements during bullet chart animation
• Reduce number of simultaneous animations
• Check CPU/GPU usage
• Simplify chart configuration

Issue: Theme not applying

• Verify theme CSS file is imported
• Check theme name matches exactly (case-sensitive)
• Ensure no conflicting CSS overrides
• Import theme CSS before custom styles

Issue: Theme colors wrong

• Verify correct theme CSS is loaded
• Check for CSS specificity conflicts
• Clear browser cache
• Inspect element to see computed styles

Issue: Vertical chart looks wrong

• Swap width and height values (height should be larger)
• Check title positioning for vertical charts
• Adjust interval if labels overlap
• Increase chart height for better visibility

Data Binding in React Bullet Chart

Data binding connects your data source to the Bullet Chart component, allowing it to display actual values (feature measures) and target values (comparative measures).

Table of contents

• Overview
• dataSource Property
• valueField Property
• targetField Property
• Complete Data Binding Example
• Local Data Binding
• Data Structure Requirements
• Dynamic Data Binding
• Common Patterns
• Troubleshooting

Overview

The Bullet Chart uses three key properties for data binding:

• `dataSource`: The array of data objects
• `valueField`: The property name in your data that contains the actual/feature measure
• `targetField`: The property name in your data that contains the target/comparative measure

dataSource Property

The dataSource property accepts a collection of values as input. This data helps display actual measurements and compare them to target values.

Basic Data Structure

Your data should be an array of objects, where each object contains at least:

• A property for the actual value (e.g., value)
• A property for the target value (e.g., target)

Example:

const data = [
    { value: 270, target: 250 }
];

valueField Property

The valueField property specifies which property from your data source should be used as the actual bar (feature measure) value.

Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { actual: 270, goal: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="actual"    // Maps to the 'actual' property
            targetField="goal"     // Maps to the 'goal' property
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

In this example, the actual bar will display the value 270 from the actual property.

targetField Property

The targetField property specifies which property from your data source should be used as the target bar (comparative measure) value.

Example

const salesData = [
    { revenue: 180, target: 200 }
];

<BulletChartComponent
    dataSource={salesData}
    valueField="revenue"    // Actual revenue: 180
    targetField="target"    // Target revenue: 200
    minimum={0}
    maximum={250}
/>

The target bar will display at position 200, providing a comparison point for the actual value of 180.

Complete Data Binding Example

Here's a comprehensive example with multiple data points:

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";

function App() {
    const salesData = [
        { 
            value: 270, 
            target: 250,
            category: "Product A"
        },
        { 
            value: 180, 
            target: 200,
            category: "Product B"
        },
        { 
            value: 220, 
            target: 210,
            category: "Product C"
        }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={salesData}
            valueField="value"
            targetField="target"
            categoryField="category"
            title="Sales Performance by Product"
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

export default App;

Local Data Binding

Single Data Point

For a single metric (most common use case):

const data = [
    { value: 100, target: 80 }
];

<BulletChartComponent
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={150}
/>

Multiple Data Points

For displaying multiple bullet charts or using category labels:

const data = [
    { value: 100, target: 80 },
    { value: 200, target: 180 },
    { value: 300, target: 280 }
];

<BulletChartComponent
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={400}
/>

Data Structure Requirements

Minimum Required Fields

At minimum, your data objects must have:

{ 
    value: number,    // For valueField
    target: number    // For targetField
}

Extended Data Structure

You can include additional fields for advanced features:

{
    value: number,           // Actual value
    target: number,          // Target value
    category: string,        // For category labels
    valueColor: string,      // Dynamic value bar color
    targetColor: string      // Dynamic target bar color
}

Example with extended fields:

const data = [
    { 
        value: 270, 
        target: 250,
        category: "Q1 Revenue",
        valueColor: "#5B5FC7",
        targetColor: "#646464"
    }
];

<BulletChartComponent
    dataSource={data}
    valueField="value"
    targetField="target"
    categoryField="category"
    valueFill="valueColor"       // Bind color from data
    targetColor="targetColor"    // Bind target color from data
/>

Dynamic Data Binding

From State

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import { useState, useEffect } from "react";

function App() {
    const [chartData, setChartData] = useState([]);

    useEffect(() => {
        // Fetch or compute data
        const fetchedData = [
            { value: 270, target: 250 }
        ];
        setChartData(fetchedData);
    }, []);

    return (
        <BulletChartComponent
            dataSource={chartData}
            valueField="value"
            targetField="target"
            minimum={0}
            maximum={300}
        />
    );
}

From API

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import { useState, useEffect } from "react";

function App() {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/metrics')
            .then(response => response.json())
            .then(jsonData => {
                setData(jsonData);
                setLoading(false);
            });
    }, []);

    if (loading) return <div>Loading...</div>;

    return (
        <BulletChartComponent
            dataSource={data}
            valueField="value"
            targetField="target"
            minimum={0}
            maximum={500}
        />
    );
}

Common Patterns

KPI Dashboard with Multiple Metrics

const metrics = [
    { name: "Revenue", actual: 270, goal: 250 },
    { name: "Profit", actual: 85, goal: 100 },
    { name: "Sales", actual: 180, goal: 150 }
];

<div>
    {metrics.map((metric, index) => (
        <BulletChartComponent
            key={index}
            dataSource={[metric]}
            valueField="actual"
            targetField="goal"
            title={metric.name}
            minimum={0}
            maximum={300}
        />
    ))}
</div>

Percentage-Based Data

const performanceData = [
    { 
        completion: 85,      // 85% complete
        target: 100,         // 100% target
        metric: "Project Progress"
    }
];

<BulletChartComponent
    dataSource={performanceData}
    valueField="completion"
    targetField="target"
    categoryField="metric"
    minimum={0}
    maximum={100}
    labelFormat="{value}%"
/>

Troubleshooting

Issue: Bars not displaying

• Verify property names in valueField and targetField match your data exactly (case-sensitive)
• Check that data values are numbers, not strings
• Ensure minimum and maximum encompass your data range

Issue: Wrong values displayed

• Double-check the property names in valueField and targetField
• Verify your data structure matches the expected format
• Console.log your dataSource to inspect the actual data

Issue: Multiple data points not showing

• For multiple separate charts, map over your data and create multiple BulletChartComponent instances
• For category-based grouping, use the categoryField property

Issue: Data updates not reflecting

• Ensure you're updating state correctly in React
• Check that the dataSource reference changes when data updates
• Use proper React state management (useState, useEffect)

Data Labels in React Bullet Chart

Data labels identify the value of the actual bar in the Bullet Chart component, providing at-a-glance value information without requiring user interaction.

Table of contents

• Overview
• Enabling Data Labels
• Complete Basic Example
• Data Label Customization
• Complete Customization
• Common Patterns
• Best Practices
• Troubleshooting

Overview

Data labels display the actual bar's value directly on the chart, making it easy to read exact values without hovering or interacting with the chart. They are particularly useful for static reports, printed materials, or when precise values are critical.

Enabling Data Labels

Data labels are disabled by default. Enable them by setting the enable property to true in the dataLabel configuration.

Basic Data Label

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue"
            minimum={0}
            maximum={300}
            dataLabel={{ enable: true }}
        />
    );
}

The value 270 will be displayed as a label on or near the actual bar.

Complete Basic Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Sales Performance"
            minimum={0}
            maximum={300}
            interval={50}
            dataLabel={{ enable: true }}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="red" />
                <BulletRangeDirective end={250} color="yellow" />
                <BulletRangeDirective end={300} color="green" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

export default App;

Data Label Customization

Use the labelStyle property within dataLabel to customize the appearance of data labels.

Available Style Properties

• color: Text color
• opacity: Transparency (0-1)
• size: Font size
• fontFamily: Font typeface
• fontWeight: Font weight (normal, bold, etc.)
• fontStyle: Font style (normal, italic, oblique)

Color and Size

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    dataLabel={{
        enable: true,
        labelStyle: {
            color: "#FFFFFF",      // White text
            size: "14px"           // Font size
        }
    }}
    minimum={0}
    maximum={300}
/>

Font Weight and Style

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    dataLabel={{
        enable: true,
        labelStyle: {
            color: "#333333",
            size: "13px",
            fontWeight: "bold",     // Bold text
            fontStyle: "normal"     // Normal style
        }
    }}
    minimum={0}
    maximum={300}
/>

Complete Customization

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Quarterly Revenue"
            minimum={0}
            maximum={300}
            interval={50}
            dataLabel={{
                enable: true,
                labelStyle: {
                    color: "#2C3E50",                    // Dark blue-gray
                    opacity: 1,                          // Fully opaque
                    size: "14px",                        // Medium size
                    fontFamily: "Arial, sans-serif",     // Arial font
                    fontWeight: "600",                   // Semi-bold
                    fontStyle: "normal"                  // Normal style
                }
            }}
        />
    );
}

Complete Styled Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Sales Target Achievement"
            subtitle="Q1 2024"
            
            // Chart styling
            valueFill="#5B5FC7"
            valueHeight={18}
            targetColor="#424242"
            targetWidth={5}
            
            // Data label configuration
            dataLabel={{
                enable: true,
                labelStyle: {
                    color: "#FFFFFF",                // White text
                    size: "13px",
                    fontFamily: "Segoe UI, Arial, sans-serif",
                    fontWeight: "bold",
                    opacity: 1
                }
            }}
            
            minimum={0}
            maximum={300}
            interval={50}
            width="90%"
            height="120px"
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="#E74C3C" opacity={0.3} />
                <BulletRangeDirective end={250} color="#F39C12" opacity={0.3} />
                <BulletRangeDirective end={300} color="#27AE60" opacity={0.3} />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

export default App;

Common Patterns

High Contrast Labels

For dark value bars, use light text:

dataLabel={{
    enable: true,
    labelStyle: {
        color: "#FFFFFF",          // White text
        fontWeight: "bold",
        size: "14px"
    }
}}

For light value bars, use dark text:

dataLabel={{
    enable: true,
    labelStyle: {
        color: "#333333",          // Dark text
        fontWeight: "600",
        size: "14px"
    }
}}

Subtle Labels

For minimalist designs:

dataLabel={{
    enable: true,
    labelStyle: {
        color: "#757575",          // Medium gray
        size: "12px",
        fontWeight: "normal",
        opacity: 0.8
    }
}}

Emphasized Labels

For important metrics:

dataLabel={{
    enable: true,
    labelStyle: {
        color: "#2C3E50",
        size: "16px",
        fontWeight: "800",         // Extra bold
        fontFamily: "Arial Black, sans-serif"
    }
}}

Font Weight Options

// Numeric values
fontWeight: "300"     // Light
fontWeight: "400"     // Normal
fontWeight: "500"     // Medium
fontWeight: "600"     // Semi-bold
fontWeight: "700"     // Bold
fontWeight: "800"     // Extra bold

// Named values
fontWeight: "normal"  // 400
fontWeight: "bold"    // 700

Font Style Options

fontStyle: "normal"   // Default
fontStyle: "italic"   // Slanted text
fontStyle: "oblique"  // Slanted text (similar to italic)

Best Practices

When to Use Data Labels

• Enable for static displays, reports, and presentations
• Enable when exact values are critical
• Disable for interactive dashboards with tooltips
• Disable when space is limited or labels overlap

Text Visibility

• Use high contrast between label and value bar
• White text on dark bars (#FFFFFF)
• Dark text on light bars (#333333, #2C3E50)
• Ensure 4.5:1 minimum contrast ratio for accessibility

Font Size

• 11-12px: Compact charts, multiple metrics
• 13-14px: Standard single metric (recommended)
• 15-16px: Emphasized primary KPIs
• 17px+: Dashboard headers, hero metrics

Font Weight

• 400-500: Subtle, minimalist designs
• 600: Recommended for general use (readable, not overwhelming)
• 700-800: Emphasized metrics, bold statements

Typography

• Use sans-serif fonts for better readability at small sizes
• Stick to system fonts (Arial, Segoe UI, Helvetica) for consistency
• Avoid decorative fonts that reduce legibility

Troubleshooting

Issue: Data labels not showing

• Verify dataLabel.enable is set to true
• Check that dataLabel object is properly configured
• Ensure chart has sufficient height for labels to display
• Verify value is within minimum and maximum range

Issue: Labels are cut off

• Increase chart height and width
• Reduce label font size
• Adjust chart margins if available
• Use shorter number formats

Issue: Labels hard to read

• Increase contrast between label color and value bar color
• Use white text on dark bars, dark text on light bars
• Increase font size if too small
• Add font-weight: bold for better visibility

Issue: Label color not applying

• Ensure color value is valid CSS color (hex, rgb, color name)
• Check property is color not fill in labelStyle
• Verify labelStyle object is nested correctly in dataLabel
• Use quotes for color values: color: "#FFFFFF"

Issue: Font styling not working

• Verify property names are exact: fontWeight, fontFamily, fontStyle
• Use quotes for all string values
• Check font family is available in the system
• Include fallback fonts: fontFamily: "Arial, sans-serif"

Issue: Labels overlap with chart elements

• Reduce font size
• Adjust value bar height to accommodate labels
• Consider using tooltips instead of persistent labels
• Increase chart dimensions

Issue: Opacity not visible

• Ensure opacity value is between 0 and 1
• Check that opacity is reducing visibility (1 = opaque, 0 = transparent)
• Verify sufficient contrast even with reduced opacity
• Test with solid opacity: 1 first

Bullet Chart Dimensions in React Bullet Chart

This guide covers how to control the size and dimensions of the Bullet Chart component using container sizing, direct sizing, and responsive techniques.

Table of contents

• Overview
• Container Size Configuration
• Direct Component Sizing
• Pixel Sizing
• Percentage Sizing
• Default Size Behavior
• Common Sizing Patterns
• Best Practices
• Troubleshooting

Overview

The Bullet Chart's size can be controlled in two ways: 1. Container-based: Chart inherits size from its parent container 2. Direct sizing: Use width and height properties on the component

Container Size Configuration

The Bullet Chart can be sized by its parent container element using inline styles or CSS.

Inline Styles

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ width: '650px', height: '350px' }}>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                minimum={0}
                maximum={300}
            />
        </div>
    );
}

The chart will fill the entire 650px × 350px container.

CSS Styling

// In your CSS file
.chart-container {
    width: 650px;
    height: 350px;
}

// In your component
function App() {
    return (
        <div className="chart-container">
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                minimum={0}
                maximum={300}
            />
        </div>
    );
}

Direct Component Sizing

Use the width and height properties directly on the BulletChartComponent.

Basic Width and Height

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    width="650px"
    height="350px"
    minimum={0}
    maximum={300}
/>

Pixel Sizing

Set explicit pixel dimensions for fixed-size charts.

Fixed Pixel Values

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue Performance"
            width="600px"              // Fixed 600 pixels wide
            height="100px"             // Fixed 100 pixels tall
            minimum={0}
            maximum={300}
            interval={50}
        />
    );
}

When to Use Pixel Sizing

• Fixed layouts: When chart position and size are predetermined
• Print layouts: For consistent sizing in reports
• Specific designs: When exact dimensions are required
• Non-responsive: Desktop-only applications

Percentage Sizing

Use percentage values for responsive layouts that adapt to container size.

Percentage Width and Height

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    width="100%"               // Full container width
    height="50%"               // Half container height
    minimum={0}
    maximum={300}
/>

Responsive Example

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ width: '100%', height: '400px' }}>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Performance Metric"
                width="100%"           // Responsive width
                height="100px"         // Fixed height for consistency
                minimum={0}
                maximum={300}
                interval={50}
            />
        </div>
    );
}

The chart width will adjust based on the container or viewport size.

When to Use Percentage Sizing

• Responsive layouts: Adapting to different screen sizes
• Dashboards: Flexible grid layouts
• Mobile apps: Supporting various device widths
• Dynamic containers: Parent elements with changing sizes

Default Size Behavior

If no size is specified, the Bullet Chart uses default dimensions:

• Height: 126px
• Width: Full width of the parent container (or window if no container)

Default Size Example

// No width or height specified
<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={300}
/>
// Chart will be 126px tall and fill available width

Common Sizing Patterns

Compact Dashboard Card

<BulletChartComponent
    width="100%"
    height="80px"              // Compact height
    minimum={0}
    maximum={300}
/>

Standard Single Metric

<BulletChartComponent
    width="600px"
    height="120px"             // Standard height
    minimum={0}
    maximum={300}
/>

Full-Width Responsive

<BulletChartComponent
    width="100%"
    height="100px"
    minimum={0}
    maximum={300}
/>

Multiple Metrics Stack

function App() {
    const metrics = [
        { value: 270, target: 250, name: "Revenue" },
        { value: 180, target: 200, name: "Profit" },
        { value: 220, target: 210, name: "Sales" }
    ];

    return (
        <div style={{ width: '100%' }}>
            {metrics.map((metric, index) => (
                <div key={index} style={{ marginBottom: '15px' }}>
                    <BulletChartComponent
                        id={`chart-${index}`}
                        dataSource={[metric]}
                        valueField="value"
                        targetField="target"
                        title={metric.name}
                        width="100%"           // Responsive
                        height="80px"          // Consistent height
                        minimum={0}
                        maximum={300}
                    />
                </div>
            ))}
        </div>
    );
}

Large Dashboard Display

<BulletChartComponent
    width="900px"
    height="150px"             // Larger for visibility
    minimum={0}
    maximum={300}
/>

Complete Responsive Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ 
            width: '100%', 
            maxWidth: '800px', 
            margin: '0 auto',
            padding: '20px' 
        }}>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Quarterly Revenue"
                subtitle="Q1 2024"
                
                // Responsive dimensions
                width="100%"               // Adapts to container
                height="120px"             // Fixed for consistency
                
                minimum={0}
                maximum={300}
                interval={50}
                valueFill="#5B5FC7"
                valueHeight={18}
                targetColor="#424242"
            >
                <BulletRangeCollectionDirective>
                    <BulletRangeDirective end={150} color="#E74C3C" opacity={0.3} />
                    <BulletRangeDirective end={250} color="#F39C12" opacity={0.3} />
                    <BulletRangeDirective end={300} color="#27AE60" opacity={0.3} />
                </BulletRangeCollectionDirective>
            </BulletChartComponent>
        </div>
    );
}

Best Practices

Height Guidelines

• 60-80px: Compact dashboard cards, multiple metrics
• 100-120px: Standard single metric display (recommended)
• 140-160px: Large displays, emphasis metrics
• Never below 50px: Chart elements become illegible

Width Guidelines

• Minimum 300px: Ensure axis labels don't overlap
• 400-600px: Comfortable single metric width
• 100% responsive: Best for most dashboard layouts
• Consider mobile: Test at 320px width minimum

Responsive Strategy

• Use percentage width (100%) for flexible layouts
• Use pixel height for consistent vertical rhythm
• Set max-width on containers to prevent excessive stretching
• Test across multiple screen sizes

Container vs Direct Sizing

• Container sizing: Better for complex layouts with multiple elements
• Direct sizing: Simpler, more explicit control
• Combination: Container width (%), direct height (px) works well

Troubleshooting

Issue: Chart too small

• Check container has explicit dimensions if using container sizing
• Increase width and height values
• Verify parent elements don't have height: 0 or width: 0
• Use browser inspector to check computed dimensions

Issue: Chart too large

• Reduce width and height values
• Add max-width constraint on container
• Check for unintended 100% width on large containers
• Verify no CSS overrides

Issue: Chart not responsive

• Use percentage for width instead of pixels
• Ensure parent container is responsive
• Check for fixed-width ancestors
• Test window resize behavior

Issue: Labels cut off

• Increase chart height
• Reduce label font size
• Adjust title position
• Increase chart width if horizontal labels overlap

Issue: Chart overflowing container

• Verify width/height don't exceed container
• Check for box-sizing issues (add box-sizing: border-box)
• Look for padding/margin on chart or container
• Use width: 100% instead of fixed pixels

Issue: Height not applying

• Ensure height value includes units ("100px" not "100")
• Check parent container has explicit height if using percentages
• Verify no CSS overrides with !important
• Use browser inspector to check computed height

Issue: Inconsistent sizing across browsers

• Always include units (px, %, em)
• Set explicit box-sizing: border-box
• Avoid relying on default dimensions
• Test in multiple browsers during development

Getting Started with React Bullet Chart

This guide covers everything you need to install, configure, and create your first Syncfusion React Bullet Chart component.

Table of contents

• Dependencies
• Installation and Configuration
• Add Bullet Chart to Your Project
• Module Injection
• Bullet Chart with Data
• Adding a Title
• Adding Ranges
• Enabling Tooltips
• Complete Working Example
• Common Issues and Solutions
• Next Steps

Dependencies

The Bullet Chart component requires the following packages:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

These dependencies are automatically installed when you install the main package.

Installation and Configuration

Using Vite (Recommended)

Vite provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools.

Create a new React application:

npm create vite@latest my-app

This command will prompt you for project settings. Select React as the framework.

For TypeScript environment:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

For JavaScript environment:

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Using Create React App (Alternative)

If you prefer create-react-app, you can use it as an alternative setup method. Refer to the official Syncfusion documentation for create-react-app specific instructions.

Install Syncfusion Bullet Chart Package

All Syncfusion Essential JS 2 packages are published in the npmjs.com public registry. Install the Bullet Chart package:

npm install @syncfusion/ej2-react-charts --save

The --save flag includes the Bullet Chart package in the dependencies section of package.json.

Add Bullet Chart to Your Project

Basic Component Setup

Add the Bullet Chart component to src/App.tsx or src/App.jsx:

TypeScript:

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return <BulletChartComponent />;
}
export default App;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

JavaScript:

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return <BulletChartComponent />;
}
export default App;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Run the Application

Start the development server:

npm run dev

This compiles your code and serves the application locally, opening it in the browser.

Module Injection

Bullet Chart features are segregated into individual feature modules. To use a specific feature, you must inject its module into the component.

BulletTooltip Module

To enable tooltip functionality, inject the BulletTooltip module:

TypeScript:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BulletChartComponent, BulletTooltip, Inject } from "@syncfusion/ej2-react-charts";

function App() {
    return (
      <BulletChartComponent id="bulletChart">
        <Inject services={[BulletTooltip]} />
      </BulletChartComponent>
    );
}
export default App;
createRoot(document.getElementById('charts')).render(<App />);

JavaScript:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BulletChartComponent, BulletTooltip, Inject } from "@syncfusion/ej2-react-charts";

function App() {
    return (
      <BulletChartComponent id="bulletChart">
        <Inject services={[BulletTooltip]} />
      </BulletChartComponent>
    );
}
export default App;
createRoot(document.getElementById('charts')).render(<App />);

Bullet Chart with Data

Prepare Your Data

Define your data structure with value and target properties:

TypeScript:

interface DataPoint {
    value: number;
    target: number;
}

const data: DataPoint[] = [
    { value: 100, target: 80 },
    { value: 200, target: 180 },
    { value: 300, target: 280 },
    { value: 400, target: 380 },
    { value: 500, target: 480 }
];

JavaScript:

const data = [
    { value: 100, target: 80 },
    { value: 200, target: 180 },
    { value: 300, target: 280 },
    { value: 400, target: 380 },
    { value: 500, target: 480 }
];

Bind Data to Component

Map the data to the Bullet Chart using dataSource, valueField, and targetField:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={600}
    interval={100}
/>

Key Properties:

• dataSource: The data array
• valueField: Property name for actual values (e.g., "value")
• targetField: Property name for target values (e.g., "target")
• minimum: Minimum value of the scale
• maximum: Maximum value of the scale
• interval: Interval between axis labels

Adding a Title

Use the title property to provide information about the data:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    title="Sales Performance"
    minimum={0}
    maximum={600}
    interval={100}
/>

Adding Ranges

Ranges provide visual context by dividing the chart into qualitative bands (e.g., poor, satisfactory, good).

Import Range Directives

import { 
    BulletChartComponent, 
    BulletRangeCollectionDirective, 
    BulletRangeDirective 
} from "@syncfusion/ej2-react-charts";

Configure Ranges

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    title="Sales Performance"
    minimum={0}
    maximum={600}
    interval={100}
>
    <BulletRangeCollectionDirective>
        <BulletRangeDirective end={200} color="red" />
        <BulletRangeDirective end={400} color="yellow" />
        <BulletRangeDirective end={600} color="green" />
    </BulletRangeCollectionDirective>
</BulletChartComponent>

Each BulletRangeDirective defines:

• end: The ending point of the range
• color: The color for that range (poor=red, satisfactory=yellow, good=green)

Enabling Tooltips

Tooltips display important summary information when hovering over bars.

Enable Tooltip

Set the enable property to true in the tooltip object and inject the BulletTooltip module:

import { 
    BulletChartComponent, 
    BulletRangeCollectionDirective, 
    BulletRangeDirective,
    BulletTooltip,
    Inject
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Revenue"
            minimum={0}
            maximum={300}
            interval={50}
            tooltip={{ enable: true }}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="red" />
                <BulletRangeDirective end={250} color="yellow" />
                <BulletRangeDirective end={300} color="green" />
            </BulletRangeCollectionDirective>
            <Inject services={[BulletTooltip]} />
        </BulletChartComponent>
    );
}

Complete Working Example

Here's a complete example combining all features:

import { 
    BulletChartComponent, 
    BulletRangeCollectionDirective, 
    BulletRangeDirective,
    BulletTooltip,
    Inject
} from "@syncfusion/ej2-react-charts";
import * as React from "react";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ padding: '20px' }}>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Revenue (in thousands)"
                subtitle="Q1 2024"
                minimum={0}
                maximum={300}
                interval={50}
                tooltip={{ enable: true }}
                width="80%"
                height="100px"
            >
                <BulletRangeCollectionDirective>
                    <BulletRangeDirective end={150} color="#CC0000" />
                    <BulletRangeDirective end={250} color="#FFC107" />
                    <BulletRangeDirective end={300} color="#4CAF50" />
                </BulletRangeCollectionDirective>
                <Inject services={[BulletTooltip]} />
            </BulletChartComponent>
        </div>
    );
}

export default App;

Common Issues and Solutions

Issue: Chart not rendering

• Verify that @syncfusion/ej2-react-charts is installed
• Check that you've imported BulletChartComponent correctly
• Ensure the component has a unique id prop

Issue: Data not displaying

• Verify dataSource contains valid data
• Check that valueField and targetField match your data properties
• Ensure minimum and maximum encompass your data range

Issue: Tooltips not working

• Confirm you've imported and injected the BulletTooltip module
• Set tooltip.enable to true
• Check that the tooltip object is properly configured

Issue: Ranges not visible

• Import BulletRangeCollectionDirective and BulletRangeDirective
• Set end values in ascending order
• Verify end values are within minimum and maximum bounds

Next Steps

Now that you have a basic Bullet Chart running, explore:

• Customizing value bar appearance (types, colors, borders)
• Configuring comparative bar (target) types and styles
• Adding data labels to show exact values
• Customizing axis labels, tick marks, and formatting
• Implementing animations and themes
• Ensuring accessibility compliance

Ranges in React Bullet Chart

Ranges represent qualitative bands in the Bullet Chart, such as Good, Bad, and Satisfactory. They provide visual context by dividing the chart scale into performance levels.

Table of contents

• Overview
• Basic Range Configuration
• Range Properties
• Color Customization
• Opacity Customization
• Common Range Patterns
• Best Practices
• Troubleshooting

Overview

Ranges are background bands that help interpret the value bar's performance level. Common uses include:

• Performance levels: Poor, Average, Good, Excellent
• Status indicators: Critical, Warning, Normal
• Quality bands: Below Target, Near Target, Above Target

Basic Range Configuration

Import Range Directives

First, import the necessary range components:

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

Define Ranges

Use BulletRangeCollectionDirective as a container and BulletRangeDirective for each individual range:

<BulletChartComponent
    id="bulletChart"
    dataSource={data}
    valueField="value"
    targetField="target"
    minimum={0}
    maximum={300}
>
    <BulletRangeCollectionDirective>
        <BulletRangeDirective end={150} color="red" />
        <BulletRangeDirective end={250} color="yellow" />
        <BulletRangeDirective end={300} color="green" />
    </BulletRangeCollectionDirective>
</BulletChartComponent>

Range Properties

end Property

The end property specifies the ending point of a qualitative range. Each range starts where the previous one ends (or from the minimum value for the first range).

Example:

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={100} />  {/* Range: 0-100 (from minimum) */}
    <BulletRangeDirective end={200} />  {/* Range: 100-200 */}
    <BulletRangeDirective end={300} />  {/* Range: 200-300 */}
</BulletRangeCollectionDirective>

Key Points:

• First range starts at the minimum value
• Each subsequent range starts at the previous range's end value
• Last range should typically end at or near the maximum value

Understanding Range Boundaries

<BulletChartComponent
    minimum={0}      // Starting point for first range
    maximum={300}
>
    <BulletRangeCollectionDirective>
        <BulletRangeDirective end={150} color="red" />     {/* 0-150 */}
        <BulletRangeDirective end={250} color="yellow" />  {/* 150-250 */}
        <BulletRangeDirective end={300} color="green" />   {/* 250-300 */}
    </BulletRangeCollectionDirective>
</BulletChartComponent>

Complete Basic Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Sales Performance"
            minimum={0}
            maximum={300}
            interval={50}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective end={150} color="red" />
                <BulletRangeDirective end={250} color="yellow" />
                <BulletRangeDirective end={300} color="green" />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

export default App;

Color Customization

Using CSS Color Names

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={100} color="red" />
    <BulletRangeDirective end={200} color="orange" />
    <BulletRangeDirective end={300} color="green" />
</BulletRangeCollectionDirective>

Using Hex Color Codes

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={150} color="#E74C3C" />
    <BulletRangeDirective end={250} color="#F39C12" />
    <BulletRangeDirective end={300} color="#27AE60" />
</BulletRangeCollectionDirective>

Using RGB Values

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={100} color="rgb(231, 76, 60)" />
    <BulletRangeDirective end={200} color="rgb(243, 156, 18)" />
    <BulletRangeDirective end={300} color="rgb(39, 174, 96)" />
</BulletRangeCollectionDirective>

Opacity Customization

Control the transparency of ranges using the opacity property. Values range from 0 (transparent) to 1 (opaque).

Basic Opacity

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={150} color="red" opacity={0.5} />
    <BulletRangeDirective end={250} color="yellow" opacity={0.5} />
    <BulletRangeDirective end={300} color="green" opacity={0.5} />
</BulletRangeCollectionDirective>

Complete Opacity Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <BulletChartComponent
            id="bulletChart"
            dataSource={data}
            valueField="value"
            targetField="target"
            title="Performance Metrics"
            minimum={0}
            maximum={300}
            interval={50}
        >
            <BulletRangeCollectionDirective>
                <BulletRangeDirective 
                    end={150} 
                    color="#E74C3C" 
                    opacity={0.3}     // Light red
                />
                <BulletRangeDirective 
                    end={250} 
                    color="#F39C12" 
                    opacity={0.5}     // Medium yellow
                />
                <BulletRangeDirective 
                    end={300} 
                    color="#27AE60" 
                    opacity={0.7}     // Prominent green
                />
            </BulletRangeCollectionDirective>
        </BulletChartComponent>
    );
}

Common Range Patterns

Three-Level Performance (Poor/Average/Good)

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={100} color="#F44336" opacity={0.4} />  {/* Poor */}
    <BulletRangeDirective end={200} color="#FFC107" opacity={0.4} />  {/* Average */}
    <BulletRangeDirective end={300} color="#4CAF50" opacity={0.4} />  {/* Good */}
</BulletRangeCollectionDirective>

Four-Level Quality Scale

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={75} color="#D32F2F" />    {/* Critical */}
    <BulletRangeDirective end={150} color="#F57C00" />   {/* Warning */}
    <BulletRangeDirective end={225} color="#FBC02D" />   {/* Acceptable */}
    <BulletRangeDirective end={300} color="#388E3C" />   {/* Excellent */}
</BulletRangeCollectionDirective>

Five-Level Detail Scale

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={60} color="#B71C1C" />    {/* Very Poor */}
    <BulletRangeDirective end={120} color="#E65100" />   {/* Poor */}
    <BulletRangeDirective end={180} color="#F9A825" />   {/* Average */}
    <BulletRangeDirective end={240} color="#689F38" />   {/* Good */}
    <BulletRangeDirective end={300} color="#2E7D32" />   {/* Excellent */}
</BulletRangeCollectionDirective>

Percentage-Based Ranges

<BulletChartComponent
    minimum={0}
    maximum={100}
    interval={20}
>
    <BulletRangeCollectionDirective>
        <BulletRangeDirective end={50} color="red" />      {/* 0-50% */}
        <BulletRangeDirective end={75} color="yellow" />   {/* 50-75% */}
        <BulletRangeDirective end={100} color="green" />   {/* 75-100% */}
    </BulletRangeCollectionDirective>
</BulletChartComponent>

Subtle Monochrome Ranges

<BulletRangeCollectionDirective>
    <BulletRangeDirective end={100} color="#BDBDBD" opacity={0.3} />  {/* Light gray */}
    <BulletRangeDirective end={200} color="#757575" opacity={0.3} />  {/* Medium gray */}
    <BulletRangeDirective end={300} color="#424242" opacity={0.3} />  {/* Dark gray */}
</BulletRangeCollectionDirective>

Best Practices

Number of Ranges

• 3 ranges: Simple good/average/poor distinction (most common)
• 4-5 ranges: More granular performance levels
• 2 ranges: Binary pass/fail scenarios
• Avoid more than 5 ranges (becomes visually cluttered)

Color Selection

• Traditional traffic light: Red (poor), Yellow (average), Green (good)
• Professional palette: Use muted colors with lower opacity
• Brand colors: Adapt ranges to match brand guidelines
• Accessibility: Ensure sufficient contrast between ranges
• Color blindness: Consider patterns or labels for accessibility

Opacity Guidelines

• 0.2-0.4: Very subtle background, minimal distraction
• 0.4-0.6: Standard range visibility (recommended)
• 0.6-0.8: Emphasized ranges
• 0.8-1.0: Prominent ranges (use sparingly)

Range Boundaries

• Set boundaries at logical intervals (50, 100, 150 instead of 47, 93, 187)
• Ensure last range ends at or near maximum value
• Align boundaries with business thresholds or goals

Complete Styled Example

import { 
    BulletChartComponent,
    BulletRangeCollectionDirective,
    BulletRangeDirective,
    BulletTooltip,
    Inject
} from "@syncfusion/ej2-react-charts";

function App() {
    const data = [
        { value: 270, target: 250 }
    ];

    return (
        <div style={{ padding: '20px' }}>
            <BulletChartComponent
                id="bulletChart"
                dataSource={data}
                valueField="value"
                targetField="target"
                title="Quarterly Revenue"
                subtitle="In thousands USD"
                minimum={0}
                maximum={300}
                interval={50}
                valueFill="#5B5FC7"
                valueHeight={18}
                targetColor="#424242"
                targetWidth={5}
                tooltip={{ enable: true }}
                width="90%"
                height="120px"
            >
                <BulletRangeCollectionDirective>
                    <BulletRangeDirective 
                        end={150} 
                        color="#EF5350" 
                        opacity={0.5} 
                    />
                    <BulletRangeDirective 
                        end={250} 
                        color="#FFCA28" 
                        opacity={0.5} 
                    />
                    <BulletRangeDirective 
                        end={300} 
                        color="#66BB6A" 
                        opacity={0.5} 
                    />
                </BulletRangeCollectionDirective>
                <Inject services={[BulletTooltip]} />
            </BulletChartComponent>
        </div>
    );
}

export default App;

Troubleshooting

Issue: Ranges not visible

• Verify you've imported BulletRangeCollectionDirective and BulletRangeDirective
• Check that ranges are wrapped in <BulletRangeCollectionDirective>
• Ensure end values are within minimum and maximum bounds
• Try increasing opacity if colors are too subtle

Issue: Ranges overlap incorrectly

• Ensure end values are in ascending order
• Check that first range starts from minimum value
• Verify no gaps between range boundaries

Issue: Colors not showing

• Verify color values are valid CSS colors
• Check opacity isn't set to 0
• Ensure colors contrast with chart background

Issue: Last range doesn't reach maximum

• Set the last range's end value equal to maximum
• Verify maximum property is correctly set

Issue: Too many/few ranges displaying

• Count BulletRangeDirective components
• Check for duplicate or missing directives
• Verify each directive has an end property