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

tsx

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:

tsx

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:

tsx

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:

tsx

<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:

tsx

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

Key Props

Property	Type	Purpose
`dataSource`	Array	Data collection for the chart
`valueField`	string	Field name for actual/feature measure
`targetField`	string	Field name for target/comparative measure
`minimum`	number	Minimum value of quantitative scale
`maximum`	number	Maximum value of quantitative scale
`interval`	number	Interval between axis labels
`title`	string	Chart title text
`subtitle`	string	Chart subtitle text
`type`	string	Value bar shape: 'Rect' or 'Dot'
`targetTypes`	string[]	Target bar shapes: 'Circle', 'Cross', 'Rect'
`orientation`	string	Chart orientation: 'Horizontal' or 'Vertical'
`width`	string	Chart width (pixels or percentage)
`height`	string	Chart height (pixels or percentage)
`enableRtl`	boolean	Enable right-to-left rendering
`theme`	string	Apply Syncfusion theme
`tooltip`	object	Tooltip configuration with enable, template, fill, border, textStyle
`dataLabel`	object	Data label configuration with enable, labelStyle

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

syncfusion-react-bullet-chart

NPX Install

Tags

SKILL.md Content