Search results

Customization in ASP.NET Core Bullet Chart control

Bullet Chart can be rendered in different mode as Horizontal or vertical by using orientation property of the bullet-chart. By default bullet-chart rendered in horizontal mode.

tagHelper
orientation.cs
<ejs-bulletchart id="bulletgraph" width="20%" orientation="@Syncfusion.EJ2.Charts.OrientationType.Vertical" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" 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}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }

Flow Direction

Using enableRtl boolean property of the bullet-chart, you can render bullet-chart in right to left or left to right direction.

tagHelper
right-to-left.cs
<ejs-bulletchart id="bulletgraph" enableRtl="true" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" 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}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }

Animation

By setting animation property value as true, you can enable the linear animation of the feature and target bars.

tagHelper
animation.cs
<ejs-bulletchart id="bulletgraph" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" 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>
        <e-bulletchart-animation enable="true"></e-bulletchart-animation>
</ejs-bulletchart>
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;
        }

Theme

Bullet chart also support different types of themes. Using theme property of the bullet-chart, you can customize the theme styles.

tagHelper
theme.cs
<ejs-bulletchart id="bulletgraph" theme="HighContrast" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" 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}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }