JavaScript (ES5)
Demos
Support
Forum
Download
Search results

User Interaction

Tooltip

Linear gauge will display the details about the pointer value through tooltip, when the mouse is moved over the pointer. By default, tooltip will not be visible and you can enable the tooltip by setting enable property to true and by injecting GaugeTooltip module using LinearGauge.Inject(GaugeTooltip).

Note: To use tooltip, we need to refer the gauge CSS file in our web page. Tooltip CSS files are available in the ej2-lineargauge package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

@import '../../node_modules/@syncfusion/ej2-lineargauge/styles/material.css';
Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
 tooltip: {
       enable: true
   },
   axes: [{
            pointers: [{
                value: 80
            }]
        }]
}, '#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">
    <link href="//cdn.syncfusion.com/ej2/ej2-lineargauge/styles/material.css" rel="stylesheet">
    <script src="../../lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


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

Format the Tooltip

By default, tooltip will show the pointer value only. In addition to that, you can show more information in tooltip. For example, the format ${value} shows pointer value with currency symbol.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
tooltip: {
       enable: true,
       format: '${value}'
   },
   axes: [{
            pointers: [{
                value: 80
            }]
        }]
}, '#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">
    <link href="//cdn.syncfusion.com/ej2/ej2-lineargauge/styles/material.css" rel="stylesheet">
    <script src="../../lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </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 {value} as placeholders in the HTML element to display the pointer values of the corresponding axis.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
 tooltip: {
            enable: true,
            //tooltip template for Linear gauge
            template: '<div>Pointer: 80 </div>'
        },
        axes: [{
            pointers: [{
                value: 80
            }]
        }]
}, '#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">
    <link href="//cdn.syncfusion.com/ej2/ej2-lineargauge/styles/material.css" rel="stylesheet">
    <script src="../../lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


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

Customize 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.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
tooltip: {
            enable: true,
            fill: '#e5bcbc',
            border: {
                color: '#d80000',
                width: 2
            }
        },
        axes: [{
            pointers: [{
                value: 80
            }]
        }]
}, '#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">
    <link href="//cdn.syncfusion.com/ej2/ej2-lineargauge/styles/material.css" rel="stylesheet">
    <script src="../../lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


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

Pointer Drag

You can drag and drop either marker or bar pointer over the desired axis value using enableDrag property in the pointer.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
  axes: [{
        pointers: [{
            value: 80,
            enableDrag: true
        }]
    }]
}, '#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">
    <link href="//cdn.syncfusion.com/ej2/ej2-lineargauge/styles/material.css" rel="stylesheet">
    <script src="../../lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


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