Axes is a collection of linear axis which can be used to indicate the numeric values. Line, ticks, labels, ranges and pointers are the sub elements of an axis.
The line property of an axis provides options to customize the height, width, color and offset of the axis line.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis :line='line'>
</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 {
line: {
height: 150,
width: 2,
color: '#4286f4',
offset: 2
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>You can customize the height, color and width of major and minor ticks, by using majorTicks and minorTicks property. By default, interval for major ticks will be calculated automatically and also you can customize the interval for major and minor ticks using interval property.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis minimum= 20 maximum= 140 :majorTicks='majorTicks' :minorTicks='minorTicks'>
</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 {
majorTicks: {
interval: 20
},
minorTicks: {
interval: 5,
color: 'red'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>The labelStyle property of an axis provides options to
customize the offset, format, color and font of the axis labels.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis :labelStyle='labelStyle2'>
</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 {
labelStyle2: {
font: {
color: 'red'
}
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>If the last label is not in the visible range, it will be hidden by default. If you want to show the last label, set the showLastLabel property to true in the axes property of linear gauge.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis showLastLabel= 'true' maximum=115 :line='line'>
<e-pointers>
<e-pointer value=20 height=15 width=15 color='#757575' offset=30></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 {
line: {
color: '#9E9E9E'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Axis labels can be formatted by using the format property in labelStyle and it supports all the globalize formats.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis :labelStyle='labelStyle'>
</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 {
labelStyle: {
format: 'c'
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>The following table describes the result of applying some commonly used label formats on numeric values.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1,000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1,000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
Axis also supports custom label format using placeholder like {value}°C, in which the value represents the axis label e.g. 20°C.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :axes= '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 {
axes: [{
minimum: 20,
maximum: 140,
labelStyle: {
format: '{value}°C'
}
}]
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>By default, the linear gauge gets rendered vertically. To change its orientation, the orientation property must be set to “Horizontal”
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :orientation='orientation' :axes= '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 {
orientation: "Horizontal",
axes: [{
minimum: 20,
maximum: 140,
}]
}
}
};
</script>isInversed property is used to choose the rendering of axis either bottom to top or top to bottom direction.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis isInversed= 'true'>
</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 {
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>To place an axis opposite from its original position, set opposedPosition property as true in the axis.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge >
<e-axes>
<e-axis opposedPosition= 'true'>
</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 { };
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>You can render any number of axis for a linear gauge by using array of axis objects. Each axis will have its own ranges, pointers, annotations and customization options.
<template>
<div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge :axes='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 {
axes: [{
labelStyle: {
format: '{value}°C'
}
},
{
opposedPosition: true,
labelStyle: {
format: '{value}°F'
}
}]
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>