Search results

Customization in ASP.NET MVC 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.

razor
orientation.cs
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate in dollars")
                        .Subtitle("(in dollars $)")
                        .LabelFormat("${value}")
                        .TargetField("target")
                        .ValueField("value")
                        .Width("20%")
                        .Orientation(Syncfusion.EJ2.Charts.OrientationType.Vertical)
                        .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}     
            };
            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.

razor
right-to-left.cs
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate in dollars")
                        .Subtitle("(in dollars $)")
                        .LabelFormat("${value}")
                        .TargetField("target")
                        .ValueField("value")
                        .EnableRtl(true)
                        .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}     
            };
            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.

razor
animation.cs
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate in dollars")
                        .Subtitle("(in dollars $)")
                        .LabelFormat("${value}")
                        .TargetField("target")
                        .ValueField("value")
                        .Animation(an => an.Enable(true))
                        .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}     
            };
            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.

razor
theme.cs
@Html.EJS().BulletChart("container")
                        .Title("Sales Rate in dollars")
                        .Subtitle("(in dollars $)")
                        .LabelFormat("${value}")
                        .TargetField("target")
                        .ValueField("value")
                        .Theme("HighContrast")
                        .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}     
            };
            ViewBag.dataSource = bulletData;
            return View();
        }
        public class DefaultBulletData
        {           
            public double value;
            public double target;
        }