Example shows Angular Bubble Chart with Index / Data Label. Indexlabels are used to show additional information about the datapoint.
/* 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: "light2", animationEnabled: true, title:{ text: "Waste Generation and Urbanization by Region" }, axisX: { title: "Urbanization Rate", titleFontSize: 13, suffix: "%" }, axisY: { title: "Waste Generation per capita (kg/capita/day)", titleFontSize: 13, includeZero: true }, data: [{ type: "bubble", indexLabel: "{z}", color: "#8ecbc7", toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span> <br/> {x}: {y}, {z}", dataPoints: [ { x: 35, y: 0.5, z: 334, name: "South Asia" }, { x: 38, y: 0.5, z: 174, name: "Sub-Saharan Africa" }, { x: 57, y: 0.5, z: 468, name: "East Asia and Pacific" }, { x: 64, y: 0.7, z: 129, name: "Middle East and North Africa" }, { x: 70, y: 1.25, z: 392, name: "Europe and Central Asia" }, { x: 80, y: 1, z: 231, name: "Latin America" }, { x: 82, y: 2.21, z: 289, name: "North America" } ] }] } }
/* app.module.ts */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component'; var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart; @NgModule({ declarations: [ AppComponent, CanvasJSChart ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
indexLabel property can be used to show Index / Data Labels for the data-points. The orientation of the indexlabel can be customized using indexLabelOrientation property. Some other commonly used customization options include indexLabelFontSize, indexLableBackgroundColor, etc.