Angular 3D Circular Charts - Beautiful and Interactive Component

<div>
        <ejs-circularchart3d id='container'>
            <e-circularchart3d-series-collection>
                <e-circularchart3d-series [dataSource]='data' xName='x' yName='y'>
                </e-circularchart3d-series>
            </e-circularchart3d-series-collection>
        </ejs-circularchart3d>
    </div>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { CircularChart3DAllModule } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';

@Component({
    selector: 'control-content',
    encapsulation: ViewEncapsulation.None,
    imports: [CircularChart3DAllModule]
})

export class 3dchart {
   public dataSource: Object[] = [
        { x: 'Tesla', y: 13 },{ x: 'Aion', y: 8 },
        { x: 'Wuling', y: 7 }, { x: 'Changan', y: 5 },
        { x: 'Geely', y: 4 }, { x: 'Nio', y: 3 },
        { x: 'Neta', y: 22 }, { x: 'BMW', y: 18 }];
    constructor() {
        // code
    };
}