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.
<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;
}Using enableRtl boolean property of the bullet-chart, you can render bullet-chart in right to left or left to right direction.
<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;
}By setting animation property value as true, you can enable the linear animation of the feature and target bars.
<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;
}Bullet chart also support different types of themes. Using theme property of the bullet-chart, you can customize the theme styles.
<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;
}