The height and width of the Linear Gauge can be set using the width and height properties in ejs-lineargauge.
The size of the Linear Gauge can be set in pixel as demonstrated below.
<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>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%“.
<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.