The bullet chart can be rendered to its container’s size. You can set the size using inline or CSS as shown below.
<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;
}You can also set the size for bullet chart directly using the width and height properties.
You can set the size of a 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;
}Note: When you do not specify the size, it takes 126px as its height and window size as its width.