Pointers in Vue Linear gauge component

11 Jun 202424 minutes to read

Pointers are used to indicate values on an axis. The value of the pointer can be modified using the value property in e-pointer.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80></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";


</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80></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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Types of pointer

The Linear Gauge supports the following types of pointers:

  • Bar
  • Marker

The type of pointer can be modified by using the type property in e-pointer.

Marker pointer

A marker pointer is a shape that can be used to mark the pointer value in the Linear Gauge.

Types of marker shapes

By default, the marker shape for the pointer is InvertedTriangle. To change the shape of the pointer, use the markerType property in e-pointer. The following marker types are available in Linear Gauge.

  • Circle
  • Rectangle
  • Triangle
  • InvertedTriangle
  • Diamond
  • Image
  • Text
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80 type= 'Marker'  markerType= 'Circle'></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";

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80 type= 'Marker'  markerType= 'Circle'></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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the markerType property to Image and setting the source URL of image to imageUrl property in e-pointer.

<template>
    <div id="app">
        <div class='wrapper'>
           <ejs-lineargauge style='display:block' align='center' id='gauge' orientation="Horizontal">
            <e-axes>
                <e-axis  :majorTicks='majorTicks' :minorTicks='minorTicks' :labelStyle='labelStyle'>
                    <e-pointers>
                    <e-pointer :value='value' markerType="Image" imageUrl="https://ej2.syncfusion.com/vue/demos/src/linear-gauge/images/step-count.png" width="40" height="40" offset="-27"></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 majorTicks = {
    position:'Outside'
};
const minorTicks = {
    interval:20,
    position:'Outside'
};
const labelStyle = {
    font: {
        fontFamily: 'inherit'
    },
    position:'Outside'
};
const value = 60;

</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>
<template>
    <div id="app">
        <div class='wrapper'>
           <ejs-lineargauge style='display:block' align='center' id='gauge' orientation="Horizontal">
            <e-axes>
                <e-axis  :majorTicks='majorTicks' :minorTicks='minorTicks' :labelStyle='labelStyle'>
                    <e-pointers>
                    <e-pointer :value='value' markerType="Image" imageUrl="https://ej2.syncfusion.com/vue/demos/src/linear-gauge/images/step-count.png" width="40" height="40" offset="-27"></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
},
    data() {
        return {
            minorTicks: {
                position:'Outside'
            },
            majorTicks:{
              interval:20,
              position:'Outside'
            },
            labelStyle: {
                font: {
                    fontFamily: 'inherit'
                },
                position:'Outside'
            },
            value:60
        }
    }
}
</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>

Text can be added instead of rendering a shape as a pointer. It can be achieved by setting the markerType property to Text, and the text content can be set using the text property in e-pointer.

The following properties in the textStyle property can be used to set the text style for the text pointer.

  • fontFamily - It is used to set the font family for the text pointer.
  • fontStyle - It is used to set the font style for the text pointer.
  • fontWeight - It is used to set the font weight for the text pointer.
  • size - It is used to set the font size for the text pointer.
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-lineargauge
        minimum="0"
        maximum="100"
        style="display: block"
        align="center"
        id="defaultContainer5"
        :orientation="orientation"
      >
        <e-axes>
          <e-axis
            :majorTicks="majorTicks5"
            :minorTicks="minorTicks5"
            :line="line"
            :ranges="range"
            :labelStyle="labelStyle"
          >
            <e-pointers>
              <e-pointer
                :value="pointerValueOne"
                markerType="Text"
                text="Low"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></e-pointer>
              <e-pointer
                :value="pointerValueTwo"
                markerType="Text"
                text="Moderate"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></e-pointer>
              <e-pointer
                :value="pointerValueThree"
                markerType="Text"
                text="High"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></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 pointerValueOne = 13;
const pointerValueTwo = 48;
const pointerValueThree = 83;
const orientation = 'Horizontal';
const textStyle = {
size: '18px',
fontWeight: 'bold',
};
const majorTicks5 = {
interval: 20,
height: 7,
width: 1,
position: 'Outside',
};
const minorTicks5 = {
interval: 10,
height: 3,
position: 'Outside',
};
const labelStyle = { font: { fontFamily: 'inherit' }, position: 'Outside' };
const line = { width: 0 };
const range = [
{
start: 0,
end: 30,
color: '#FB7D55',
startWidth: 50,
endWidth: 50,
},
{
start: 30,
end: 65,
color: '#ECC85B',
startWidth: 50,
endWidth: 50,
},
{
start: 65,
end: 100,
color: '#6FC78A',
startWidth: 50,
endWidth: 50,
},
];

