Search results

Annotations in JavaScript Linear Gauge control

03 Aug 2021 / 3 minutes to read

Annotations are used to mark the specific area of interest in the Linear Gauge with text, HTML elements, or images. Any number of annotations can be added to the Linear Gauge component.

Adding annotation

To render the custom HTML elements in the Linear Gauge component, use the content property in the annotations. The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area.

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

Customization

The following properties are used to customize the annotation.

  • zIndex - This property is used to bring the annotation to the front or back, when annotation overlaps with another element.
  • axisValue - This property is used to place the annotation in the specified axis value with respect to the provided axis index.
  • axisIndex - This property is used to place the annotation in the specified axis with respect to the provided axis value.
  • horizontalAlignment - This property is used to place the annotation horizontally.
  • verticalAlignment - This property is used to place the annotation vertically.
  • x, y - This property is used to place the annotation in the specified location.

Changing the z-index

To change the stack order of an annotation element, the zIndex property of the annotations can be used.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations);
let gauge: LinearGauge = new LinearGauge({
 annotations: [{
   content: '<div id="first"><h1>Gauge</h1></div>',
   verticalAlignment: 'Center',
   horizontalAlignment: 'Center',
   zIndex: '1'
}]
}, '#element');
Copied to clipboard
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Positioning an annotation

The annotation can be placed anywhere in the Linear Gauge by setting the pixel value to the x and y properties in the annotations.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations);
let gauge: LinearGauge = new LinearGauge({
annotations: [{
    content: '<div id="first"><h1>Gauge</h1></div>',
    x: 100,
    y: 100,
    zIndex: '1'
}]
}, '#element');
Copied to clipboard
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Alignment of annotation

The annotation can be aligned horizontally and vertically by using horizontalAlignment and verticalAlignment properties respectively. The possible values can be ”Center”, ”Far”, ”Near”, and ”None”. The horizontalAlignment and verticalAlignment properties are not applicable when the x and y properties are set in the annotations.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations);
let gauge: LinearGauge = new LinearGauge({
annotations: [{
   content: '<div id="first"><h1>Gauge</h1></div>',
   verticalAlignment: 'Center',
   horizontalAlignment: 'Center',
   zIndex: '1'
}]
}, '#element');
Copied to clipboard
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Multiple annotations

Multiple annotations can be added to the Linear Gauge component by adding the multiple annotation objects in the annotations and customization for the annotation can be done with the annotation object.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations);
let gauge: LinearGauge = new LinearGauge({
  annotations: [
        {
            content: '<div><h1 style="color:red;">Speed</h1></div>',
            verticalAlignment: 'Near',
            horizontalAlignment: 'Center',
            x: 100,
            y: 150,
            zIndex: '1'
        },
        {
            content: '<div><h1 style="color:blue;">Meter</h1></div>',
            verticalAlignment: 'Center',
            horizontalAlignment: 'Center',
            x: -100,
            y: -100,
            zIndex: '1'
        }]
}, '#element');
Copied to clipboard
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>