Ranges in ASP.NET MVC Bullet Chart control

15 Oct 2021 / 1 minute to read

Ranges represent the quality of a specific range such as Good, Bad and Satisfactory in the Bullet Chart scale. The ending point of a qualitative range is specified in the end property in ranges. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point.

razor

ranges.cs

@Html.EJS().BulletChart("container")
                        .Title("Sales Rate")
                        .ValueField("value")
                        .TargetField("target")
                        .CategoryField("category")
                        .CategoryLabelStyle(cl =>
                        {
                            cl.Color("red).Size("13").FontWeight("Bold").Add();
                        })
                        .Ranges(rn =>
                        {
                            rn.End(35).Add();
                            rn.End(50).Add();
                            rn.End(100).Add();
                        })
                        .Minimum(0).Maximum(100).Interval(20)
                        .DataSource(ViewBag.dataSource)
                        .Render()

public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 55, target = 75, category = "Year 1"},
                new DefaultBulletData { value = 70, target = 70, category = "Year 2"},
                new DefaultBulletData { value = 85, target = 75, category = "Year 3"}
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
            public string category;
        }

Color Customization

Enhance the readability of ranges with color and opacity. It can be applied using the color and opacity properties in ranges.

razor

ranges-custom.cs

@Html.EJS().BulletChart("container")
                        .Title("Sales Rate")
                        .ValueField("value")
                        .TargetField("target")
                        .CategoryField("category")
                        .CategoryLabelStyle(cl =>
                        {
                            cl.Color("red).Size("13").FontWeight("Bold").Add();
                        })
                        .Ranges(rn =>
                        {
                            rn.End(35).Opacity(0.5).Color("darkred").Add();
                            rn.End(50).Opacity(1).Color("red").Add();
                            rn.End(75).Opacity(0.7).Color("blue").Add();
                            rn.End(90).Opacity(1).Color("lightgreen").Add();
                            rn.End(100).Opacity(0.8).Color("green").Add();
                        })
                        .Minimum(0).Maximum(100).Interval(20)
                        .DataSource(ViewBag.dataSource)
                        .Render()

public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 55, target = 75, category = "Year 1"},
                new DefaultBulletData { value = 70, target = 70, category = "Year 2"},
                new DefaultBulletData { value = 85, target = 75, category = "Year 3"}
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
            public string category;
        }

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!