Search results

Linear Gauge Dimensions in Vue Linear Gauge component

30 Jul 2021 / 2 minutes to read

Size for Linear Gauge

The height and width of the Linear Gauge can be set using the width and height properties in ejs-lineargauge.

In Pixel

The size of the Linear Gauge can be set in pixel as demonstrated below.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge  width= '650px' height= '200px'></ejs-lineargauge>
    </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>

In Percentage

By setting value in percentage, Linear Gauge receives its dimension matching to its parent. For example, when the height is set as ”50%”, Linear Gauge renders to half of the parent height. The Linear Gauge will be responsive when the width is set as ”100%“.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div class="content-wrapper">
    <div align='center'>
      <ejs-lineargauge  width= '100%' height= '50%'></ejs-lineargauge>
    </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>

Note: When the component’s size is not specified, the height will be ”450px” and the width will be the same as the parent element’s width.