The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.
<ejs-bulletchart id="bulletgraph" width="600" height="100" minimum="0" maximum="300" interval="50" valueField="value" targetField="target" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="150"></e-bullet-range>
<e-bullet-range end="250"></e-bullet-range>
<e-bullet-range end="300"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 270, target = 250}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}The width and height properties are used to adjust the size of the Bullet Chart.
Can set the size of the Bullet Chart in pixels as shown below.
<ejs-bulletchart id="bulletgraph" width="600px" height="100px" minimum="0" maximum="300" interval="50" valueField="value" targetField="target" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="150"></e-bullet-range>
<e-bullet-range end="250"></e-bullet-range>
<e-bullet-range end="300"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 270, target = 250}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}By setting a value in percentage, the Bullet Chart gets its dimension with respect to its container. For example, when the height is 50%, the Bullet Chart renders to half of the container’s height.
<ejs-bulletchart id="bulletgraph" width="80%" height="90%" minimum="0" maximum="300" interval="50" valueField="value" targetField="target" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="150"></e-bullet-range>
<e-bullet-range end="250"></e-bullet-range>
<e-bullet-range end="300"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 270, target = 250}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.