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' },