Data Labels in ASP.NET Core Bullet Chart control

21 Oct 2021 / 1 minute to read

Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the dataLabel setting’s enable property to true.

tagHelper

data-label.cs

<ejs-bulletchart id="bulletgraph" height="400" title="Profit in %" minimum="0" maximum="20" interval="5" categoryField="category" valueField="value" targetField="comparativeMeasureValue" dataSource="ViewBag.dataSource">
        <e-bullet-range-collection>
            <e-bullet-range end="5"></e-bullet-range>
            <e-bullet-range end="15"></e-bullet-range>
            <e-bullet-range end="20"></e-bullet-range>
        </e-bullet-range-collection>
        <e-bulletchart-datalabel enable="true"></e-bulletchart-datalabel>
</ejs-bulletchart>

public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 5, comparativeMeasureValue = 7.5, category= "2001"},
                new DefaultBulletData { value = 7, comparativeMeasureValue = 5, category= "2002"},
                new DefaultBulletData { value = 10, comparativeMeasureValue = 6, category= "2003"},
                new DefaultBulletData { value = 5, comparativeMeasureValue = 8, category= "2004"},
                new DefaultBulletData { value = 12, comparativeMeasureValue = 5, category= "2005"},
                new DefaultBulletData { value = 8, comparativeMeasureValue = 6, category= "2006"}
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double comparativeMeasureValue;
            public string category;
        }

Data Label Customization

Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the labelStyle.

tagHelper

data-label-custom.cs

<ejs-bulletchart id="bulletgraph" height="400" title="Profit in %" minimum="0" maximum="20" interval="5" categoryField="category" valueField="value" targetField="comparativeMeasureValue" dataSource="ViewBag.dataSource">
        <e-bullet-range-collection>
            <e-bullet-range end="5"></e-bullet-range>
            <e-bullet-range end="15"></e-bullet-range>
            <e-bullet-range end="20"></e-bullet-range>
        </e-bullet-range-collection>
        <e-bulletchart-datalabel enable="true">
            <e-bulletchart-labelstyle color="yellow" size="20"></e-bulletchart-labelstyle>
        </e-bulletchart-datalabel>
</ejs-bulletchart>

public IActionResult Index()
        {
            List<DefaultBulletData> bulletData = new List<DefaultBulletData>
            {
                new DefaultBulletData { value = 5, comparativeMeasureValue = 7.5, category= "2001"},
                new DefaultBulletData { value = 7, comparativeMeasureValue = 5, category= "2002"},
                new DefaultBulletData { value = 10, comparativeMeasureValue = 6, category= "2003"},
                new DefaultBulletData { value = 5, comparativeMeasureValue = 8, category= "2004"},
                new DefaultBulletData { value = 12, comparativeMeasureValue = 5, category= "2005"},
                new DefaultBulletData { value = 8, comparativeMeasureValue = 6, category= "2006"}
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double comparativeMeasureValue;
            public string category;
        }

Please provide additional information

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