Ranges

20 Dec 20235 minutes 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.

<ejs-bulletchart id="bulletgraph" minimum="0" maximum="100" interval="20" categoryField="category" valueField="value" targetField="target" dataSource="ViewBag.dataSource">
        <e-bullet-range-collection>
            <e-bullet-range end="35"></e-bullet-range>
            <e-bullet-range end="50"></e-bullet-range>
            <e-bullet-range end="100"></e-bullet-range>
        </e-bullet-range-collection>
</ejs-bulletchart>
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;
        }

Ranges in Bullet Chart

Color customization

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

<ejs-bulletchart id="bulletgraph" height="400" title="Sales Rate" categoryField="category" minimum="0" maximum="100" interval="10" valueField="value" targetField="target" dataSource="ViewBag.dataSource">
        <e-bullet-range-collection>
            <e-bullet-range end="35" color="darkred" opacity="0.5"></e-bullet-range>
            <e-bullet-range end="50" color="red" opacity="1"></e-bullet-range>
            <e-bullet-range end="75" color="blue" opacity="0.7"></e-bullet-range>
            <e-bullet-range end="90" color="lightgreen" opacity="1"></e-bullet-range>
            <e-bullet-range end="100" color="green" opacity="1"></e-bullet-range>
        </e-bullet-range-collection>
</ejs-bulletchart>
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;
        }

Customizing Ranges with Color in Bullet Chart