Vue
Demos
Support
Forum
Download
Search results

Ranges

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>
@import "../../node_modules/@syncfusion/ej2-vue-lineargauge/styles/material.css";
#content-wrapper {
    padding: 0px !important;
}
</style>

Ranges Customization

Ranges can be customized by using startWidth, endWidth and color properties in the range object.

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>
@import "../../node_modules/@syncfusion/ej2-vue-lineargauge/styles/material.css";
#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>
@import "../../node_modules/@syncfusion/ej2-vue-lineargauge/styles/material.css";
#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>
@import "../../node_modules/@syncfusion/ej2-vue-lineargauge/styles/material.css";
#content-wrapper {
    padding: 0px !important;
}
</style>
Previous
Next