ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Data Labels in ASP.NET Core Bullet Chart control

Data label can be added to a bullet-chart feature bars by enabling the enable option in the dataLabel. By default,the labels will arrange smartly without overlapping.

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;
        }

Customization

By using labelStyle property in data label, you can customize the color, size and font.

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;
        }
Previous
Next