Ranges in Vue Linear gauge component
11 Jun 202424 minutes to read
Range is the set of values in the axis. The range can be defined using the start and end properties in the e-range. Any number of ranges can be added to the Linear Gauge using the e-ranges.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis>
<e-ranges>
<e-range start=50 end=80></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
RangesDirective as ERanges, RangeDirective as ERange
} 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-ranges>
<e-range start=50 end=80></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangeDirective, RangesDirective } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-ranges":RangesDirective,
"e-range":RangeDirective
},
data: function () {
return {
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Customizing the range
Ranges can be customized using the following properties in e-range.
-
startWidth- Customize the range thickness at the start axis value. -
endWidth- Customize the range thickness at the end axis value. -
color- Customize the range color. -
position- To place the range. By default, the range is placed outside of the axis. To change the position, this property can be set as “Inside”, “Outside”, “Cross”, or “Auto”. -
Offset- To place the range with specified distance from the axis. -
border- Customize color and width of range border.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis>
<e-ranges>
<e-range start=50 end=80 startWidth=10 endWidth=20 color="red"></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
RangesDirective as ERanges, RangeDirective as ERange } 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-ranges>
<e-range start=50 end=80 startWidth=10 endWidth=20 color="red"></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-ranges":RangesDirective,
"e-range":RangeDirective
},
data: function () {
return {
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Setting the range color for the labels
To set the color of the labels like the range color, set the useRangeColor property as true in the labelStyle.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis :labelStyle='labelStyle'>
<e-ranges>
<e-range start=50 end=80 color="red"></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge, AxisDirective as EAxis, AxesDirective as EAxes,
RangesDirective as ERanges, RangeDirective as ERange } from "@syncfusion/ej2-vue-lineargauge";
const labelStyle = {
useRangeColor: true
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style><template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis :labelStyle='labelStyle'>
<e-ranges>
<e-range start=50 end=80 color="red"></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent, AxisDirective, AxesDirective, RangeDirective, RangesDirective } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-ranges":RangesDirective,
"e-range":RangeDirective
},
data: function () {
return {
labelStyle: {
useRangeColor: true
}
}
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Multiple ranges
Multiple ranges can be added to the Linear Gauge by adding collections e-range in the e-ranges and customization of ranges can be done with the e-range.
<template>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis >
<e-ranges>
<e-range start= 0 end= 30 startWidth= 10 endWidth= 10 color= '#41f47f'></e-range>
<e-range start= 30 end= 50 startWidth= 10 endWidth= 10 color= '#f49441'></e-range>
<e-range start= 50 end= 100 startWidth= 10 endWidth= 10 color= '#cd41f4'> </e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script setup>
import { LinearGaugeComponent as EjsLineargauge, AxisDirective as EAxis, AxesDirective as EAxes,
RangesDirective as ERanges, RangeDirective as ERange } 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-ranges>
<e-range start= 0 end= 30 startWidth= 10 endWidth= 10 color= '#41f47f'></e-range>
<e-range start= 30 end= 50 startWidth= 10 endWidth= 10 color= '#f49441'></e-range>
<e-range start= 50 end= 100 startWidth= 10 endWidth= 10 color= '#cd41f4'> </e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</div>
</template>
<script>
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangeDirective, RangesDirective } from "@syncfusion/ej2-vue-lineargauge";
export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-ranges":RangesDirective,
"e-range":RangeDirective
},
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>Gradient Color
Gradient support allows the addition of multiple colors in the range. 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 to be defined in colorStop.
<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',
color: '#f54ea2'
}];
const ranges = [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
offset: 30,
linearGradient: {
startValue: '0%',
endValue: '100%',
colorStop: [
{ color: '#fef3f9', offset: '0%', opacity: 1 },
{ color: '#f54ea2', offset: '100%', opacity: 1 }]
}
}];
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',
color: '#f54ea2'
}],
ranges: [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
offset: 30,
linearGradient: {
startValue: '0%',
endValue: '100%',
colorStop: [
{ color: '#fef3f9', offset: '0%', opacity: 1 },
{ color: '#f54ea2', offset: '100%', opacity: 1 }]
}
}]
}
},
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 to be defined in colorStop.
<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',
color: '#f54ea2'
}];
const ranges = [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
offset: 30,
radialGradient: {
radius: '65%',
outerPosition: { x: '50%', y: '70%' },
innerPosition: { x: '60%', y: '60%' },
colorStop: [
{ color: '#fff5f5', offset: '5%', opacity: 0.9 },
{ color: '#f54ea2', offset: '100%', opacity: 0.9 }]
}
}];
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',
color: '#f54ea2'
}],
ranges: [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
offset: 30,
radialGradient: {
radius: '65%',
outerPosition: { x: '50%', y: '70%' },
innerPosition: { x: '60%', y: '60%' },
colorStop: [
{ color: '#fff5f5', offset: '5%', opacity: 0.9 },
{ color: '#f54ea2', offset: '100%', opacity: 0.9 }]
}
}]
}
},
provide: {
lineargauge: [Gradient]
}
};
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>If we set both gradients for the range, only the linear gradient gets rendered. If we set the
startValueandendValueof thelinearGradientas empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge.