Angular Circular Gauge - Data Visualization in a Circular Scale

<div class="control-section">
    <ejs-circulargauge style='display:block;' (load)='load($event)'>
        <e-axes>
            <e-axis radius='80%' startAngle=230 endAngle=130 [majorTicks]='ticks' [minorTicks]='ticks' [lineStyle]='lineStyle' [labelStyle]="labelStyle">
                <e-pointers>
                    <e-pointer value=60 radius='60%' pointerWidth=7 [cap]="cap" [needleTail]="tail">
                    </e-pointer>
                </e-pointers>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>
</div>

import { Component, ViewEncapsulation } from '@angular/core';
import { ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-angular-circulargauge';

@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    encapsulation: ViewEncapsulation.None
})
export class DefaultComponent {
    public ticks: Object = {
        width: 0
    };
    public lineStyle: Object = {
        width: 8
    };
    
    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)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast');
    }
    
    public labelStyle: Object = {
        font: {
            fontFamily: 'Roboto',
            size: '12px',
            fontWeight: 'Regular'
        },
        offset: -5
    };
    public cap: Object = {
        radius: 8,
        border: { width: 0 }
    };
    public tail: Object = {
        length: '25%',
    }
    constructor() {
        // code
    };
}