syncfusion-blazor-bullet-chart

What this skill does

# Implementing Bullet Charts

**NuGet:** `Syncfusion.Blazor.Charts` + `Syncfusion.Blazor.Themes` (or `Syncfusion.Blazor.BulletChart` for individual package)
**Namespace:** `Syncfusion.Blazor.Charts`

A comprehensive skill for implementing Syncfusion Blazor Bullet Chart components for KPI and performance visualization. The Bullet Chart is a variation of bar charts designed specifically for displaying key performance indicators with actual values, target markers, and qualitative ranges in a compact space.

## When to Use This Skill

Use this skill immediately when you need to:
- Display KPI (Key Performance Indicator) dashboards
- Show actual performance vs target/goal comparisons
- Visualize metrics with qualitative ranges (Good, Average, Poor)
- Create compact performance indicators for dashboards
- Track sales targets, revenue goals, or quota achievements
- Display feature measures against comparative measures
- Build executive dashboards with multiple KPI metrics
- Show progress toward goals with context zones
- Compare current performance against benchmarks
- Visualize performance metrics in limited dashboard space
- Create data-dense visualizations for business intelligence
- Display multiple performance metrics in vertical/horizontal layouts
- Build responsive KPI cards or widgets for Blazor Server, WebAssembly, or Web App

## Component Overview

The **Syncfusion Blazor Bullet Chart** (`SfBulletChart`) is a specialized charting component optimized for KPI visualization. It presents:

- **Actual Bar (Feature Measure)**: Primary data value displayed as a horizontal/vertical bar
- **Target Bar (Comparative Measure)**: Goal marker displayed as a perpendicular line or shape
- **Qualitative Ranges**: Background zones representing performance levels (Poor, Satisfactory, Good)
- **Compact Design**: Space-efficient layout ideal for dashboards
- **Multiple Layouts**: Single or multiple bullet charts with category grouping
- **Customization**: Extensive styling, theming, and formatting options

**Key Characteristics:**
- **Bar Types**: Rect (default) or Dot for actual values
- **Target Shapes**: Rect, Circle, or Cross markers
- **Orientation**: Horizontal (default) or Vertical layouts
- **Data Binding**: Single point, multiple series, or category-based data
- **Interactive**: Tooltips, data labels, legends, and events
- **Accessible**: WCAG compliant with keyboard navigation

## Documentation and Navigation Guide

### API Reference

A concise summary of the key API surface for `SfBulletChart<TValue>` — see `references/api-reference.md` for the full reference and examples.

**SfBulletChart<TValue> — Key Parameters**
- **DataSource:** object — Data collection (List, IEnumerable, or remote `DataManager`).
- **ValueField:** string — Property name for the actual (feature) value.
- **TargetField:** string — Property name for the target/comparative value.
- **CategoryField:** string — Property name for category grouping (when multiple bullets are shown).
- **Minimum / Maximum / Interval:** double — Axis scale configuration.
- **Orientation:** `OrientationType` — `Horizontal` or `Vertical`.
- **Type:** `FeatureType` — Actual bar rendering (`Rect` or `Dot`).
- **TargetTypes:** `List<TargetType>` — Marker shapes for targets (e.g., `Rect`, `Circle`, `Cross`).
- **Width / Height / Title / Theme:** visual settings to control layout and appearance.

**Core Child Components**
- **BulletChartRange:** defines qualitative background ranges (`End`, `Color`, `Opacity`).
- **BulletChartRangeCollection:** container for multiple `BulletChartRange` entries.
- **BulletChartDataLabel:** data label options (`Enable`, `Template`, `TextStyle`).
- **BulletChartTooltip:** tooltip configuration (`Enable`, `Template`, `BulletChartTooltipTextStyle`).

**Appearance & Layout**
- **Border / Margin / MajorTickLines / MinorTickLines / CategoryLabelStyle:** axis, tick and spacing controls.
- **LegendSettings / LegendLocation / LegendTextStyle:** legend appearance when using categories or multiple bullets.

**Events**
- **Loaded / Resized:** lifecycle events to detect initialization and size changes.
- **TooltipRender / LabelRender / LegendRender / PointClick:** customization hooks for runtime interaction.

**Important Enums**
- **OrientationType:** `Horizontal` | `Vertical`.
- **TargetType:** `Rect` | `Circle` | `Cross`.
- **FeatureType:** `Rect` | `Dot`.

For full API details, method signatures, event argument classes, and quick examples, consult `references/api-reference.md`.

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

Start here for installation, setup, and your first bullet chart. Covers:
- Installing Syncfusion.Blazor.BulletChart NuGet package
- Blazor Server, WebAssembly, and Web App setup
- Service registration and theme configuration
- Basic SfBulletChart implementation with sample data
- Project structure and script references
- Troubleshooting common setup issues

### Core Chart Elements

#### Actual and Target Bars

📄 **Read:** [references/actual-target-bars.md](references/actual-target-bars.md)

Learn about the two primary chart elements:
- **Actual Bar (Feature Measure)**: ValueField mapping, Rect vs Dot types, styling
- **Target Bar (Comparative Measure)**: TargetField mapping, Circle/Cross/Rect shapes, multiple targets
- Color customization for both bars
- Width and height configuration
- Best practices for visual hierarchy

#### Qualitative Ranges

📄 **Read:** [references/ranges.md](references/ranges.md)

Configure background ranges that define performance zones:
- Range boundaries using End property
- Color and opacity customization
- Good/Satisfactory/Poor zone patterns
- Multiple range configurations
- Visual design best practices

### Data Configuration

#### Data Binding

📄 **Read:** [references/data-binding.md](references/data-binding.md)

Configure data sources for bullet charts:
- Single data point for simple KPIs
- Multiple data points with categories (vertical layout)
- CategoryField, ValueField, TargetField mapping
- Local data sources (List, Array, ExpandoObject)
- Remote data binding with SfDataManager
- Dynamic data updates and refresh patterns

### Customization and Styling

#### Axis Customization

📄 **Read:** [references/axis-customization.md](references/axis-customization.md)

Customize the quantitative scale:
- Minimum, Maximum, Interval properties
- Horizontal vs Vertical orientation
- Major and minor tick configuration
- Axis label formatting and rotation
- Opposite position for labels
- RTL (Right-to-Left) support

#### Visual Customization

📄 **Read:** [references/visual-customization.md](references/visual-customization.md)

Control appearance, themes, and layout:
- Chart dimensions (Width, Height, Container)
- Theme selection (Material, Bootstrap, Fluent, Tailwind, Fabric, Highcontrast)
- Color palette customization
- Title and subtitle configuration
- Border, margin, and padding settings
- Responsive design patterns

### Additional Features

#### Data Labels, Tooltips, and Legend

📄 **Read:** [references/data-labels-tooltips-legend.md](references/data-labels-tooltips-legend.md)

Enhance data visibility and interaction:
- **Data Labels**: Enable, format, position, and template options
- **Tooltips**: Default and custom templates, format strings
- **Legend**: Position, alignment, custom text, toggle visibility

#### Events and Accessibility

📄 **Read:** [references/events-accessibility.md](references/events-accessibility.md)

Handle user interactions and ensure accessibility:
- **Events**: OnLoad, OnChartMouseClick, OnTooltipRender, OnLegendRender
- **Accessibility**: WCAG compliance, keyboard navigation, screen readers, high contrast themes
- ARIA attributes and testing checklist

## Quick Start Example

Here's a minimal bullet chart showing revenue performance:

```razor
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@RevenueData" 
               ValueField="ActualRevenue"