Search results

Annotations

Annotations are used to mark the specific area of interest in the gauge area with texts, shapes or images. You can add any number of annotations to the gauge.

Annotation

By using the content property of annotation object, you can either specify the id of the element or specify the code to create a new element, that needs to be displayed in the gauge area.

<script id='fruits' type="text/x-template">
   <div id='apple'>
       <img src='src/lineargauge/images/apple.png'>
   </div>
</script>
import { LinearGauge, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations);
let gauge: LinearGauge = new LinearGauge({
    annotations: [{
        content: 'fruits',
        x: 100,
        y: 100
    }]
}, '#element');

Annotation Customization

Changing the z-order

You can change the z-order of the annotation element by using the zIndex property.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
 annotations: [{
       content: '<div id="first"><h1>Gauge</h1></div>',
       verticalAlignment: 'Center',
       horizontalAlignment: 'Center',
       zIndex: '-1'
    }]
}, '#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="//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>

Positioning the Annotation

You can place the annotation anywhere in gauge area by specifying pixel values to the x and y properties.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
  annotations: [{
        content: '<div id="first"><h1>Gauge</h1></div>',
        x: 100,
        y: 100
    }]
}, '#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="//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>

Alignment of Annotation

You can align the annotation using horizontalAlignment and verticalAlignment properties.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
 annotations: [{
       content: '<div id="first"><h1>Gauge</h1></div>',
       verticalAlignment: 'Center',
       horizontalAlignment: 'Center'
    }]
}, '#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="//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>

Multiple Annotations

You can add multiple annotations to the gauge as demonstrated below.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
  annotations: [
            {
                content: '<div id="first"><h1 style="color:red;">Speed</h1></div>',
                verticalAlignment: 'Near',
                horizontalAlignment: 'Center',
                x: 100,
                y: 150
            },
            {
                content: '<div id="first"><h1 style="color:blue;">Meter</h1></div>',
                verticalAlignment: 'Center',
                horizontalAlignment: 'Center',
                x: -100,
                y: -100
            }]
}, '#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="//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>