Syncfusion Aspnetcore Bullet Chart

Syncfusion ASP.NET Core Bullet Chart

The Bullet Chart is a variation of a bar chart that displays actual performance against target benchmarks in a compact, visually efficient format. It combines multiple data elements (value bar, target marker, ranges) to provide immediate performance insights.

When to Use This Skill

Use the Bullet Chart skill when you need to:

• Compare Performance vs. Target - Display actual values alongside target/goal values in a single visualization
• Build KPI Dashboards - Quickly assess key performance indicators at a glance
• Show Progress with Benchmarks - Track progress toward goals with comparative ranges (poor, satisfactory, good)
• Monitor Multiple Metrics - Present multiple bullet charts in a dashboard for comparative analysis
• Create Compact Visualizations - Fit more data in less space compared to traditional bar charts
• Build Performance Reports - Executive dashboards, sales tracking, productivity metrics, revenue forecasting

Common scenarios:

• Sales vs. quota tracking
• Employee performance vs. targets
• Project milestones vs. deadlines
• Revenue vs. forecasts
• Customer satisfaction scores vs. goals

Navigation and Documentation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and ASP.NET Core project setup
• NuGet package installation
• Adding TagHelper and script resources
• Creating your first bullet chart with data
• Adding titles to charts

Data Binding and Configuration

📄 Read: references/data-binding.md

• Configuring DataSource property
• Mapping value and target fields
• Working with data models
• Dynamic and static data binding
• Data structure best practices

Axis Customization

📄 Read: references/axis-customization.md

• Customizing tick lines and labels
• Label formatting and number formatting
• Tick placement and label placement options
• Category label configuration
• Advanced axis positioning

Ranges and Comparative Bars

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

• Configuring performance ranges (poor, satisfactory, good)
• Target bar types (Rect, Cross, circle)
• Value bar customization
• Creating effective comparative visualizations
• Color schemes and styling ranges

Customization and Layout

📄 Read: references/customization.md

• Orientation (horizontal vs. vertical rendering)
• Right-to-Left (RTL) support
• Animation settings and transitions
• Chart sizing and responsive dimensions
• Theme and color customization

Data Labels, Tooltips, and Accessibility

📄 Read: references/data-and-accessibility.md

• Displaying data labels
• Configuring hover tooltips
• WAI-ARIA attributes for accessibility
• Keyboard navigation support
• Creating accessible dashboards

Quick Start Example

Basic Bullet Chart with Value and Target:

// CSHTML.cs - Controller/Page code
public class QuickStartBulletData
{
    public double Value { get; set; }
    public double Target { get; set; }
    public string Category { get; set; }
}

public IActionResult Index()
{
    ViewBag.ChartData = new List<QuickStartBulletData>
    {
        new QuickStartBulletData { Value = 75, Target = 80, Category = "Q1" },
        new QuickStartBulletData { Value = 85, Target = 90, Category = "Q2" },
        new QuickStartBulletData { Value = 65, Target = 75, Category = "Q3" }
    };
    return View();
}

<!-- CSHTML View -->
<ejs-bulletchart id="container" 
    dataSource="@ViewBag.ChartData" 
    valueField="Value" 
    targetField="Target"
    categoryField="Category"
    minimum="0"
    maximum="100"
    interval="20"
    title="Sales Performance">
    <e-bullet-range-collection>
        <e-bullet-range end="50" color="lightgray"></e-bullet-range>
        <e-bullet-range end="75" color="lightblue"></e-bullet-range>
        <e-bullet-range end="100" color="lightgreen"></e-bullet-range>
    </e-bullet-range-collection>
</ejs-bulletchart>

Common Patterns

Pattern 1: Dashboard with Multiple Bullet Charts

Display multiple metrics side-by-side for executive monitoring:

// Each metric has its own data and configuration
var salesData = new List<BulletChartData> { /* sales vs quota */ };
var revenueData = new List<BulletChartData> { /* revenue vs forecast */ };
var customerSatisfaction = new List<BulletChartData> { /* score vs target */ };

Pattern 2: Using Categories for Multiple Values

Display multiple categories in one chart:

<ejs-bulletchart id="container" 
    dataSource="@ViewBag.MultipleCategoryData"
    categoryField="Category"
    valueField="Value"
    targetField="Target">
</ejs-bulletchart>

Pattern 3: Range-Based Color Coding

Define ranges to automatically color-code performance levels:

<e-bullet-range-collection>
    <e-bullet-range end="25" color="#ff6b6b"></e-bullet-range>  <!-- Poor -->
    <e-bullet-range end="50" color="#ffd43b"></e-bullet-range>  <!-- Fair -->
    <e-bullet-range end="75" color="#69db7c"></e-bullet-range>  <!-- Good -->
    <e-bullet-range end="100" color="#51cf66"></e-bullet-range> <!-- Excellent -->
</e-bullet-range-collection>

Key Configuration Props

Events

Common Use Cases

Sales Dashboard:

• Track individual sales rep performance vs. quota
• Display quarterly revenue vs. forecast
• Monitor pipeline vs. targets

HR & Performance:

• Employee KPIs vs. goals
• Team productivity metrics
• Project milestone progress

Operations:

• System uptime vs. SLA targets
• Response time vs. acceptable levels
• Cost vs. budget

Retail:

• Store sales vs. targets
• Inventory turnover vs. goals
• Customer satisfaction vs. benchmarks