Angular Bubble Chart with 3 Dimensional Data

Download Angular Chart Samples

Example shows Angular Bubble Chart with 3 Dimensional Data where x & y values determine bubble's position on the axes & z determines bubble size.

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

@Component({
  selector: 'app-root',
  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" }
			]
		}]
	}
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CanvasJSAngularChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

You can change the color of marker and type of marker using markerColor and markerType respectively. Some other commonly used customizations include markerBorderThickness, markerBorderColor, etc.

Note   For step by step instructions, follow our Angular Integration Tutorial