Tooltip in Bullet Chart Control
24 Jun 20242 minutes to read
When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values.
Default tooltip
By setting Enable
property to true. By default tooltip is visible in bullet-chart. The tooltip is not visible by default. To make it visible, set the Enable
property in the Tooltip
to true.
@{
List<TooltipData> bulletData = new List<TooltipData>
{
new TooltipData { value = 5, comparativeMeasureValue = 7.5, category= "2001"},
new TooltipData { value = 7, comparativeMeasureValue = 5, category= "2002"},
new TooltipData { value = 10, comparativeMeasureValue = 6, category= "2003"},
new TooltipData { value = 5, comparativeMeasureValue = 8, category= "2004"},
new TooltipData { value = 12, comparativeMeasureValue = 5, category= "2005"},
new TooltipData { value = 8, comparativeMeasureValue = 6, category= "2006"}
};
}
<ejs-bulletchart id="bulletgraph" height="400" title="Profit in %" minimum="0" maximum="20" interval="5" categoryField="category" valueField="value" targetField="comparativeMeasureValue" dataSource="bulletData">
<e-bullet-range-collection>
<e-bullet-range end="5"></e-bullet-range>
<e-bullet-range end="15"></e-bullet-range>
<e-bullet-range end="20"></e-bullet-range>
</e-bullet-range-collection>
<e-bulletchart-tooltipsettings enable="true"></e-bulletchart-tooltipsettings>
</ejs-bulletchart>
...
public class TooltipData
{
public double value;
public double comparativeMeasureValue;
public string category;
}
Tooltip template
Any HTML elements can be displayed in the tooltip by using the Template
property of the Tooltip
. You can use the ${target} and ${value} as place holders in the HTML element to display the value and target values from the data source of corresponding data point.
Tooltip customization
The following properties can be used to customize the Bullet Chart tooltip.
The Fill
and Border
properties are used to customize the background color and border of the tooltip respectively. The TextStyle
property in the tooltip is used to customize the font of the tooltip text.
-
Fill
- Specifies the color of tooltip. -
Border
- Specifies the tooltip border color and width. -
TextStyle
- Specifies the tooltip font family, font style, font weight, color and size.