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