Ranges in Vue Linear Gauge component

14 Apr 2021 / 5 minutes to read

You can categorize the axis values using start and end property in the ranges. You can add any number of range for an axis by using array of range objects.

Source

Preview

app.vue

<template>
     <div>
    <div class="content-wrapper">
    <div align='center'>
    <ejs-lineargauge>
    <e-axes>
    <e-axis :ranges='ranges'></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 {
            ranges: [{
             start: 50,
             end: 80
        }]
        }
    }
});
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}
</style>

Ranges Customization

Ranges can be customized using the following properties.

startWidth - Specifies start width of the range
endWidth - Specifies end width of the range
color - Specifies color of the range
position - Specifies the range bar position. Its possible values are ‘inside’ and ‘outside’
Offset - Specifies offset value from its default position
LinearGaugeRangeBorder - Specifies range bar border color and width.

Source

Preview

app.vue

<template>
 <div>
<div class="content-wrapper">
<div align='center'>
<ejs-lineargauge>
<e-axes>
<e-axis :ranges='ranges'></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 {
        ranges: [{
        start: 50,
        end: 80,
        startWidth: 10,
        endWidth: 20,
        color: 'red'
    }]
    }
}
});
</script>
<style>
#content-wrapper {
padding: 0px !important;
}
</style>

Multiple Ranges

You can add multiple ranges to an axis as demonstrated below.

Source

Preview

app.vue

<template>
 <div>
<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>
  </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>

Pointer Animation

Pointer will animate on loading the gauge. This can be handled by using animationDuration property. You need to specify the duration of the animation in milliseconds.

Source

Preview

app.vue

<template>
   <div>
<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>
  </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>

Gradient Color

Gradient support allows to add multiple colors in the ranges and 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.

To apply linear gradient to the range, follow the below code sample.

Source

Preview

app.vue

<template>
 <div>
<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>
  </div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
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 are set using colorStop property.

To apply radial gradient to the range, follow the below code sample.

Source

Preview

app.vue

<template>
 <div>
<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>
  </div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
Vue.use(LinearGaugePlugin);
export default {
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>

Contents

Ranges Customization
Multiple Ranges
Pointer Animation
Gradient Color
Linear Gradient
Radial Gradient

Contents

Ranges Customization
Multiple Ranges
Pointer Animation
Gradient Color
Linear Gradient
Radial Gradient