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)
.
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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<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 using the format
property.
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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<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.
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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<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
fill
- Specifies fill color for tooltipborder
- Specifies tooltip border width and colortextStyle
- Specifies the tooltip text style, such as color, font family, font style and font weightvar 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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can drag and drop either marker or bar pointer over the desired axis value using enableDrag
property in the pointer
.
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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>