The chart tooltip appears when you hover over a point in a series. By default the tooltip shows the values of the point and the name of the series. The tooltip appearance and customization are controlled by the ShieldChart.TooltipSettings object. It contains all properties related with the tooltip and the corresponding AxisMarkers. Since the tooltip is html element in order to show it properly you need to refer the shieldchart.css file where are placed all chart css styles.


The tooltip has two elements header text and point text. You can change them via the TooltipSettings.CustomHeaderText and TooltipSettings.CustomPointText:

<shield:ShieldChart runat="server" ID="ShieldChart1">
    <TooltipSettings CustomHeaderText="CustomHeaderText" 


Since ASP.NET ShieldChart is wrapper the CustomHeaderText and CustomPointText are evalled on the client so you can use client side templates in order to customize the header and point texts:

<shield:ShieldChart runat="server" ID="ShieldChart1">
    <TooltipSettings CustomHeaderText="CustomHeaderText" 
CustomPointText="{point.pointName} ©">


If you need more flexible customization of the tooltip you can use javascript function which returns the customized string by assigning its name to the PointClientCallbackFunction and HeaderClientCallbackFunction. For example:

<shield:ShieldChart ID="ShieldChart1" runat="server" Width="100%" Height="400px"
        OnTakeDataSource="ShieldChart1_TakeDataSource" CssClass="chart">
    <TooltipSettings PointClientCallbackFunction="formatTooltip"></TooltipSettings>
function formatTooltip(point, chart)
    return shield.format(
        'Start Budget: {point.high}EndBudget:{point.low}',
            point: point,
            color: point.low > 0 ? 'green' : 'red'

You can see these settings in action here.