Customize the Gauge background
Using background
and
border
properties, you can change the background color and border of the linear gauge.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge background= 'skyblue':border ='border' >
</ejs-lineargauge>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
data: function () {
return {
border: { color: "#FF0000", width: 2 }
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>
You can set margin for the lineargauge through margin
property.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :margin ='margin' >
</ejs-lineargauge>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
data: function () {
return {
margin: { left: 40, right: 40, top: 40, bottom: 40 }
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>
You can give the title using title
property to show the information about the linear gauge. Its appearance can be customized by using the titleStyle
property.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :title ='title' :titleStyle ='titleStyle' >
</ejs-lineargauge>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
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>
The area used to render the ranges and pointers at the center position of the gauge is called container
. It can be customized by using type
, offset
, width
, height
and backgroundColor
properties in container
. It is of three types namely,
The normal type will render the container as rectangle and this is the default container type.
<template>
<div>
<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>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
data: function () {
return {
container: {
height: 300,
width: 30
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>
The rounded rectangle type will render the container as rectangle with rounded corners.
<template>
<div>
<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>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
data: function () {
return {
container: {
height: 300,
width: 30,
type: 'RoundedRectangle'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>
This type is used to render the container similar to the thermometer appearance.
<template>
<div>
<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>
</div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
data: function () {
return {
container: {
height: 300,
width: 30,
type: 'Thermometer'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>