Linear gauge appearance in Vue Linear gauge component
11 Jun 202424 minutes to read
Customizing the Linear Gauge area
The following properties are available in the ejs-lineargauge to customize the Linear Gauge area.
-
background- Applies the background color for the Linear gauge. -
border- To customize the color and width of the border in Linear Gauge. -
margin- To customize the margins of the Linear Gauge.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :margin='margin' background= 'skyblue':border ='border'>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge } from "@syncfusion/ej2-vue-lineargauge";
const border = { color: "#FF0000", width: 2 };
const margin = {
left: 20,
top: 20,
right: 20,
bottom: 20
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :margin='margin' background= 'skyblue':border ='border'>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent
},
data: function () {
return {
border: { color: "#FF0000", width: 2 },
margin: {
left: 20,
top: 20,
right: 20,
bottom: 20
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Setting up the Linear Gauge title
The title for the Linear Gauge can be set using title property in Linear Gauge. Its appearance can be customized using the titleStyle with the below properties.
-
color- Specifies the text color of the title. -
fontFamily- Specifies the font family of the title. -
fontStyle- Specifies the font style of the title. -
fontWeight- Specifies the font weight of the title. -
opacity- Specifies the opacity of the title. -
size- Specifies the font size of the title.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :title ='title' :titleStyle ='titleStyle'>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge } from "@syncfusion/ej2-vue-lineargauge";
const title = 'linear gauge';
const titleStyle = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px'
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :title ='title' :titleStyle ='titleStyle'>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent
},
data: function () {
return {
title: 'linear gauge',
titleStyle: {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Customizing the Linear Gauge container
The area used to render the ranges and pointers at the center position of the gauge is called container. The following types of container to be applicable for Linear Gauge.
- Normal
- Rounded Rectangle
- Thermometer
The type of the container can be modified by using the type property in container. The container can be customized by using the following properties in container.
-
offset- To place the container with the specified distance from the axis of the Linear Gauge. -
width- To set the thickness of the container. -
height- To set the length of the container. -
backgroundColor- To set the background color of the container. -
border- To set the color and width for the border of the container.
Normal
The Normal type will render the container as a rectangle and this is the default container type.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis >
<e-pointers>
<e-pointer value= 50 width= 15 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";
const container = {
width: 30
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis >
<e-pointers>
<e-pointer value= 50 width= 15 type= 'Bar'></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: function () {
return {
container: {
width: 30
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Rounded Rectangle
The RoundedRectangle type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the roundedCornerRadius property in container.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value= 50 type= 'Bar'></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 container = {
width: 30,
type: 'RoundedRectangle'
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value= 50 type= 'Bar'></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: function () {
return {
container: {
width: 30,
type: 'RoundedRectangle'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Thermometer
The Thermometer type will render the container similar to the appearance of thermometer.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis >
<e-pointers>
<e-pointer value= 50 type= 'Bar'></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 container = {
width: 30,
type: 'Thermometer'
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :container='container'>
<e-axes>
<e-axis >
<e-pointers>
<e-pointer value= 50 type= 'Bar'></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: function () {
return {
container: {
width: 30,
type: 'Thermometer'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Fitting Linear Gauge to the control
The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the allowMargin property in the ejs-lineargauge is set as false.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge orientation='Horizontal' :allowMargin=false :margin='margin' background='skyblue':border ='border'>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge } from "@syncfusion/ej2-vue-lineargauge";
const border = { color: "#FF0000", width: 2 };
const margin = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge orientation='Horizontal' :allowMargin=false :margin='margin' background='skyblue':border ='border'>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent
},
data: function () {
return {
border: { color: "#FF0000", width: 2 },
margin: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>To use this feature, set the
allowMarginproperty to false, thewidthproperty to 100% and the properties ofmarginto 0.