Angular Bubble Chart with 3 Dimensional Data

/* app.component.ts */
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	chartOptions = {
		theme: "dark2",
		animationEnabled: true,
		title:{
			text: "Fertility Rate vs Life Expectancy - 2019"
		},
		axisX: {
			title:"Life Expectancy (in Years)"
		},
		axisY: {
			title:"Fertility Rate",
			includeZero: true
		},
			legend: {
			horizontalAlign: "right",
			dockInsidePlotArea: true
			},
		data: [{
			type: "bubble",
			zValueFormatString: "##.##",
			showInLegend: true,
			legendText: "Size of Bubble Represents Population in Millions",
			legendMarkerType: "circle",
			legendMarkerColor: "grey",
			toolTipContent: "<b><span style='\"'color: {color};'\"'>{name}</span></b><br/>Life Exp: {x} yrs<br/> Fertility Rate: {y}<br/> Population: {z}mn",
			dataPoints: [
			{ x: 64.833, y: 4.321, z: 38.041757, name: "Afghanistan" },
			{ x: 82.9, y: 1.657, z: 25.365745, name: "Australia" },
			{ x: 75.881, y: 1.719, z: 211.049519, name: "Brazil" },
			{ x: 82.04878049, y: 1.4684, z: 37.593384, name: "Canada" },
			{ x: 76.912, y: 1.696, z: 1397.715, name: "People's Republic of China" },
			{ x: 80.94146341, y: 1.54, z: 83.019213, name: "Germany" },
			{ x: 71.99, y: 3.28, z: 100.388076, name: "Egypt" },
			{ x: 83.48536585, y: 1.24, z: 46.93706, name: "Spain" },
			{ x: 82.57804878, y: 1.87, z: 67.012883, name: "France" },
			{ x: 81.20487805, y: 1.65, z: 66.647112, name: "United Kingdom" },
			{ x: 69.656, y: 2.202, z: 1366.417756, name: "India" },
			{ x: 70.604, y: 3.597, z: 39.309789, name: "Iraq" },
			{ x: 83.19756098, y: 1.27, z: 60.359546, name: "Italy" },
			{ x: 84.35634146, y: 1.36, z: 126.264931, name: "Japan" },
			{ x: 66.699, y: 3.423, z: 52.573967, name: "Kenya" },
			{ x: 75.054, y: 2.103, z: 127.575529, name: "Mexico" },
			{ x: 77.15, y: 1.514, z: 69.625581, name: "Thailand" },
			{ x: 78.78780488, y: 1.705, z: 328.239523, name: "United States of America" },
			{ x: 64.131, y: 2.381, z: 58.558267, name: "South Africa" }
			]
		}]
	}
}