The Angular Bubble Chart is like a scatter chart, but it allows visualization of data in 3 dimensions. The size of the bubble is determined based on the third parameter. Users can customize the data points in the bubble.
Appearance of each data point in a bubble chart can be customized using point render event to differentiate each point based on the size.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.
Easily get started with Angular Bubble Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our Angular Bubble Chart Example that shows you how to render and configure the chart.
- <ejs-chart style='display:block' id='chartcontainer'>
- <e-series-collection>
- <e-series [dataSource]='data' type='Bubble' xName='x' yName='y' size = 'size'> </e-series>
- </e-series-collection>
- </ejs-chart>
- //app.component.ts
-
- import { Component } from '@angular/core';
- export class AppComponent {
- public data: Object[] = [
- { x: 1, y: 45, text: 'USA', fill: '#00226C', size: 1.347 },
- { x: 2, y: 20, text: 'AUS', fill: '#0450C2', size: 1 },
- { x: 3, y: 56, text: 'CHN', fill: '#0073DC', size: 0.01 },
- { x: 4, y: 30, text: 'IND', fill: '#0D98FF', size: 0.7 },
- { x: 5, y: 13, text: 'JPN', fill: '#9CD9FF', size: 0.333 },
- { x: 6, y: 45, text: 'UK', fill: '#0450C2', size: 1 }
- ];
-
-
- }
- //app.module.ts
- import { ChartModule } from '@syncfusion/ej2-ng-charts';
- import { BubbleSeriesService, CategoryService} from '@syncfusion/ej2-ng-charts';
- import { AppComponent } from './app.component';
-
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule, ChartModule
- ],
- providers: [ BubbleSeriesService, CategoryService],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
