👁 Image
Syncfusion.Blazor.BulletChart 33.2.13

Syncfusion® Blazor Bullet Chart Component

The Blazor Bullet Chart Component is a lightweight charting component that compares performance measures against targets and displays them across multiple ranges. Ideal for KPI dashboards and performance evaluation scenarios.

👁 Blazor BulletChart

Key features

• Comparative Performance Visualization – Visually compare performance metrics against target values
• Multiple Ranges – Display performance across multiple qualitative ranges (e.g., poor, satisfactory, good) with customizable colors and opacity
• Multiple Scales – Support for multiple scales and axes for detailed analysis
• Data Labels – Show actual values on the chart with customizable styling (color, font, opacity)
• Tooltip Support – Interactive tooltips to display detailed information on hover
• Axis Customization – Customize axis labels, ticks, and scale properties for enhanced readability
• Flexible Orientation – Support for both horizontal and vertical orientations
• Customizable Appearance – Extensive styling options including themes, colors, and dimensions
• Responsive Design – Adaptive layout that works seamlessly across different screen sizes and devices
• Accessibility Compliant – WCAG 2.2, Section 508, ADA compliant with keyboard navigation and screen reader support
• Print Support – Built-in print functionality (Ctrl + P)
• Export Functionality – Export charts to images and PDF formats
• Built-in Themes – Customizable themes and styling options
• RTL Support – Right-to-left rendering for internationalization

Add script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor BulletChart component to your Razor page.

<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50" Title="Revenue">
 <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
 <BulletChartRangeCollection>
 <BulletChartRange End=150> </BulletChartRange>
 <BulletChartRange End=250></BulletChartRange>
 <BulletChartRange End=300></BulletChartRange>
 </BulletChartRangeCollection>
</SfBulletChart>

@code{
 public class ChartData
 {
 public double FieldValue { get; set; }
 public double TargetValue { get; set; }
 }
 public List<ChartData> BulletChartData = new List<ChartData>
 {
 new ChartData { FieldValue = 270, TargetValue = 250 }
 };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• API Reference
• Feature Overview
• Live Demos

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• start a free 30-day trial.

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET