Events in Vue Linear gauge component

25 May 202424 minutes to read

This section describes the Linear Gauge component’s event that gets triggered when corresponding operations are performed.

animationComplete

When the pointer animation is completed, the animationComplete event will be triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :animationComplete='animationComplete'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxisDirective as EAxis, AxesDirective as EAxes } from "@syncfusion/ej2-vue-lineargauge";

const animationComplete = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :animationComplete='animationComplete'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    animationComplete: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

annotationRender

Before the annotation is rendered in the Linear Gauge, the annotationRender event will be triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :annotationRender='annotationRender'>
        <e-annotations>
            <e-annotation :content='contentTemplate' :zIndex='zindex' :axisValue='axisValue'>
            </e-annotation>
        </e-annotations>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AxisDirective as EAxis, AxesDirective as EAxes,
  PointersDirective as EPointers, PointerDirective as EPointer, AnnotationDirective as EAnnotation, AnnotationsDirective as EAnnotations } from "@syncfusion/ej2-vue-lineargauge";

const zindex = 1;
const contentTemplate = '10';
const axisValue = 0;

const annotationRender = () => {
};

provide('lineargauge',  [Annotations]);

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :annotationRender='annotationRender'>
        <e-annotations>
            <e-annotation :content='contentTemplate' :zIndex='zindex' :axisValue='axisValue'>
            </e-annotation>
        </e-annotations>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=10></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

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

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  data:function(){
    return{
        zindex: 1,
        contentTemplate : '10',
        axisValue: 0
    }
  },
  methods: {
    annotationRender: function () {
    }
  },
  provide: {
    lineargauge: [Annotations]
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

axisLabelRender

Before each axis label is rendered in the Linear Gauge, the axisLabelRender event is fired. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :axisLabelRender='axisLabelRender'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis, PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const axisLabelRender = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :axisLabelRender='axisLabelRender'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    axisLabelRender: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

beforePrint

The beforePrint event is fired before the print begins. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="print">Print</button>
      <ejs-lineargauge id="container" ref='gauge' :allowPrint='allowPrint' :beforePrint='beforePrint'>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";

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

const gauge = ref(null);
const allowPrint = true;

const beforePrint = () => {
};

const print = () => {
  gauge.value.ej2Instances.print();
};

provide('lineargauge',  [Print]);

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <button v-on:click="print">Print</button>
      <ejs-lineargauge id="container" ref='gauge' :allowPrint='allowPrint' :beforePrint='beforePrint'>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, Print } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
},
  data () {
    return {
      allowPrint: true
    }
  },
  methods: {
    beforePrint: function () {
    },
    print: function () {
      this.$refs.gauge.ej2Instances.print();
    }
  },
  provide: {
    lineargauge: [Print]
  }
};
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

dragEnd

The dragEnd event will be fired before the pointer drag is completed. To know more about the argument of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragEnd='dragEnd'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointersDirective as EPointers, PointerDirective as EPointer} from "@syncfusion/ej2-vue-lineargauge";

const dragEnd = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragEnd='dragEnd'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    dragEnd: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

dragMove

The dragMove event will be fired when the pointer is dragged. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragMove='dragMove'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxisDirective as EAxis, AxesDirective as EAxes, PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const dragMove = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragMove='dragMove'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    dragMove: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

dragStart

When the pointer drag begins, the dragStart event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragStart='dragStart'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis, PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const dragStart = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :dragStart='dragStart'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer enableDrag=true></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    dragStart: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

gaugeMouseDown

When mouse is pressed down on the gauge, the gaugeMouseDown event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseDown='gaugeMouseDown'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxisDirective as EAxis,
  AxesDirective as EAxes, PointersDirective as EPointers, PointerDirective as EPointer } from "@syncfusion/ej2-vue-lineargauge";

const gaugeMouseDown = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseDown='gaugeMouseDown'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LineargaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    gaugeMouseDown: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

gaugeMouseLeave

When mouse pointer moves over the gauge, the gaugemouseleave event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseLeave='gaugeMouseLeave'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const gaugeMouseLeave = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseLeave='gaugeMouseLeave'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    gaugeMouseLeave: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

gaugeMouseMove

When mouse pointer leaves the gauge, the gaugeMouseMove event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseMove='gaugeMouseMove'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const gaugeMouseMove = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseMove='gaugeMouseMove'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    gaugeMouseMove: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

gaugeMouseUp

When the mouse pointer is released over the Linear Gauge, the gaugeMouseUp event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseUp='gaugeMouseUp'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const gaugeMouseUp = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :gaugeMouseUp='gaugeMouseUp'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    gaugeMouseUp: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

load

Before the Linear Gauge is loaded, the load event is fired. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :load='load'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const load = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :load='load'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    load: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

loaded

After the Linear Gauge has been loaded, the loaded event will be triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :loaded='loaded'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, PointerDirective as EPointer, PointersDirective as EPointers,
  AxesDirective as EAxes, AxisDirective as EAxis } from "@syncfusion/ej2-vue-lineargauge";

const loaded = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :loaded='loaded'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    loaded: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

resized

After the window resizing, the resized event is triggered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :resized='resized'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const resized = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :resized='resized'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    resized: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

tooltipRender

The tooltipRender event is fired before the tooltip is rendered. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :tooltip='tooltip' :tooltipRender='tooltipRender'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, GaugeTooltip, PointerDirective as EPointer, PointersDirective as EPointers,
  AxisDirective as EAxis, AxesDirective as EAxes } from "@syncfusion/ej2-vue-lineargauge";

const tooltip = {
  enable: true,
};

const tooltipRender = () => {
};

provide('lineargauge',  [GaugeTooltip]);

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :tooltip='tooltip' :tooltipRender='tooltipRender'>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, GaugeTooltip, AxisDirective, AxesDirective, PointerDirective, PointersDirective  } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective,
},
  data:function(){
    return {
      tooltip: {
        enable: true,
      }
    }
  },
  methods: {
    tooltipRender: function () {
    }
  },
  provide: {
    lineargauge: [GaugeTooltip]
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

valueChange

The valueChange event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer here.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :valueChange='valueChange'>
        <e-axes>
          <e-axis>
            <e-pointers enableDrag=true>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>

import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
  PointerDirective as EPointer, PointersDirective as EPointers } from "@syncfusion/ej2-vue-lineargauge";

const valueChange = () => {
};

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :valueChange='valueChange'>
        <e-axes>
          <e-axis>
            <e-pointers enableDrag=true>
              <e-pointer></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

import { LinearGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective } from "@syncfusion/ej2-vue-lineargauge";

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective
},
  methods: {
    valueChange: function () {
    }
  }
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>