How to remove space around semicircle angular gauge

[Namig Abdukarimov]

There is too much unnecessary space. I can not create the size I want. Below is your code sample that I used

<ejs-circulargauge (load)='load($event)'
                   height="170"
                   width="300"
                   style="display: block;"
                   id="circular-container">
    <e-axes>
        <e-axis minimum="0"
                maximum="300"
                startAngle="210"
                endAngle="150"
                [majorTicks]="majorTicks"
                [labelStyle]="labelStyle"
                [lineStyle]="lineStyle"
                [minorTicks]="minorTicks">
            <e-ranges>
                <e-range start="0" end="100" color="#30B32D"></e-range>
                <e-range start="100" end="200" color="#FFDD00"></e-range>
                <e-range start="200" end="300" color="#F03E3E"></e-range>
            </e-ranges>
            <e-pointers>
                <e-pointer [value]="200"
                           [needleTail]="tail"
                           [cap]="pointerCap"
                           radius="60%"
                           color="#757575"
                           pointerWidth="8">
                </e-pointer>
            </e-pointers>
        </e-axis>
    </e-axes>
</ejs-circulargauge>

public load(args: ILoadedEventArgs): void {
    let selectedTheme: string = location.hash.split('/')[1];
    selectedTheme = selectedTheme ? selectedTheme : 'Material';
    args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
}

// custom code end
public majorTicks: Object = {
    height: 10,
    offset: 5,
    interval: 50
};
public minorTicks: Object = {
    height: 5,
    offset: 5,
    interval: 10
};
public tail: Object = {
    length: '18%'
};
public pointerCap: Object = {
    radius: 7
};

[Swetha Babu]

Hi Namig, 

  

Thank you for contacting Syncfusion support. 

  

We can reduce the spacing around the circular gauge control using allowMargin property. When the allowMargin property is set to false and radius is set as 100%, the gauge will render as per the radius calculated with the height and width provided to the control. At this case, the gauge will take either height or width as radius which is minimum value when both are compared. Please find the below stackblitz sample link for your reference. 

  

https://stackblitz.com/edit/angular-rwgy2d-remhzs?file=app.component.html 

  

<ejs-circulargauge 

      height="170" 

      width="300" 

      allowMargin="false" 

      [margin]="margin" 

      (load)="load($event)" 

      style="display:block;" 

      id="range-container" 

      #range=""> 

      <e-axes> 

        <e-axis 

          minimum="0" 

          radius="100%" 

          maximum="300" 

          startAngle="210" 

          endAngle="150" 

          [majorTicks]="majorTicks" 

          [labelStyle]="labelStyle" 

          [lineStyle]="lineStyle" 

          [minorTicks]="minorTicks"> 

          <e-ranges> 

            <e-range start="0" end="100" color="#30B32D"></e-range> 

            <e-range start="100" end="200" color="#FFDD00"></e-range> 

            <e-range start="200" end="300" color="#F03E3E"></e-range> 

          </e-ranges> 

          <e-pointers> 

            <e-pointer 

              value="200" 

              radius="60%" 

              color="#757575" 

              pointerWidth="8" 

              [needleTail]="tail" 

              [cap]="pointerCap"> 

            </e-pointer> 

          </e-pointers> 

        </e-axis> 

      </e-axes> 

    </ejs-circulargauge> 

  

Note: In the above snippet, there will be a space in left and right of the gauge. As the width is greater than the height, the height will be taken as radius and left and right will have some space. However, in order to reduce the space in the left and right of the gauge, you can reduce the width of the gauge using the width property in the gauge. Please find the below modified sample link for your reference. 

  

https://stackblitz.com/edit/angular-k3snz5-bvxzxz?file=app.component.html 

  

In the above sample, we have created the sample using your code snippet. We have set the "allowMargin" as false and margin as zero in the "ejs-circulargauge". Please let us know if the above sample meets your requirement. 

  

Regards, 

Swetha Babu 

[Namig Abdukarimov]

You are perfect :) Thank you

[Swetha Babu]

Hi Namig,

Thank you for your update.

Most Welcome! Please get back to us if you need any further assistance.

Regards,
Swetha Babu