</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-lineargauge
        minimum="0"
        maximum="100"
        style="display: block"
        align="center"
        id="defaultContainer5"
        :orientation="orientation"
      >
        <e-axes>
          <e-axis
            :majorTicks="majorTicks5"
            :minorTicks="minorTicks5"
            :line="line"
            :ranges="range"
            :labelStyle="labelStyle"
          >
            <e-pointers>
              <e-pointer
                :value="pointerValueOne"
                markerType="Text"
                text="Low"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></e-pointer>
              <e-pointer
                :value="pointerValueTwo"
                markerType="Text"
                text="Moderate"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></e-pointer>
              <e-pointer
                :value="pointerValueThree"
                markerType="Text"
                text="High"
                color="black"
                :textStyle="textStyle"
                offset="-30"
              ></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
},
    data() {
        return {
            pointerValueOne: 13,
      pointerValueTwo: 48,
      pointerValueThree: 83,
      orientation: 'Horizontal',
      textStyle: {
        size: '18px',
        fontWeight: 'bold',
      },
      majorTicks5: {
        interval: 20,
        height: 7,
        width: 1,
        position: 'Outside',
      },
      minorTicks5: {
        interval: 10,
        height: 3,
        position: 'Outside',
      },
      labelStyle: { font: { fontFamily: 'inherit' }, position: 'Outside' },
      line: { width: 0 },
      range: [
        {
          start: 0,
          end: 30,
          color: '#FB7D55',
          startWidth: 50,
          endWidth: 50,
        },
        {
          start: 30,
          end: 65,
          color: '#ECC85B',
          startWidth: 50,
          endWidth: 50,
        },
        {
          start: 65,
          end: 100,
          color: '#6FC78A',
          startWidth: 50,
          endWidth: 50,
        },
      ],
        }
    }
}
</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>

Marker Pointer Customization

The marker pointer can be customized using the following properties.

  • height - To set the height of the pointer.
  • position - The position of the pointer can be changed by setting the value as Inside, Outside, Cross, or Auto.
  • width - To set the width of the pointer.
  • color - To set the color of the pointer.
  • placement - To place the pointer in the specified position. By default, the pointer is placed Far from the axis. To change the placement, set the placement property as Near, Center, or None.
  • offset - To place the pointer with specified distance from the axis.
  • opacity - To set the opacity of the pointer.
  • animationDuration - To specify the duration of the animation in pointer.
  • border - To set the color and width for the border of the pointer.
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=60 type= 'Marker' markerType= 'Circle' :height= 15 :width=15 position="Outside" color="#cd41f4"></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";

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=60 type= 'Marker' markerType= 'Circle' :height= 15 :width=15 position="Outside" color="#cd41f4"></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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Bar Pointer

The bar pointer is used to track the axis value. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer, set the type property in e-pointer as Bar.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=60 type= 'Bar'></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";

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

import { LinearGaugeComponent } 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,
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Bar pointer customization

The bar pointer can be customized using the following properties.

  • width - To set the thickness of the bar pointer.
  • color - To set the color of the bar pointer.
  • offset - To place the bar pointer with the specified distance from it’s default position.
  • opacity - To set the opacity of the bar pointer.
  • roundedCornerRadius - To set the corner radius for the bar pointer.
  • border - To set the color and width for the border of the pointer.
  • animationDuration - To set the duration of the animation in bar pointer.

The placement property is not applicable for the bar pointer.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80 type= 'Bar' color= '#f44141'></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";

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

import { LinearGaugeComponent } 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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Multiple pointers

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

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge >
        <e-axes>
          <e-axis >
            <e-pointers>
              <e-pointer value=80></e-pointer>
              <e-pointer value=30 markerType= 'Diamond'></e-pointer>
              <e-pointer value=50 markerType= 'Circle'></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";

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge >
        <e-axes>
          <e-axis >
            <e-pointers>
              <e-pointer value=80></e-pointer>
              <e-pointer value=30 markerType= 'Diamond'></e-pointer>
              <e-pointer value=50 markerType= 'Circle'></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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Pointer animation

Pointer is animated on loading the gauge. This can be handled using the animationDuration property. The duration of the animation can be specified in milliseconds.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80 animationDuration= 1000></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";

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer value=80 animationDuration= 1000></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
},
 };
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Gradient Color

Gradient support allows the addition of multiple colors in the pointers of the Linear Gauge. The following gradient types are supported in the Linear Gauge.

  • Linear Gradient
  • Radial Gradient

Linear Gradient

Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the startValue property. The end value of the linear gradient will be set using the endValue property. The color stop values such as color, opacity, and offset are set using colorStop property.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :orientation= 'orientation' :container= 'container'>
        <e-axes>
          <e-axis :ranges='ranges' :pointers= 'pointers' :line= 'line' :majorTicks= 'majorTicks' :minorTicks= 'minorTicks' :labelStyle= 'labelStyle'></e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

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

const orientation = 'Horizontal';
const container = {
  width: 30, offset: 30
};

const line = { width: 0 };

const majorTicks = { interval: 25, height: 0 };

const minorTicks = { height: 0 };

const labelStyle = {
  font: { color: '#424242'},
  offset: 55
};

