Tool tip in EJ2 JavaScript Bullet chart control

18 Dec 202315 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 enablethe property to ‘True’ and by injecting BulletTooltip module using BulletChart.Inject(BulletTooltip).The ‘Tooltip’ is visible in the ‘Bullet chart’ by default.
The tooltip is not visible by default. To make it visible, set the enable property in the tooltip to true and injecting BulletTooltip module using BulletChart.Inject(BulletTooltip).

var localData = [
       {
            value: 5, comparativeMeasureValue: 7.5,
            category: '2001'
        },
        {
            value: 7, comparativeMeasureValue: 5,
            category: '2002'
        },
        {
            value: 10, comparativeMeasureValue: 6,
            category: '2003'
        },
        {
            value: 5, comparativeMeasureValue: 8,
            category: '2004'
        },
        {
            value: 12, comparativeMeasureValue: 5,
            category: '2005'
        },
        {
            value: 8, comparativeMeasureValue: 6,
            category: '2006'
        }
    ];
var chart = new ej.charts.BulletChart({
        dataSource: localData,
        animation: { enable: false },
        valueField: 'value',
        targetField: 'comparativeMeasureValue',
        title: 'Profit in %',
        height: '400',
        ranges: [{ end: 5 },
            { end: 15 },
            { end: 20 }
        ],
        minimum: 0, maximum: 20, interval: 5,
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script id="Tooltip" type="text/x-template">
        <div id="wrap">
             <table style="width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px">
                 <tr>
                     <td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Sales</td>
                     </tr>
                     <tr>
                     <td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target   : ${target}K </td>
                     </tr>
                     <tr>
                         <td style="padding-left: 5px; color:black; padding-right: 5px">Current : ${value}K </td>
                     </tr>
                     
             </table>
        </div>
     </script>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

var chart = new ej.charts.BulletChart({
        height: '110px',
        tooltip: { enable: true, template : '#Tooltip' },
        dataSource: [{ value: 70, target: 50 }],
        valueField: 'value',
        targetField: 'target',
        animation: { enable: false },
        ranges: [{ end: 30, color: '#599C20' },
        { end: 60, color: '#EFC820' },
        { end: 100, color: '#CA4218' }
        ],
        minimum: 0, maximum: 100, interval: 10,
        title: 'Revenue YTD',
        labelFormat: '${value}K',
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script id="Tooltip" type="text/x-template">
        <div id="wrap">
             <table style="width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px">
                 <tr>
                     <td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Sales</td>
                     </tr>
                     <tr>
                     <td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target   : ${target}K </td>
                     </tr>
                     <tr>
                         <td style="padding-left: 5px; color:black; padding-right: 5px">Current : ${value}K </td>
                     </tr>
                     
             </table>
        </div>
     </script>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customization of the appearance of 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.

The following properties can be used to customize the Bullet Chart tooltip.

  • 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.
var piechart = new ej.charts.AccumulationChart({
    series: [
        {
            dataSource: [   { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
            { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
            { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
            { x: 'Samsung Internet', y: 2.7, text:  'Samsung Internet: 2.7%' },
            { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
            { x: 'Others', y: 3.6, text:  'Others: 3.6%' }],
            innerRadius: '65%',
            xName: 'x',
            yName: 'y'
        }
    ],
    centerLabel:{
        text : 'Mobile<br>Browsers<br>Statistics',
        textStyle: {
            fontWeight: 600
        }
    }
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>