You can customize the width, color, and size of minor and major tick lines using the
majorTickLines and
minorTickLines properties of the bullet-chart.
You can place major and minor ticks inside or outside the ranges using the tickPosition property of bullet-chart.
Axis Label Format
Axis numeric labels can be formatted by using the labelFormatproperty. Axis labels support all globalize formats. The following table describes the result of applying some commonly used label formats on numeric axis values.
@Html.EJS().BulletChart("container")
.Title("Sales Rate")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.Ranges(rn =>
{
rn.End(500).Add();
rn.End(1500).Add();
rn.End(2500).Add();
})
.Minimum(0).Maximum(2500).Interval(250)
.DataSource(ViewBag.dataSource)
.Render()public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 1500, target = 1300}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}The following ‘Table’ describes the result of applying some commonly used ‘Label’ formats on Numeric axis values.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
To separate groups of thousands, use the enableGroupSeparator property of bullet-chart.
You can also customize the axis label format using a placeholder like ${value}K, in which the value represents the axis label, e.g. $20K.
@Html.EJS().BulletChart("container")
.Title("Sales Rate")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.LabelFormat("${value}K")
.Ranges(rn =>
{
rn.End(500).Add();
rn.End(1500).Add();
rn.End(2500).Add();
})
.Minimum(0).Maximum(2500).Interval(250)
.DataSource(ViewBag.dataSource)
.Render()public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 1500, target = 1300}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}You can customize the axis labels inside or outside the bullet-chart using the labelPosition property.
To place an axis opposite to its original position,
set the opposedPosition property to true.
You can display the x axis label by mapping the categoryField from dataSource of a bullet-chart. It is a more efficient way to understand data.
@Html.EJS().BulletChart("container")
.Title("Sales Rate")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.CategoryField("category")
.Ranges(rn =>
{
rn.End(500).Add();
rn.End(1500).Add();
rn.End(2500).Add();
})
.Minimum(0).Maximum(2500).Interval(250)
.DataSource(ViewBag.dataSource)
.Render()public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 1500, target = 1300, category = "Product A" }
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
public string category;
}You can customize the category label by using the categoryLabelStyle property of the bullet-chart.
@Html.EJS().BulletChart("container")
.Title("Sales Rate")
.Tooltip(tp => tp.Enable(true))
.ValueField("value")
.TargetField("target")
.CategoryField("category")
.Ranges(rn =>
{
rn.End(500).Add();
rn.End(1500).Add();
rn.End(2500).Add();
})
.Minimum(0).Maximum(2500).Interval(250)
.DataSource(ViewBag.dataSource)
.Render()public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 1500, target = 1300, category = "Product A" }
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
public string category;
}