Search results

Target Bar in ASP.NET MVC Bullet Chart control

15 Oct 2021 / 1 minute to read

The line marker that runs perpendicular to the orientation of the graph is known as the Comparative Measure and it is used as a target marker to compare against the feature measure value. This is also called as the Target Bar in the Bullet Chart. To display the target bar, the targetField should be mapped to the appropriate field from the datasource.

razor
target-bar.cs
Copied to clipboard
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate")
                        .TargetField("target")
                        .Ranges(rn =>
                        {
                            rn.End(35).Add();
                            rn.End(50).Add();
                            rn.End(100).Add();
                        })
                        .Minimum(0).Maximum(100).Interval(20)
                        .DataSource(ViewBag.dataSource)
                        .Render()
Copied to clipboard
public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 55, target = 75}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }

Target Bar in Bullet Chart

Types of Target Bar

The shape of the target bar can be customized using the targetTypes property and it supports Circle, Cross, and Rect shapes. The default type of the target bar is Rect.

razor
target-types.cs
Copied to clipboard
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate")
                        .TargetField("target")
                        .TargetTypes(["Circle"])
                        .Ranges(rn =>
                        {
                            rn.End(35).Add();
                            rn.End(50).Add();
                            rn.End(100).Add();
                        })
                        .Minimum(0).Maximum(100).Interval(20)
                        .DataSource(ViewBag.dataSource)
                        .Render()
Copied to clipboard
public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 55, target = 75}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }

Rectangle Target Bar with Bullet Chart

Target Bar Customization

The following properties can be used to customize the Target Bar.

  • targetColor - Specifies the fill color of Target Bar.
  • targetWidth - Specifies the width of Target Bar.
razor
target-color.cs
Copied to clipboard
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate")
                        .TargetField("target")
                        .TargetColor("red")
						.TargetWidth(15)
                        .Ranges(rn =>
                        {
                            rn.End(35).Add();
                            rn.End(50).Add();
                            rn.End(100).Add();
                        })
                        .Minimum(0).Maximum(100).Interval(20)
                        .DataSource(ViewBag.dataSource)
                        .Render()
Copied to clipboard
public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 55, target = 75}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }

Customizing Target Bar in Bullet Chart