The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.
@Html.EJS().BulletChart("container")
.Title("Revenue")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.Width("600")
.Height("100")
.Ranges(rn =>
{
rn.End(100).Add();
rn.End(200).Add();
rn.End(300).Add();
})
.Minimum(0).Maximum(300).Interval(50)
.DataSource(ViewBag.dataSource)
.Render()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.
@Html.EJS().BulletChart("container")
.Title("Revenue")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.Width("600px")
.Height("100px")
.Ranges(rn =>
{
rn.End(100).Add();
rn.End(200).Add();
rn.End(300).Add();
})
.Minimum(0).Maximum(300).Interval(50)
.DataSource(ViewBag.dataSource)
.Render()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.
@Html.EJS().BulletChart("container")
.Title("Revenue")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.Width("80%")
.Height("90%")
.Ranges(rn =>
{
rn.End(100).Add();
rn.End(200).Add();
rn.End(300).Add();
})
.Minimum(0).Maximum(300).Interval(50)
.DataSource(ViewBag.dataSource)
.Render()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.