const pointers = [{
  value: 80, height: 25,
  width: 35, placement: 'Near',
  offset: -44, markerType: 'Triangle',
  linearGradient: {
    startValue: '0%',
    endValue: '100%',
    colorStop: [
      { color: '#fef3f9', offset: '0%', opacity: 1 },
      { color: '#f54ea2', offset: '100%', opacity: 1 }]
    }
}];

const ranges = [{
  start: 0, end: 80,
  startWidth: 30, endWidth: 30,
  color: '#f54ea2', offset: 30,
}];

provide('lineargauge',  [Gradient]);

</script>
<style>
#content-wrapper {
  padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :orientation= 'orientation' :container= 'container'>
        <e-axes>
          <e-axis :ranges='ranges' :pointers= 'pointers' :line= 'line' :majorTicks= 'majorTicks' :minorTicks= 'minorTicks' :labelStyle= 'labelStyle'></e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  </div>
</template>
<script>

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

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective
},
  data: function () {
    return {
      orientation: 'Horizontal',
      container: {
        width: 30, offset: 30
      },
      line: { width: 0 },
      majorTicks: { interval: 25, height: 0 },
      minorTicks: { height: 0 },
      labelStyle: {
        font: { color: '#424242'},
        offset: 55
      },
      pointers: [{
        value: 80, height: 25,
        width: 35, placement: 'Near',
        offset: -44, markerType: 'Triangle',
        linearGradient: {
          startValue: '0%',
          endValue: '100%',
          colorStop: [
            { color: '#fef3f9', offset: '0%', opacity: 1 },
            { color: '#f54ea2', offset: '100%', opacity: 1 }]
          }
      }],
      ranges: [{
        start: 0, end: 80,
        startWidth: 30, endWidth: 30,
        color: '#f54ea2', offset: 30,
      }]
    }
  },
  provide: {
    lineargauge: [Gradient]
  }
};
</script>
<style>
#content-wrapper {
  padding: 0px !important;
}
</style>

Radial Gradient

Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the innerPosition property. The outer circle position of the radial gradient can be set using the outerPosition property. The color stop values such as color, opacity, and offset are set using colorStop property.

<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :orientation= 'orientation' :container= 'container'>
      <e-axes>
        <e-axis :ranges='ranges' :pointers= 'pointers' :line= 'line' :majorTicks= 'majorTicks' :minorTicks= 'minorTicks' :labelStyle= 'labelStyle'></e-axis>
      </e-axes>
    </ejs-lineargauge>
   </div>
  </div>
</template>
<script setup>
import { provide } from "vue";

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

const orientation = 'Horizontal';
const container = {
  width: 30, offset: 30
};
const line = { width: 0 };
const majorTicks = { interval: 25, height: 0 };
const minorTicks = { height: 0 };
const labelStyle = {
  font: { color: '#424242'},
  offset: 55
};

const pointers = [{
  value: 80, height: 25,
  width: 35, placement: 'Near',
  offset: -44, markerType: 'Triangle',
  radialGradient: {
    radius: '60%',
    outerPosition: { x: '50%', y: '50%' },
    innerPosition: { x: '50%', y: '50%' },
    colorStop: [
      { color: '#fff5f5', offset: '0%', opacity: 0.9 },
      { color: '#f54ea2', offset: '100%', opacity: 0.8 }]
    }
}];

const ranges = [{
  start: 0, end: 80,
  startWidth: 30, endWidth: 30,
  color: '#f54ea2', offset: 30,
}];

provide('lineargauge',  [Gradient]);

</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge :orientation= 'orientation' :container= 'container'>
      <e-axes>
        <e-axis :ranges='ranges' :pointers= 'pointers' :line= 'line' :majorTicks= 'majorTicks' :minorTicks= 'minorTicks' :labelStyle= 'labelStyle'></e-axis>
      </e-axes>
    </ejs-lineargauge>
   </div>
  </div>
</template>
<script>

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

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective
},
  data: function () {
    return {
      orientation: 'Horizontal',
      container: {
        width: 30, offset: 30
      },
      line: { width: 0 },
      majorTicks: { interval: 25, height: 0 },
      minorTicks: { height: 0 },
      labelStyle: {
        font: { color: '#424242'},
        offset: 55
      },
      pointers: [{
        value: 80, height: 25,
        width: 35, placement: 'Near',
        offset: -44, markerType: 'Triangle',
        radialGradient: {
          radius: '60%',
          outerPosition: { x: '50%', y: '50%' },
          innerPosition: { x: '50%', y: '50%' },
          colorStop: [
            { color: '#fff5f5', offset: '0%', opacity: 0.9 },
            { color: '#f54ea2', offset: '100%', opacity: 0.8 }]
          }
      }],
      ranges: [{
        start: 0, end: 80,
        startWidth: 30, endWidth: 30,
        color: '#f54ea2', offset: 30,
      }]
    }
  },
  provide: {
    lineargauge: [Gradient]
  }
};
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

If we set both gradients, only the linear gradient gets rendered. If we set the startValue and endValue of the linearGradient as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge.