Customization in ASP.NET Core Bullet Chart control

12 Jan 2022 / 1 minute to read

Orientation

The Bullet Chart can be rendered in different orientations such as Horizontal or Vertical via the orientation property. By default, the Bullet Chart is rendered in the Horizontal orientation.

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

Right-to-left (RTL)

The Bullet Chart supports the right-to-left rendering that can be enabled by setting the enableRtl property to true.

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

The actual and the target bar supports the linear animation via the animation setting. The speed and the delay are controlled using the duration and delay properties respectively.

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

The Bullet Chart supports different type of themes via the theme property.

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

Contents

Orientation
Right-to-left RTL
Animation
Theme

Contents

Orientation
Right-to-left RTL
Animation
Theme