Linear gauge in Vue showing extra space

[Krys Pat]

Hello, I have customized my linear gauge with ranges as on my code below. My problem is it is rendering with linear gauge  aligned on center, not fitted on the parent element it is contained on. I have tried allowMargin, using bootstrap classes, setting the style  height and width with !important or every tag such as the div, lineargauge tag, axis tag (basically trial and error). I have check also in the documentation and it is behaving the same, setting the dimensions does not set the dimension of the gauge itselt only the container, and the gauge is some percent smaller and align on the center. It is kind of difficult layout when you try to align other items because of the extra space. Please help. Below is my latest try.

<pre>

<template>

           <div class="main" ref="gauge" align="left">

                <ejs-lineargauge :height="size.height"   align="left"

                :width="size.width"  background="transparent" id='container1'  

                allow-margin="false"  orientation='Horizontal' :container='container1'>

                 <e-axes align="left">

                     <e-axis :line='line1' :labelStyle='labelStyle1' :ranges='gRanges' align="left"

                        :majorTicks="majorTick1" :minorTicks="minorTick1" >

                        <e-pointers align="left">

                            <e-pointer align="left" :value='graphValue' :height='height1' :color='graphColor' :placement='placement1' :offset='offset1' type="Bar"></e-pointer>

                        </e-pointers>

                     </e-axis>

                 </e-axes>

             </ejs-lineargauge>

           </div>

</template>

<style scoped>

 #control-container {

     padding: 0px !important;

    }

</style>

<script>

import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";

import { defineComponent } from '@vue/composition-api'

export default defineComponent({

 name:"LinearGaugeCustom",

 component:{

    LinearGaugePlugin,

 },

 props:{

     orientationType: String,

     gaugeDesign: Object,

     valueDesign: Object,

     graphValue: Number

 },

 computed:{

        orientation:function(){

            if(this.gaugeDesign === undefined)

                return 'Horizontal';

            console.log(this.orientationType);

            if(this.orientationType.indexOf('GaugeVertical')!= -1)

                 return 'Vertical';

            else

                return 'Horizontal';

        },

     minimum : function(){

         return 0;

     },

     maximum : function(){

         if(this.gaugeDesign===undefined)

            return 100;

        else 

         return this.gaugeDesign.ValueEnd;

     },

     gRanges : function(){

         if(this.gaugeDesign===undefined)

            return [];

            let uniformWidth = 100;

            let range1 = {

                start: 0,

                end:  this.gaugeDesign.Limit2,

                startWidth: uniformWidth,

                endWidth: uniformWidth,

                color: 'rgba(54, 197, 0, 0.7)'

            }

            let range2 = {

                start:  this.gaugeDesign.Limit2,

                end:  this.gaugeDesign.Limit3,

                startWidth: uniformWidth,

                endWidth: uniformWidth,

                color:  'rgba(243, 157, 7, 0.7)'

            }

            let range3 = {

                start:  this.gaugeDesign.Limit3,

                end:  this.gaugeDesign.ValueEnd,

                startWidth: uniformWidth,

                endWidth: uniformWidth,

                color: 'rgba(244, 0, 0, 0.7)'

            }

            return [range1,range2, range3];

     },

     isBlinkOnLimit2:function() { 

         if(this.gaugeDesign === undefined)

            return false;

         else

            return this.gaugeDesign.isBlinkOnLimit3; },

     isBlinkOnLimit3:function() { 

        if(this.gaugeDesign === undefined)

            return false;

        else

            return this.gaugeDesign.isBlinkOnLimit3; },

     isShowValueWithGraph:function() { 

        if(this.gaugeDesign === undefined)

            return false;

        else

            return this.gaugeDesign.IsShowValueWithGraph; },

     graphColor: function(){

         if(this.gaugeDesign === undefined)

            return 'gray';

         if(this.graphValue < this.gaugeDesign.Limit2)

            return this.gRanges[0].color;  //green

         else if(this.graphValue < this.gaugeDesign.Limit3 && this.graphValue > this.gaugeDesign.Limit2)

            return this.gRanges[1].color;   //orange

         else if(this.graphValue > this.gaugeDesign.Limit3)

            return this.gRanges[2].color; //red

         else 

            return 'gray';

     }

     

     

 },

 data:function(){

    return{

        size: {

            height: '100%', width: '100%'

        },

        orientation1: 'Horizontal',

        container1: {

            width: 30, //done

            border: {

                width: 0

            },

            offset: 30 //done

           },

            line1: {

                offset:35 //done

            },

            labelStyle1: {

                font : {size: '0px'} //font-size of label, 0 means do not show

            },

            

             placement1: 'Near',

             offset1: 0,  //offset of pointer

             height1: 200, //height of pointer

             

            majorTick1: { height: 100, width: 1}, //ticks

            minorTick1: { height: 100}, width: 1, //ticks

            annotations1: []

        }

    },

    mounted(){

        console.log(this.valueDesign);

        setTimeout(this.ReRenderThis(), 500);

    },

    watch:{

        graphValue : function(){

                const X = this.gaugeDesign.X - (0.15 *  this.$refs.gauge.offsetWidth);

                const Y = this.gaugeDesign.Y;

                console.log(`Test : ${X},${Y}`);

        }

    },

    methods: {

        ReRenderThis:function(){

            if(this.gaugeDesign==undefined)

            {

                const X = this.gaugeDesign.X - (0.15 *  this.size.width);

                const Y = this.gaugeDesign.Y;

                console.log(`Test : ${X},${Y}`);

            }

        }

    }

})

</script>

<style scoped>

</style>

</pre>

[Swetha Babu]

Hi Krys, 

 

Thank you for contacting Syncfusion support. 

 

When we validated the provided code snippet, we came to know that you have set the "allowMargin" property name wrongly. We have created a simple Vue application using your provided code snippet and the same can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/165901/ze/LinearGauge-1599459848 

 

Code Snippet: 

 

<div class="main" ref="gauge" align="left"> 

                <ejs-lineargauge ref="gauge" :height="size.height"  

                :width="size.width"  background="transparent"   

                :allowMargin=false  orientation='Horizontal' :container='container1'> 

                 <e-axes> 

                     <e-axis :line='line1' :labelStyle='labelStyle1' :ranges='gRanges'  

                        :majorTicks="majorTick1" :minorTicks="minorTick1" > 

                        <e-pointers> 

                            <e-pointer :value='graphValue' :height='height1' :color='graphColor' :placement='placement1' :offset='offset1' type="Bar"></e-pointer> 

                        </e-pointers> 

                     </e-axis> 

                 </e-axes> 

             </ejs-lineargauge> 

   </div>               

 

Please let us know if the above application meets your requirement. Also, please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu.