Hi all,
Hope all are good. Do you looking for a good example of angular bubble chart example. Do you look at here a example of angular bubble chart npm. Now i’m going to show you a short tutorial about angular ng2-charts bubble chart . I will help you to give a simple example of how to add bubble chart in angular project.
Now in this post i will use ng2-charts npm package to create bubble chart in angular 11 application. We will now simply install that ng2-charts npm package and use Charts Module module to create that code.
We can easily add any bubble chart in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 any version app.
So, let’s see and start bellows steps and get qr code as like bellow:
Step 1: Create New App
We can easily create any angular app by using bellow command:
ng new myNewApp
Step 2: Install ng2-charts npm Package
Now in this step, we need to just install ng2-charts for our angular application. so let’s run and add this as like bellow:
npm install ng2-charts chart.js --save
Step 3: Import ChartsModule
Now we need to import ChartsModule module as like as bellow code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [ BrowserModule, FormsModule, ChartsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Read Also : Angularjs PHP MySQL Pagination Example
Step 4: Update Ts File
Here, now we need to update ts file as like as bellow:
src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 30,
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
}
}]
}
};
public bubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 10, y: 10, r: 10 },
{ x: 15, y: 5, r: 15 },
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 },
],
label: 'Series A',
},
{
data: [
{ x: 8, y: 7, r: 5 },
{ x: 15, y: 5, r: 15 },
{ x: 5, y: 15, r: 15 },
{ x: 7, y: 8, r: 8 },
],
label: 'Series B',
},
];
constructor() { }
ngOnInit() {
}
}Step 5: Update HTML File
Here, now we need to update also html file as like as bellow code:
src/app/app.component.html
<h1>Angular bubble chart example - Codingspoint.com</h1>
<div style="display: block;">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>Now open commend pad and run by bellow command:
ng serve
now you can check it.
hope it can help you…
