Annotations in Vue Linear gauge component

11 Jun 202413 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 e-annotation. 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.

<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge ref='lineargauge' style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' :axisValue=50>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<style>
  #control-container {
    padding: 0px !important;
  }
</style>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AnnotationDirective as EAnnotation, AnnotationsDirective as EAnnotations } from "@syncfusion/ej2-vue-lineargauge";

const zindex = 1;
const contentTemplate = '<div id="first"><h1>Gauge</h1></div>';
provide('lineargauge',  [Annotations]);

</script>

Customization

The following properties are used to customize the annotation.

  • zIndex - Bring the annotation to the front or back, when annotation overlaps with another element.
  • axisValue - To place the annotation in the specified axis value with respect to the provided axis index.
  • axisIndex - To place the annotation in the specified axis with respect to the provided axis value.
  • horizontalAlignment - To place the annotation horizontally.
  • verticalAlignment - To place the annotation vertically.
  • x, y - 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 e-annotation can be used.

<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Center' verticalAlignment='Center'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AnnotationsDirective as EAnnotations, AnnotationDirective as EAnnotation } from "@syncfusion/ej2-vue-lineargauge";

const contentTemplate = '<div id="first"><h1>Gauge</h1></div>';
const zindex = 1;

provide('lineargauge',  [Annotations]);

</script>
<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Center' verticalAlignment='Center'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Annotations, AnnotationDirective, AnnotationsDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective
},
  data:function(){
    return{
      zindex: 1,
      contentTemplate: '<div id="first"><h1>Gauge</h1></div>',
    }
  },
  provide: {
    lineargauge: [Annotations]
  },
};
</script>

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 e-annotation.

<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' x=100 y=100>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AnnotationsDirective as EAnnotations, AnnotationDirective as EAnnotation } from "@syncfusion/ej2-vue-lineargauge";

const contentTemplate = '<div id="first"><h1>Gauge</h1></div>';
const zindex = 1;

provide('lineargauge',  [Annotations]);

</script>
<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' x=100 y=100>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Annotations, AnnotationDirective, AnnotationsDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective
},
  data:function() {
    return{
      zindex: 1,
      contentTemplate: '<div id="first"><h1>Gauge</h1></div>',
    }
  },
  provide: {
    lineargauge: [Annotations]
  },
};
</script>

Alignment of annotation

The annotation can be aligned horizontally and vertically by using the 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 e-annotation.

<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Center' verticalAlignment='Center'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AnnotationsDirective as EAnnotations, AnnotationDirective as EAnnotation } from "@syncfusion/ej2-vue-lineargauge";

const contentTemplate = '<div id="first"><h1>Gauge</h1></div>';
const zindex = 1;

provide('lineargauge',  [Annotations]);

</script>
<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Center' verticalAlignment='Center'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Annotations, AnnotationDirective, AnnotationsDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective
},
  data:function() {
    return {
      zindex: 1,
      contentTemplate: '<div id="first"><h1>Gauge</h1></div>',
    }
  },
  provide: {
    lineargauge: [Annotations]
  },
};
</script>

Multiple annotations

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

<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Near' verticalAlignment='Center' :x='x1' :y='y1'>
          </e-annotation>
          <e-annotation :content='contentTemplate1' :zIndex='zindex' verticalAlignment='Center' :x='x2' :y='y2'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations } from "@syncfusion/ej2-vue-lineargauge";

const contentTemplate = '<div><h1 style="color:red;">Speed</h1></div>';
const contentTemplate1 = '<div><h1 style="color:blue;">Meter</h1></div>';
const zindex = 1;
const x1 = 290;
const y1 = 250;
const x2 = 10;
const y2 = -190;

provide('lineargauge',  [Annotations]);

</script>
<template>
  <div class="control-section">
    <div align='center'>
      <ejs-lineargauge style='display:block' align='center'>
        <e-annotations>
          <e-annotation :content='contentTemplate' :zIndex='zindex' horizontalAlignment='Near' verticalAlignment='Center' :x='x1' :y='y1'>
          </e-annotation>
          <e-annotation :content='contentTemplate1' :zIndex='zindex' verticalAlignment='Center' :x='x2' :y='y2'>
          </e-annotation>
        </e-annotations>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Annotations, AnnotationDirective, AnnotationsDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective,
},
  data:function() {
    return {
      zindex: 1,
      contentTemplate: '<div><h1 style="color:red;">Speed</h1></div>',
      contentTemplate1: '<div><h1 style="color:blue;">Meter</h1></div>',
      x1:290,
      y1:250,
      x2:10,
      y2:-190,
    }
  },
  provide: {
    lineargauge: [Annotations]
  },
};
</script>