ASP.NET MVC Bullet Charts and Graphs - Beautiful and Interactive

Overview

The ASP.NET MVC Bullet Chart is used to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them to a target value. You can also display the measures in a range such as for poor, satisfactory, and good performance.

Customization

Configure the look and feel of the Bullet Chart to match your requirements using several built-in options.

• Customization documentation

Data binding

Bind data seamlessly with various local data sources, such as JSON.

• Data binding documentation

ASP.NET MVC Bullet Chart Code Example

Easily get started with the ASP.NET MVC Bullet Chart using a few simple lines of C# code as demonstrated below. Also explore our ASP.NET MVC Bullet Chart Example that shows you how to render and configure the Range Selector in ASP.NET MVC.

@(Html.EJS().BulletChart("container")
	.ValueField("value")
	.TargetField("target")
	.Minimum(0).Maximum(300).Interval(50)
	.DataSource(ViewBag.dataSource)
	.Render())

public ActionResult Index()
{
    List<BulletChartData> data = new List<BulletChartData>
    {
        new BulletChartData { value = 270, target = 250}
    };
    return View(data);
}

public class BulletChartData
{
    public double target;
    public double value;
}

Other supported frameworks

The Bullet Chart component is also available in Blazor, React, Angular, JavaScript and Vue frameworks. Check out the different Bullet Chart platforms from the links below,

• Blazor Bullet Chart

• React Bullet Chart

• Angular Bullet Chart

• JavaScript Bullet Chart

• Vue Bullet Chart

ASP.NET MVC Bullet Chart Code Example

Easily get started with the ASP.NET MVC Bullet Chart using a few simple lines of TSX code example as demonstrated below. Also explore our ASP.NET MVC Bullet Chart Example that shows you how to render and configure a Bullet Chart in ASP.NET MVC.

@(Html.EJS().BulletChart("container1")
  .Tooltip(tp => tp.Enable(true))
  .ValueField("value")
  .Width("700")
  .TargetField("target")
  .Animation(an => an.Enable(false))
  .Ranges(rn =>
    {
      rn.End(150).Add();
      rn.End(250).Add();
      rn.End(300).Add();
    })
    .Minimum(0).Maximum(300).Interval(50)
    .Title("Revenue")
    .LabelFormat("${value}K")
    .Subtitle("U.S. $")
    .TitlePosition(Syncfusion.EJ2.Charts.TextPosition.Left)
    .Orientation(Syncfusion.EJ2.Charts.OrientationType.Horizontal)
    .DataSource(ViewBag.dataSource1)
    .Load("load1")
    .Render()
)