A title can be given to a bullet chart using the title property to show information about the data plotted.
<ejs-bulletchart id="bulletgraph" title="Sales Rate" minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}A subtitle can also be given to a bullet chart using the subtitle property to show additional information about the data plotted.
<ejs-bulletchart id="bulletgraph" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}You can place the title and subtitle in different positions. By using the titlePosition property of the bullet chart, you can place the title and subtitles in different positions like left, right, top, and bottom.
By setting the titlePosition to Left, you can display the title and subtitle at the left side of the chart.
<ejs-bulletchart id="bulletgraph" titlePosition="@Syncfusion.EJ2.Charts.TextPosition.Left" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}By setting the titlePosition to Right, you can display the title and subtitle at the right side of the chart.
<ejs-bulletchart id="bulletgraph" titlePosition="@Syncfusion.EJ2.Charts.TextPosition.Right" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}By setting the titlePosition to Top, you can display the title and subtitle at the top of the chart. The default title and subtitle positions of the bullet chart is Top.
<ejs-bulletchart id="bulletgraph" titlePosition="@Syncfusion.EJ2.Charts.TextPosition.Top" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}By setting the titlePosition to Bottom, you can display the title and subtitle at the bottom of the chart.
<ejs-bulletchart id="bulletgraph" titlePosition="@Syncfusion.EJ2.Charts.TextPosition.Bottom" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}You can customize the bullet chart title’s fontStyle, size, color, fontWeight, and fontFamily using the titleStyle property.
<ejs-bulletchart id="bulletgraph" title="Sales Rate" labelFormat="${value}" minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
<e-bulletchart-titlestyle size="22px" color="red" fontFamily="cursive" fontWeight="Bold"></e-bulletchart-titlestyle>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}You can customize the bullet chart subtitle’s fontStyle, size, color, fontWeight, and fontFamily using the subtitleStyle property.
<ejs-bulletchart id="bulletgraph" title="Sales Rate in dollars" subtitle="(in dollars $)" labelFormat="${value} minimum="0" maximum="100" interval="20" targetField="target" valueField="value" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="35"></e-bullet-range>
<e-bullet-range end="50"></e-bullet-range>
<e-bullet-range end="100"></e-bullet-range>
</e-bullet-range-collection>
<e-bulletchart-subtitlestyle size="22px" color="red" fontFamily="cursive" fontWeight="Bold"></e-bulletchart-subtitlestyle>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 55, target = 75}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double target;
}